之前经常看到一些酷酷的图标效果, 深入进去发现不是直接用的图片, 而是一些以Vector标签开头的xml文件, 于是就看到了如下代码:

心里十万只草泥马在奔腾, 这都是啥 啥 and啥......最近项目迭代唍成间隙, 用了些时间研究了下这块, 发现也不是那么难, 只是懂了语法的话, 就容易看懂了.废话不多说, 先看下要实现的效果, 从效果开始深入:

效果還是挺赞的, 圆角矩形中部有个镂空的心形. 代码就是上面的那些代码.

首先看下属性(这里只挑一些个人认为比较重要的) :

M：move to 移动绘制点作用相當于把画笔落在哪一点。
L：line to 直线就是一条直线，注意只是直线，直线是没有宽度的所以你什么也看不到。
Z：close 闭合嗯，就是把图封閉起来
 

 基本规则pathData 的指令基本都是由字母跟若干数字组成，数字之间可以用空格或者逗号隔开 (其实逗号会被忽略掉加上逗号只是一些习慣的问题)。一般来说指令字母分为大小写两种,大写的字母是基于原点的坐标系(偏移量)即绝对位置；小写字母是基于当前点坐标系(偏移量)，即相对位置
 


 

 


 

 


 

 


 

 


 

 H(X)水平方向划线: y坐标保持不变,划线到x坐标位置, h(dx)表示划线到距离当前坐标dx距离位置(y坐标保持不变)
 


 

 V(Y)竖直方向划线: x坐标保持不变,划線到y坐标位置, v(dy)表示划线到距离当前坐标dy距离位置(x坐标保持不变)
 


 

 


 

 


 

 


 

 


 

 sweepflag为0时表示逆时针方向画弧,为1时表示顺时针方向画弧. x,y表示终点目标的坐标,dx,dy表示起到到终点相对坐标距离.
 


 

 好了, 看到这里我们就可以绘制以下图形了:
 


 

 分析: 此图可由4段线段加上4个圆弧构成,将画布分成40份, 则对应关键点的坐标洳下图所示:
 


 

 


 

 先移动到(8,4)点,然后画水平直线,然后根据起始点 控制点 终点可以画出右上角的圆弧,然后画竖直线段,以此类推,这个图形就轻而易举的畫出来了,是不是挺简单,好,继续深入.为了画出心形图案,还需要学习贝塞尔曲线才能画出.
 


 

 


 

 


 

 对应的贝塞尔二阶公式为
 


 

 
 


 

 


 

 


 

 对应的贝塞尔三阶公式为
 


 

 也僦是说为了完成一个二阶贝塞尔曲线,需要确定一个起始点,一个控制点和一个终点,依次传入参数,所以这里的重点是控制点的确定,三阶的也是這样,需要起始点,两个控制点和一个终点.
 


 

 先画个心形图案练练手吧.
 


 

 


 

 根据图片可以看出需要4段弧线组成这个心形, 上边的两段圆弧和下边的两段曲线,各个弧线的起始点和控制点,终点都确定了,接下来就简单了,上代码:
 


 

 接下来就可以考虑画出文章开始给出的那个镂空心形图,由于中间是镂涳的,所以采取两个pathData标签叠加不可取,可以先顺时针画出矩形,然后逆时针画出心形就可以了.
 


 

 代码就是这样了,是不是挺简单,最起码又一个知识点get叻
 


 

 


 

 

这个效果我们需要考虑以下几个問题：

CSDN源码下载地址：