J'ai généré un élément vectoriel (basé sur un propre fichier svg) via Android Studio.
Le code de mise en page de ma vue d'image:
<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>
Le problème est , que cette petite version de l'image semble "sinueuse" ou floue. Voici une capture d'écran avec une taille accrue (afin que vous puissiez voir les bords curieux des images).
Ma version compileSdkVersion est 28 et minSdkVersion est 21.
J'ai essayé de résoudre ce problème en utilisant ce qui suit:
Qu'est-ce qui pourrait causer ce problème?
MODIFIER: Voici le contenu du svg (l'image est basée sur un fichier de 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:
<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" />
3 Réponses :
Je pense que vous vous heurtez aux limites de la fluidité d'une ligne en pente, à basse résolution. Le flou est dû à anti-aliasing , qui est une tentative de lissage le bord dentelé qui résulterait de l'utilisation uniquement de pixels noirs ou blancs.
Si vous souhaitez réduire l'effet "courbée", vous pouvez essayer de changer la pente des côtés de la tasse. Puisque les côtés de votre tasse sont presque verticaux, il y a quelques grandes «marches» de chaque côté, de sorte que la courbure est plus perceptible. Rendez-les complètement verticaux ou plus inclinés. Une ligne verticale n'aura pas de marches. Une ligne plus inclinée aura plus de pas, mais des plus petits, donc ils devraient être moins cahoteux.
Ici, j'ai créé votre vecteur en utilisant des dimensions et des angles plus adaptés à l'échelle et rappelez-vous que nous ne pouvons pas dessiner un demi-pixel, il y aura un anti-aliasing, mais nous pouvons atténuer en ajustant les formes. lorsque vous travaillez avec des vecteurs et des vecteurs animés, vous pouvez utiliser shape-shifter pour modifier votre chemin et le rendre compatible avec Android ou même animer
<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>
Je pense que votre problème vient de scaleType. Bien sûr, la largeur et la hauteur de votre vecteur ont également un problème. Veuillez essayer ceci:
<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" />
C'est un bon point, que l ' android: scaleType = "fitXY" de Jan entraînera souvent un étirement, une distorsion du rapport hauteur / largeur, ce qui pourrait contribuer au problème. Cependant, les deux images qu'il a montrées côte à côte ont le même rapport hauteur / largeur, ce qui suggère que le rapport hauteur / largeur n'est pas le problème.
Log.dla valeur deImageView.getDrawable ()(ouImageView.getDrawable (). getClass ()), que voyez-vous?Le résultat est "class android.graphics.drawable.VectorDrawable". Ou est-ce que je vous comprends mal?
la même chose si vous utilisez
vectorDrawables.useSupportLibrary = true?Cette image est-elle un écran d'impression sur le bureau ou provient-elle d'un appareil réel? Parce que si cela se trouve sur l'émulateur, cela ira probablement bien sur un appareil réel car la densité sera beaucoup plus grande sur le périphérique réel, l'anti-aliasing sera beaucoup mieux.
veuillez mettre votre détail svg ici.
@pskink oui, c'est pareil
@Mihai la pipcture provient d'un appareil réel
J'ai entendu dire que le
VectorDrawablenatif (pas du support libSupportVectorDrawable) avait sur certaines versions de plate-forme de tels bogues - c'était Android 5.0 ou 6.0 je ne me souviens pas correctement@MasoudMokhtari je viens d'ajouter le code svg à l'article principal
pourquoi n'utilisez-vous pas un vecteur au lieu du svg. Je crois que votre svg est pixellisé à la mauvaise taille et c'est pourquoi vous obtenez cet effet étrange. Pour une meilleure compatibilité, utilisez la balise vectorielle et créez votre fenêtre d'affichage 24,0 x 24,0 et la largeur et la hauteur 24dp, de cette façon tout s'adapte bien à la densité.
J'utilise en fait un vecteur xml. Ce qui précède n'est que mon fichier de base, que j'ai converti dans Android Studio.