提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
上传iconfont时,经常会发现好好的图标,传上去就变残疾,内部布尔运算减去的部分不见了!现在就告诉你这是为啥子!
昨天前端的同事和说我,“大V啊,你把icon都上传到iconfont吧,这样我们只需要调用一次!”。虽然当时我一脸懵逼不太懂什么叫调用一次,但是还是硬着头皮,去探索阿里iconfont的上传功能。
我是用sketch做的图,网站给的AI模版。在和网站云雨一番之后,终于弄懂了sketch该怎么传,于是开始了我的上 床 传之路。
我画了如下图标:
没错,是一个看起来就香甜可口的冰淇淋!点击导出SVG,上传阿里Iconfont,过程一气呵成,简直完美!
等等!WTF!为什么上传之后,我的冰淇淋变成了便便!于是我回头检查sketch图层。
两个图层属性是相同的,并没有问题,但是为什么上面的便便能在Iconfont中显示出来,下面的蛋筒却不行?百思不得其解的我开始百度搜索,然而并没有有效的答案!我再次和我们的程序员大妹子沟通。
没别的办法,只能用这个网站,难道要我全导入AI嘛?秉着我求实(懒惰)的态度,我打开sketch胡乱探索!
如同进村的鬼子一样,每个选项我都点点按按。然后我在角落里发现了这个东西:
sketch默认的是奇偶性,于是我把它改了一下,变成了非零性:
咦?和我上传iconfont时,犯的是同一个毛病,这是sketch的阴谋,还是iconfont的扭曲?
为了验证这一发现,我又实验了几个图标,得出一个结论:iconfont是按照非零性显示svg格式icon。而sketch默认按照奇偶性显示icon。
知道了原因,那么我该怎么做,才能打破便便的诅咒?当然是知其所以然,那么我们需要先搞懂什么是奇偶性,什么是非零性!
奇偶原则、非零环绕原则,是判断路径重叠的图形如何填充的原则。
奇偶原则比较好理解:假设每个封闭的小区域里都有一个被困的小点,这个点要出去,如果穿过偶数条边那么这个区域就不填充,如果穿过奇数条边就填充,如下图所示:
非零环绕原则也不难理解:同样假设每个封闭的小区域有个被困的小点点,这个点要出去,穿过一条顺时针的边就+1,穿过一条逆时针的边就-1。小点出来以后,得数是0这个区域就不填充,得数非0就填充。如下图:
我们再看一下刚才的五角星变成非零性是什么样的:
这个点出来之后,穿过两条顺时针的边,最后得数不为零,所以该区域被填充了。
其实非零环绕原则简单点说,就是穿过的顺时针边数=逆时针边数就不填充,否则填充。
对比而言,奇偶性只要穿过双数边,就显示为不填充。而如果要非零性原则显示为不填充的话,不仅要穿过双数边,还需要所穿过的顺时针和逆时针边数量相同。这样就不难理解为什么sketch里显示不填充,而iconfont中显示填充了——因为穿过的顺时针边,和逆时针边不同呀!!!
当然了,这两种原则还有很多细节性的东西,比如小点点出来的时候,刚好经过一个锐角的顶点。这些不太影响我们的判断,就不在这细说了,大家有兴趣的话可以问下度娘。
知道了原因,现在就要开始解决iconfont中不显示布尔运算的问题了。通过上面对奇偶性和非零性分析,上面的便便可以显示,下面的蛋筒不显示,那么路径应该是这样的:
不论sketch的默认路径方向如何(上图方向仅作示意),蛋筒里的点点一定是穿过了两条相同方向的线,所以在iconfont中显示不出来。那么我们该如何更正,才能使其显示出来呢?
机智的我想出了办法,没错,就是水平翻转或垂直翻转!
翻转之后,图形的形态不变,但是路径方向刚好变换了。这是变换路径方向最便捷,最偷懒的方法。我们赶紧试验一下!
很好!水平翻转之后,终于可以在非零性中显示出蛋筒了。
我们赶快上传试一下!
耶!终于成功了,便便又重新变成了好吃的冰淇淋!
有的图标不是左右对称,那么可以试试垂直翻转。
如果左右上下都不对称,试试翻转图标外轮廓。
那么现在问题来了:
我想在大香蕉里减去一个小香蕉!怎么办????
别慌!把图层分开,给里面的小香蕉添加一个外描边,然后点击轮廓,将描边转换为形状。
转换后进行布尔运算减去顶层。
然后直接删除小香蕉的外轮廓,这样留下的小轮廓尺寸和之前的小香蕉尺寸是一样的!
哈哈哈哈,大功告成!妈妈再也不用担心sketch上传iconfont某部分不显示了!
人民群众的智慧可以战胜 一切 大多数困难!
新人第一次发帖,不足之处请各路大神轻喷。如果这篇贴子对你有一丢丢帮助,或者学到了一丢丢知识的话,点个赞吧,嘿嘿嘿!
(sketch42之前版本存在该问题)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册