在Android Studio中无法正确绘制矢量绘制 [英] Vector drawable not drawn correctly in Android Studio
问题描述
我正在重新设计应用程序，并且在使某些图标在Android Studio中正确绘制时遇到了问题.我正在使用Sketch完成所有设计工作.
I'm in the middle of a redesign for an app, and I am having problems with getting some of the icons to draw correctly in Android Studio. I'm using Sketch for all of the design work.
我已经在网上四处寻找解决方案，但是很难解释搜索字词的问题，所以我想我将尝试发布屏幕截图并提供一个Sketch文件来查看StackOverflow社区可以提供帮助.
I've looked around quite a bit online to try and figure out a solution but am having a very difficult explaining the problem with search terms, so I thought I would try posting screenshots and providing a Sketch file to see if the StackOverflow community can help.
我认为问题与素描中矢量路径的构造有关，尤其是它们之间如何重叠.这是我正在使用的图标的示例:
I think the problem has to do with the construction of my vector paths in Sketch, in particular with how they overlap one another. Here is an example of an icon I'm working on:
如您所见，我在Sketch中创建图标没有问题.但是，在将图标导出到SVG文件并将其导入Android Studio之后，将按照以下方式绘制它:
As you can see, I have no problems creating the icon in Sketch. However, after I export the icon to an SVG file, and import it into Android Studio, here is how it is getting drawn:
我只会在形状变得更加复杂并开始相互重叠时才遇到这个问题.到现在为止，我已经能够使大多数图标保持简单，但是到了需要寻找解决方案的地步.
I only run into this problem when the shapes get more complex and start overlapping one another. Until now, I have been able to keep things simple for most icons, but it's getting to the point where I need to find a solution.
我打算在Dropbox中发布指向Sketch文件的链接，但是我需要更多的信誉点.如有需要，希望我可以在响应中将该链接提供给某人.
I was going to post a link to the Sketch file in Dropbox, but I need more reputation points to do that. If needed, hopefully I can provide that link to someone in a response.
任何帮助将不胜感激.如果这是一个重复的问题，我深表歉意.在我所有的搜索过程中，我可能并没有以这种方式措辞该问题以获得良好的结果.
Any help would be much appreciated. If this is a duplicate question, I apologize. In all of my searching, I may not have worded the issue in such a way to get good results.
@Paul LeBeau，谢谢您的答复.这是从Sketch导出的SVG代码:
@Paul LeBeau, thank you for the response. Here is the SVG code exported from Sketch:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>globe</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="globe" fill="#368EFA">
<g id="test" transform="translate(2.000000, 2.000000)">
<path d="M1.76297407,13 L5.00480805,13 C4.73881764,12.1144772 4.55303608,11.1138143 4.50968627,10 L1.02773406,10 C1.01839018,9.83680058 1.01365419,9.67236691 1.01365419,9.5068271 C1.01365419,9.33666963 1.01865808,9.16768089 1.02852674,9 L4.50968627,9 C4.55303608,7.88618573 4.73881764,6.8855228 5.00480805,6 L1.76915759,6 C1.92639337,5.65361668 2.10620446,5.31965722 2.30671248,5 L5.35559719,5 C6.20744032,2.88601313 7.45296691,1.59423095 7.91693127,1.16221702 C8.43195688,1.06468547 8.96343249,1.01365419 9.5068271,1.01365419 C10.0442032,1.01365419 10.569923,1.06356132 11.0796041,1.15899346 C11.5408038,1.58777803 12.7904304,2.88072886 13.6444028,5 L16.7069417,5 C16.9074497,5.31965722 17.0872608,5.65361668 17.2444966,6 L13.9951919,6 C14.2611824,6.8855228 14.4469639,7.88618573 14.4903137,9 L17.9851275,9 C17.9949961,9.16768089 18,9.33666963 18,9.5068271 C18,9.67236691 17.995264,9.83680058 17.9859201,10 L14.4903137,10 C14.4469639,11.1138143 14.2611824,12.1144772 13.9951919,13 L17.2506801,13 C17.0942093,13.3463294 16.915188,13.6802868 16.7154884,14 L13.6444028,14 C12.7787643,16.1482222 11.506588,17.4473934 11.0611474,17.8580954 C10.5572344,17.95129 10.0377192,18 9.5068271,18 C8.96992723,18 8.44466314,17.9501813 7.93540532,17.8549144 C7.4868821,17.4407166 6.21901315,16.1427067 5.35559719,14 L2.29816579,14 C2.09846621,13.6802868 1.9194449,13.3463294 1.76297407,13 Z M6.02760136,13 L9,13 L9,10 L5.51031179,10 C5.55606369,11.1058076 5.7507371,12.108186 6.02760136,13 Z M6.38814497,14 L9,14 L9,17.9088258 C8.62776002,17.558389 7.2971495,16.2062617 6.38814497,14 Z M9,1.09117415 L9,5 L6.38814497,5 C7.2971495,2.79373835 8.62776002,1.44161098 9,1.09117415 Z M6.02760136,6 L9,6 L9,9 L5.51031179,9 C5.55606369,7.8941924 5.7507371,6.89181397 6.02760136,6 Z M10,13 L12.9723986,13 C13.2492629,12.108186 13.4439363,11.1058076 13.4896882,10 L10,10 L10,13 Z M10,14 L12.611855,14 C11.7028505,16.2062617 10.37224,17.558389 10,17.9088258 L10,14 Z M10,1.09117415 C10.37224,1.44161098 11.7028505,2.79373835 12.611855,5 L10,5 L10,1.09117415 Z M10,6 L12.9723986,6 C13.2492629,6.89181397 13.4439363,7.8941924 13.4896882,9 L10,9 L10,6 Z" id="earth"></path>
<path d="M9.5,18 L9.5,18 C14.1944204,18 18,14.1944204 18,9.5 C18,4.80557963 14.1944204,1 9.5,1 C4.80557963,1 1,4.80557963 1,9.5 C1,14.1944204 4.80557963,18 9.5,18 L9.5,18 Z M9.5,19 L9.5,19 C4.25329488,19 0,14.7467051 0,9.5 C0,4.25329488 4.25329488,0 9.5,0 C14.7467051,0 19,4.25329488 19,9.5 C19,14.7467051 14.7467051,19 9.5,19 L9.5,19 Z" id="border"></path>
</g>
</g>
</g>
</svg>
这是将SVG文件直接导入Android Studio后的代码:
Here is the code after importing the SVG file directly into Android Studio:
<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:pathData="M3.763,15L7.005,15C6.739,14.114 6.553,13.114 6.51,12L3.028,12C3.018,11.837 3.014,11.672 3.014,11.507C3.014,11.337 3.019,11.168 3.029,11L6.51,11C6.553,9.886 6.739,8.886 7.005,8L3.769,8C3.926,7.654 4.106,7.32 4.307,7L7.356,7C8.207,4.886 9.453,3.594 9.917,3.162C10.432,3.065 10.963,3.014 11.507,3.014C12.044,3.014 12.57,3.064 13.08,3.159C13.541,3.588 14.79,4.881 15.644,7L18.707,7C18.907,7.32 19.087,7.654 19.244,8L15.995,8C16.261,8.886 16.447,9.886 16.49,11L19.985,11C19.995,11.168 20,11.337 20,11.507C20,11.672 19.995,11.837 19.986,12L16.49,12C16.447,13.114 16.261,14.114 15.995,15L19.251,15C19.094,15.346 18.915,15.68 18.715,16L15.644,16C14.779,18.148 13.507,19.447 13.061,19.858C12.557,19.951 12.038,20 11.507,20C10.97,20 10.445,19.95 9.935,19.855C9.487,19.441 8.219,18.143 7.356,16L4.298,16C4.098,15.68 3.919,15.346 3.763,15ZM8.028,15L11,15L11,12L7.51,12C7.556,13.106 7.751,14.108 8.028,15ZM8.388,16L11,16L11,19.909C10.628,19.558 9.297,18.206 8.388,16ZM11,3.091L11,7L8.388,7C9.297,4.794 10.628,3.442 11,3.091ZM8.028,8L11,8L11,11L7.51,11C7.556,9.894 7.751,8.892 8.028,8ZM12,15L14.972,15C15.249,14.108 15.444,13.106 15.49,12L12,12L12,15ZM12,16L14.612,16C13.703,18.206 12.372,19.558 12,19.909L12,16ZM12,3.091C12.372,3.442 13.703,4.794 14.612,7L12,7L12,3.091ZM12,8L14.972,8C15.249,8.892 15.444,9.894 15.49,11L12,11L12,8Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
<path
android:pathData="M11.5,20L11.5,20C16.194,20 20,16.194 20,11.5C20,6.806 16.194,3 11.5,3C6.806,3 3,6.806 3,11.5C3,16.194 6.806,20 11.5,20L11.5,20ZM11.5,21L11.5,21C6.253,21 2,16.747 2,11.5C2,6.253 6.253,2 11.5,2C16.747,2 21,6.253 21,11.5C21,16.747 16.747,21 11.5,21L11.5,21Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
推荐答案
我猜您的图标是一个有16个孔的圆圈.正确吗?
I'm guessing your icon is a circle with 16 holes cut out of it. Is that correct?
如果是，则填充规则可能有问题.默认情况下，VectorDrawables(和SVG)使用非零填充规则，如果使用奇偶填充规则渲染形状，则会产生不同的结果.
If so, it's probably an issue with the fill rule. VectorDrawables (and SVGs) use a non-zero fill rule by default, which will give different results if your shape is rendered using the even-odd fill rule.
我猜测Sketch默认使用奇偶填充规则.也许您将其更改为奇数(?)
I am guessing that Sketch defaults to using the even-odd fill rule. Or perhaps you changed it to even-odd (?)
如果由于某种原因您无法在Sketch中修复填充规则，或者在转换为VectorDrawable时未通过填充规则，则需要在VectorDrawable中手动进行更改.
If for some reason you can't fix the fill rule in Sketch, or it doesn't get passed through when you convert to a VectorDrawable, you will need to manually change it yourself in the VectorDrawable.
打开VectorDrawable文件并找到<path>元素.然后更改(或设置)以下属性:
Open the VectorDrawable file and find the <path> element. Then change (or set) the following attribute:
android:fillType="evenodd"
更新
好吧，我认为切换fillType是可以的，但是没有用.但是我有解决方法.
Okay I thought that switching the fillType would work, but it doesn't. But I do have a fix.
许多人不知道的是，填充路径的线段绘制方向会影响填充.所谓线段绘制方向，是指路径(或子路径)中的点是按顺时针方向还是逆时针方向绘制的.这称为点的缠绕".
What many people don't know is that the segment draw direction of filled paths has an affect on fill. By segment draw direction, I mean whether the points in the path (or subpath) were drawn in a clockwise, or anticlockwise, direction. This is known as the "winding" of the points.
修改您的文件并更改六个错误的子路径(切口)，以便它们以与现在相反的方向绘制.然后，您的VectorDrawable应该正确呈现.
Modify your file and alter the six faulty subpaths (cutouts) so that they are drawn in the opposite direction to what they are now. Your VectorDrawable should render correctly then.
例如，如果您尝试使用此修改后的VectorDrawable文件，则会看到我已将其中一个切口(左上方的有问题的切口)中的点重新排列为相反的缠绕方向.一些矢量编辑器可以为您反转路径方向.我不确定Sketch是否可以.
For example, if you try this modified VectorDrawable file, you'll see that I've rearranged the points in one of the cut-outs (the top left faulty one) to the opposite winding direction. Some vector editors can reverse the path direction for you. I'm not sure if Sketch can.
这篇关于在Android Studio中无法正确绘制矢量绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
