Небольшое изображение SVG выглядит размытым или "соблазнительным" - PullRequest
0 голосов
/ 12 февраля 2019

Я сгенерировал векторный актив (на основе собственного файла svg) через Android Studio.

Код макета моего изображения:

<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" />

Проблема в том, что это небольшая версия изображения выглядит "пышной" или размытой. Ниже приведен скриншот с увеличенным размером (чтобы вы могли видеть изогнутые края изображений).

enter image description here

Мой compileSdkVersion равен 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>

Vector 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>

Ответы [ 3 ]

0 голосов
/ 13 февраля 2019

Здесь я сделал ваш вектор, используя более масштабируемые размеры и углы, и помнил, что мы не можем нарисовать половину пикселя, там будет задействовано сглаживание, но мы можем смягчить, изменяя формы.при работе с векторными и анимированными векторами вы можете использовать shape-shiftter , чтобы редактировать ваш путь и сделать его дружественным для 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>
0 голосов
/ 14 февраля 2019

Я думаю, что ваша проблема из-за scaleType.Конечно, у вашей векторной ширины и высоты тоже есть проблемы.Пожалуйста, попробуйте это:

<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" />
0 голосов
/ 12 февраля 2019

Я думаю, что вы бежите за пределы того, насколько гладкой может выглядеть наклонная линия при низком разрешении.Размытость происходит из-за сглаживания , которое является попыткой сгладить зубчатый край, который может возникнуть в результате использования только черных или белых пикселей.

Если вы хотите уменьшить "соблазнительную"«Эффект, вы можете попытаться изменить наклон сторон чашки.Поскольку боковые стороны вашей чашки почти вертикальные, на каждой стороне есть несколько больших «ступеней», поэтому изогнутость более заметна.Сделайте их полностью вертикальными или более наклонными.Вертикальная линия не будет иметь шагов.У более наклонной линии будет больше шагов, но меньших, поэтому они должны быть менее неровными.

...