VectorDrawable呈现问题

我遇到了由支持库引入的VectorDrawables问题。

环顾四周,我阅读了关于Android Studio中的不良缩放或不正确预览的类似问题。 那么,我的问题是不同的。

问题:

事实上,我的VectorDrawable在Android Studio预览中完美呈现,但在设备上运行时会出现混乱(Android v 5.1.1和6.0)。

出口:

从一个SVG文件(只有一个复合path)开始,我用Android Studio工具导入了它(但是我也尝试了很多其他工具来转换它)。 这个文件和其他一些文件是一样的,尽pipe只有一些渲染不好。

我曾经试过的东西:

我试图用app:srcCompat(甚至用src :)在imageview中设置它。 我试图在菜单中使用它(直接设置图标,或使用select器)。

SVG代码:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 626.96 610.53"><title>PATHOLOGIES</title><path d="M5766.55,588.54a54.73,54.73,0,0,0-4.23-3.81,248.33,248.33,0,0,0,31.34-121.54c-0.23-138.68-114.72-251.15-253.38-249-134.71,2.07-243.52,110.91-245.54,245.64a249.48,249.48,0,0,0,390.59,209.52l0.21,0.22,155.12,155.12,81-81Zm-222.36,64.92c-104.85,0-189.85-85-189.85-189.85s85-189.85,189.85-189.85S5734,358.76,5734,463.61,5649,653.46,5544.19,653.46ZM5452,347.1l7.72-22.08a161.29,161.29,0,0,1,52.5-20.55l-19.84,56.75A19.25,19.25,0,0,1,5467.83,373l-4-1.41A19.25,19.25,0,0,1,5452,347.1Zm20.13,82.62L5430,502.57a19.25,19.25,0,0,1-26.29,7l-3.71-2.14a19.25,19.25,0,0,1-7-26.29L5435,408.33a19.25,19.25,0,0,1,26.29-7l3.71,2.14A19.25,19.25,0,0,1,5472.1,429.72Zm-82.73-14.9A161.59,161.59,0,0,1,5408.85,374l9.06,9.06a19.25,19.25,0,0,1,0,27.22l-3,3A19.24,19.24,0,0,1,5389.37,414.82Zm151.76-54A19.25,19.25,0,0,1,5552,335.85l55.51-21.72a162.36,162.36,0,0,1,43.87,27.64A19.17,19.17,0,0,1,5646,345l-78.34,30.65a19.25,19.25,0,0,1-24.94-10.91Zm-13.43,29.12,66.74,51.21a19.25,19.25,0,0,1,3.55,27l-2.61,3.4a19.25,19.25,0,0,1-27,3.55l-66.74-51.21a19.25,19.25,0,0,1-3.55-27l2.61-3.4A19.25,19.25,0,0,1,5527.69,389.91Zm83.57,191.47-2.82,3.23a19.25,19.25,0,0,1-27.15,1.86l-63.41-55.28A19.25,19.25,0,0,1,5516,504l2.82-3.23a19.25,19.25,0,0,1,27.16-1.86l63.41,55.28A19.25,19.25,0,0,1,5611.26,581.38Zm60.09-191.15,4,1.59a19.25,19.25,0,0,1,10.71,25l-31.28,78.09a19.25,19.25,0,0,1-25,10.71l-4-1.59A19.25,19.25,0,0,1,5615,479l31.28-78.09A19.25,19.25,0,0,1,5671.34,390.24ZM5504.73,604.39a19.19,19.19,0,0,1-4.85,15.4,161.36,161.36,0,0,1-38.43-16.53l-9.92-76.83a19.25,19.25,0,0,1,16.62-21.55l4.25-.55A19.25,19.25,0,0,1,5494,521ZM5686.4,538L5685,544.4a163.11,163.11,0,0,1-56.5,57.93l16.12-73.51a19.25,19.25,0,0,1,22.92-14.68l4.19,0.92A19.25,19.25,0,0,1,5686.4,538Z" transform="translate(-5294.72 -214.14)"/></svg> 

向量代码:

 <vector android:height="24dp" android:viewportHeight="610.53" android:viewportWidth="626.96" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M471.8,374.4a54.7,54.7 0,0 0,-4.2 -3.8,248.3 248.3,0 0,0 31.3, -121.5c-0.2,-138.7 -114.7,-251.1 -253.4,-249 -134.7,2.1 -243.5,110.9 -245.5,245.6a249.5,249.5 0,0 0,390.6 209.5l0.2, 0.2 155.1,155.1 81,-81ZM249.5,439.3c-104.8,0 -189.9,-85 -189.9,-189.9s85,-189.9 189.9,-189.9S439.3,144.6 439.3, 249.5 354.3,439.3 249.5,439.3ZM157.3,133l7.7,-22.1a161.3,161.3 0,0 1,52.5 -20.5l-19.8,56.8A19.3,19.3 0,0 1, 173.1 158.9l-4,-1.4A19.3,19.3 0,0 1,157.3 133ZM177.4,215.6L135.3,288.4a19.3,19.3 0,0 1,-26.3 7l-3.7,-2.1a19.3, 19.3 0,0 1,-7 -26.3L140.3,194.2a19.3,19.3 0,0 1,26.3 -7l3.7,2.1A19.3,19.3 0,0 1,177.4 215.6ZM94.7,200.7A161.6, 161.6 0,0 1,114.1 159.9l9.1,9.1a19.3,19.3 0,0 1,0 27.2l-3,3A19.2,19.2 0,0 1,94.6 200.7ZM246.4,146.7A19.3,19.3 0, 0 1,257.3 121.7l55.5,-21.7a162.4,162.4 0,0 1,43.9 27.6A19.2,19.2 0,0 1,351.3 130.9l-78.3,30.6a19.3,19.3 0,0 1, -24.9 -10.9ZM233,175.8 L299.7,227a19.3,19.3 0,0 1,3.5 27l-2.6,3.4a19.3,19.3 0,0 1,-27 3.5l-66.7,-51.2a19.3,19.3 0, 0 1,-3.5 -27l2.6,-3.4A19.3,19.3 0,0 1,233 175.8ZM316.6,367.3 L313.8,370.5a19.3,19.3 0,0 1,-27.1 1.9l-63.4,-55.3A19.3, 19.3 0,0 1,221.3 289.9l2.8,-3.2a19.3,19.3 0,0 1,27.2 -1.9l63.4,55.3A19.3,19.3 0,0 1,316.5 367.2ZM376.7,176.1 L380.7, 177.7a19.3,19.3 0,0 1,10.7 25l-31.3,78.1a19.3,19.3 0,0 1,-25 10.7l-4,-1.6A19.3,19.3 0,0 1,320.3 264.9l31.3,-78.1A19.3, 19.3 0,0 1,376.6 176.1ZM210,390.3a19.2,19.2 0,0 1,-4.8 15.4,161.4 161.4,0 0,1 -38.4,-16.5l-9.9,-76.8a19.3,19.3 0,0 1, 16.6 -21.5l4.3,-0.6A19.3,19.3 0,0 1,199.3 306.9ZM391.7,323.9L390.3,330.3a163.1,163.1 0,0 1,-56.5 57.9l16.1,-73.5a19.3, 19.3 0,0 1,22.9 -14.7l4.2,0.9A19.3,19.3 0,0 1,391.7 323.9Z"/> 

在Android Studio上呈现:

在Android Studio上呈现

在设备上呈现(在AndroidStudio导入之后):

在设备上呈现

我无法弄清楚是什么导致了糟糕的渲染。 我敢肯定,这不是一个svg问题(纠正我,如果我错了,请),因为其他可绘制渲染正确。 因为我碰巧是唯一一个遇到问题的人,所以我甚至不会去请求一个库bug。 我究竟做错了什么?

谢谢您的帮助

在我的情况下,除非用三次Bézier曲线命令( C )replace所有的椭圆弧命令( A ),否则没有什么帮助。 任何弧可以用一个或几个贝塞尔曲线表示。 整个椭圆可以用四条贝塞尔曲线代替。

一旦开始在SVG中编辑path,Inkscape往往会将弧线转换为贝塞尔曲线,因此您可以使用Inkscape进行转换。 看起来Android的向量渲染器在处理A / a命令时有严重的问题,不pipe它们是相对的还是绝对的。 所以,只要尝试转换A / a => C / c

注意改变命令字是不够的,你需要适当地设置控制点。

我怀疑这是与path命令parsing。 如果我们看看你的path的第一个子path(这是一个没有正确绘制的path),它看起来如下所示:

 M 471.8, 374.4 a 54.7, 54.7 0, 0 0, -4.2 -3.8, 248.3 248.3, 0 0, 0 31.3,-121.5 c -0.2, -138.7 -114.7, -251.1 -253.4, -249 -134.7, 2.1 -243.5, 110.9 -245.5, 245.6 a 249.5, 249.5 0, 0 0, 390.6 209.5 l 0.2, 0.2 155.1, 155.1 81, -81Z 

为了便于阅读,我已经把它分解了。

你可以看到它正在使用SVGpath命令string的function之一,如果一个path命令被重复,你可以跳过它,只提供坐标。 它在这里做a (弧), c (曲线)和l (线)命令。

虽然线段(形成句柄)似乎渲染好,我怀疑VectorDrawable渲染器不正确parsing弧和/或曲线段。 不过,我没有看过Android代码库来确认错误。

我build议你尝试把跳过的path命令字符放回到path,看看它是否工作得更好。 例如:

 M 471.8, 374.4 a 54.7, 54.7 0, 0 0, -4.2 -3.8 a 248.3 248.3, 0 0, 0 31.3,-121.5 c -0.2, -138.7 -114.7, -251.1 -253.4, -249 c -134.7, 2.1 -243.5, 110.9 -245.5, 245.6 a 249.5, 249.5 0, 0 0, 390.6 209.5 l 0.2, 0.2 155.1, 155.1 81, -81Z 

在string后面还有另一个子path(对应于“药丸”之一),也使用重复的坐标捷径。 如果我们也修改,那么生成的VectorDrawable看起来像:

 <vector android:height="24dp" android:viewportHeight="610.53" android:viewportWidth="626.96" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M471.8,374.4a54.7,54.7 0,0 0,-4.2 -3.8a248.3 248.3,0 0,0 31.3, -121.5c-0.2,-138.7 -114.7,-251.1 -253.4,-249c-134.7,2.1 -243.5,110.9 -245.5,245.6a249.5,249.5 0,0 0,390.6 209.5l0.2, 0.2 155.1,155.1 81,-81ZM249.5,439.3c-104.8,0 -189.9,-85 -189.9,-189.9s85,-189.9 189.9,-189.9S439.3,144.6 439.3, 249.5 354.3,439.3 249.5,439.3ZM157.3,133l7.7,-22.1a161.3,161.3 0,0 1,52.5 -20.5l-19.8,56.8A19.3,19.3 0,0 1, 173.1 158.9l-4,-1.4A19.3,19.3 0,0 1,157.3 133ZM177.4,215.6L135.3,288.4a19.3,19.3 0,0 1,-26.3 7l-3.7,-2.1a19.3, 19.3 0,0 1,-7 -26.3L140.3,194.2a19.3,19.3 0,0 1,26.3 -7l3.7,2.1A19.3,19.3 0,0 1,177.4 215.6ZM94.7,200.7A161.6, 161.6 0,0 1,114.1 159.9l9.1,9.1a19.3,19.3 0,0 1,0 27.2l-3,3A19.2,19.2 0,0 1,94.6 200.7ZM246.4,146.7A19.3,19.3 0, 0 1,257.3 121.7l55.5,-21.7a162.4,162.4 0,0 1,43.9 27.6A19.2,19.2 0,0 1,351.3 130.9l-78.3,30.6a19.3,19.3 0,0 1, -24.9 -10.9ZM233,175.8 L299.7,227a19.3,19.3 0,0 1,3.5 27l-2.6,3.4a19.3,19.3 0,0 1,-27 3.5l-66.7,-51.2a19.3,19.3 0, 0 1,-3.5 -27l2.6,-3.4A19.3,19.3 0,0 1,233 175.8ZM316.6,367.3 L313.8,370.5a19.3,19.3 0,0 1,-27.1 1.9l-63.4,-55.3A19.3, 19.3 0,0 1,221.3 289.9l2.8,-3.2a19.3,19.3 0,0 1,27.2 -1.9l63.4,55.3A19.3,19.3 0,0 1,316.5 367.2ZM376.7,176.1 L380.7, 177.7a19.3,19.3 0,0 1,10.7 25l-31.3,78.1a19.3,19.3 0,0 1,-25 10.7l-4,-1.6A19.3,19.3 0,0 1,320.3 264.9l31.3,-78.1A19.3, 19.3 0,0 1,376.6 176.1ZM210,390.3a19.2,19.2 0,0 1,-4.8 15.4a161.4 161.4,0 0,1 -38.4,-16.5l-9.9,-76.8a19.3,19.3 0,0 1, 16.6 -21.5l4.3,-0.6A19.3,19.3 0,0 1,199.3 306.9ZM391.7,323.9L390.3,330.3a163.1,163.1 0,0 1,-56.5 57.9l16.1,-73.5a19.3, 19.3 0,0 1,22.9 -14.7l4.2,0.9A19.3,19.3 0,0 1,391.7 323.9Z"/> 

尝试一下,看看它是否更好。

经过一些尝试(和人的帮助),我发现了这个问题。 问题在于填充规则和其他已经经历过的,但是相反的方式!

实际上,就我所知,VectorDrawable使用非零填充规则,并且在使用evenodd规则导出的SVG中存在渲染问题。 这就是为什么我总是使用非零规则。 原来,使用evenodd解决了我的问题。

我不知道为什么,在这一点上我不敢问。