VectorDrawable 未居中对齐 [英] VectorDrawable is not center aligned

问题描述

我用我拥有的路径数据创建了一个 VectorDrawable 文件.但问题是图像没有在整个区域的中心对齐，而是创建为左上对齐.看看:

I've created a VectorDrawable file with the path data i had. But the issue is that image is not aligning at the centre of the total area and instead it's created as top-left aligned. Have a look:

文件:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

现在检查当作为 app:srcCompat 用于 imageView 时它的实际外观.

Now check how it actually looks when using as app:srcCompat for imageView.

有什么办法可以解决这个问题，因为我对 VectorDrawables 没有太多经验?

Is there any way to resolve this as i don't have much experience with VectorDrawables?

任何形式的帮助将不胜感激.

Any kind of help would be appreciated.

这就是我使用矢量可绘制对象的方式.

This is how i used the vector drawable.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/close_button"/>

推荐答案

您指定矢量为 24x24，但路径不是那么大.如果我们实际检查它的尺寸，它的边界框坐标是:

You are specifying that your vector is 24x24, but the path is not that big. If we actually check its dimensions, its bounding box coords are:

     x: -0.034
     y: -0.033
 width: 13.369
height: 13.032

所以它只占据左上角大约 13x13 的区域.

So it's only occuping a roughly 13x13 area at the top left.

您有多种选择来解决这个问题，具体取决于您想要的结果.

You have several options to fix this depending on what your desired outcome is.

解决方案 1

如果您希望图标被放大以占据整个 24x24 图标区域，那么将 viewportWidth 和 viewportHeight 更改为更合适的内容应该可以工作.

If you want the icon to be scaled up to occupy the whole of your 24x24 icon area, then changing the viewportWidth and viewportHeight to something more appropriate should work.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="13.4"
    android:viewportWidth="13.1">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

我在这里通过改变视口所做的是告诉 Android VectorDrawable 的实际内容在从 (0,0) 到 (13.4,13.1) 的区域内.这并不准确，但可能已经足够接近了.Android 应放大该区域中的所有内容以填充 24x24 图标区域.

What I've done here by altering the viewport is to tell Android that the actual content of the VectorDrawable is in the area from (0,0) to (13.4,13.1). That's not exact, but it is probably close enough. Android should scale everything in that area up to fill the 24x24 icon area.

解决方案 2

另一种解决方案是将路径移动到 24x24 视口的中心.您可以使用 VectorDrawable 标签来实现.

The other solution is to shift the path into the centre of the 24x24 viewport. You can do that with the VectorDrawable <group> tag.

我们需要对移动该路径的路径应用平移，使其居中.

We need to apply a translation to the path that moves that path so it is centred.

现在路径的中心是:

x = -0.034 + 13.369/2
  = 6.651
y = -0.033 + 13.032/2
  = 6.483

我们希望将其移至 12,12.因此，我们将路径包装在具有适当数量的 translateX 和 translateY 值的组中.

We want that to be moved to 12,12. So we wrap the path in a group that with translateX and translateY values of the appropriate amount.

我们需要沿 X 轴右移 (12 - 6.651) = 5.349，并且我们需要向下移动 (12 - 6.483) = 5.517.

We need to shift right along the X axis by (12 - 6.651) = 5.349, and we need to shift down by (12 - 6.483) = 5.517.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <group translateX="5.349" translateY="5.517"> 
        <path
            android:fillColor="@android:color/white"
            android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />
    </group>
</vector>

当然，您也可以选择组合这两种方法.或者，如果您不仅需要将十字架移动，还需要将其放大一点，也可以向组添加比例.

Of course you also have the option of combining these two approaches. Or adding a scale to the group as well if you need the cross not only be shifted, but enlarged a bit as well.

这篇关于VectorDrawable 未居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！