小型SVG imageview看起来模糊或“弯曲”

Question

我已经通过Android Studio生成了矢量资产（基于自己的svg文件）。

我的图像视图的布局代码：

<ImageView
        android:id="@+id/iv_drink"
        android:layout_width="21dp"
        android:layout_height="30dp"
        android:layout_marginStart="24dp"
        android:layout_marginBottom="4dp"
        android:scaleType="fitXY"
        app:srcCompat="@drawable/ic_smoothie_icon" />

问题在于，该图像的小版本看起来“弯曲”或模糊。以下是屏幕截图，该屏幕尺寸有所增加（因此您可以看到图像的毛边）。

我的compedSdkVersion是28，minSdkVersion是21。

我尝试使用以下方法解决此问题：

• imageview：android：scaleType =“ fitXY”
• imageview：app：srcCompat而不是app：src
• build.gradle：vectorDrawables.useSupportLibrary = true
• 在资产xml中尝试了不同的大小

什么可能导致此问题？

编辑： 这是svg的内容（图像基于freepik.com上的文件）：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-318 422.4 85.6 122.6" style="enable-background:new -318 422.4 85.6 122.6;" xml:space="preserve">
<g>
    <path d="M-232.4,445l-6.1,100h-49.9l-6.1-100h20.7c-0.6-5.7-1-9.9-1.1-11.7c-0.3-4.8-1.6-6.1-2.1-6.5c-0.4-0.3-0.9-0.6-0.9-0.6
        l-0.3-0.2H-318v-3.1c0,0,14.6-0.5,26.9-0.5c8.4,0,15.8,0.2,16.8,1c2.3,1.8,3.7,4.8,4,9.8c0.1,1.8,0.5,6.1,1.1,11.8L-232.4,445
        L-232.4,445z"/>
</g>
</svg>

矢量xml：

<vector android:height="12.3dp" android:viewportHeight="123"
    android:viewportWidth="86" android:width="8.6dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#000000" android:pathData="M85.6,22.6l-6.1,100h-49.9l-6.1,-100h20.7c-0.6,-5.7 -1,-9.9 -1.1,-11.7c-0.3,-4.8 -1.6,-6.1 -2.1,-6.5c-0.4,-0.3 -0.9,-0.6 -0.9,-0.6l-0.3,-0.2L0,3.6v-3.1c0,0 14.6,-0.5 26.9,-0.5c8.4,0 15.8,0.2 16.8,1c2.3,1.8 3.7,4.8 4,9.8c0.1,1.8 0.5,6.1 1.1,11.8L85.6,22.6L85.6,22.6z"/>
</vector>

Answer 1

在这里，我使用了更易于缩放的尺寸和角度来制作矢量，并记住我们不能绘制半像素，这会涉及到抗锯齿，但是我们可以通过调整形状来缓解这种情况。在处理矢量和动画矢量时，您可以使用shape-shifter编辑路径并将其设置为Android友好或动画化。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">

    <path 
        android:fillColor="#FF000000"
        android:pathData="M9,21L7,6L12,6C12,6,12.013,4.071,12,3.5C,11.987,2.929,12.081,3,11.5,3,L4,3L4,2C4,2,11.505,2.006,12,2,C12.26,2.015,12.506,2.125,12.691,2.309,C12.875,2.494,12.985,2.74,13,3L13,6L18,6L16,21Z"/>
</vector>

Answer 2

我认为您已经遇到了斜线在低分辨率下看起来多么平滑的极限。模糊性是由于anti-aliasing造成的，该尝试是为了平滑仅使用黑色或白色像素而导致的锯齿状边缘。

如果要减少“弯曲”效果，可以尝试更改杯子侧面的倾斜度。由于您的杯子侧面几乎是垂直的，因此在每个侧面上都有一些大的“台阶”，因此曲线更明显。使它们完全垂直，或更倾斜。垂直线没有台阶。斜度更大的行将具有更多的步幅，但步幅较小，因此应减少颠簸。

Answer 3

我认为您的问题是因为s​​caleType。当然，您的向量宽度和高度也有问题。请尝试以下方法：

<ImageView
        android:id="@+id/iv_drink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginBottom="4dp"
        app:srcCompat="@drawable/ic_smoothie_icon" />