本帖最后由 大山哥哥 于 2016-12-31 17:30 编辑
我们上一次介绍了Android中的矢量动画。我们知道就是在xml文件中<vector>根节点下,添加一堆path如:[AppleScript] 纯文本查看 复制代码 <path
android:fillColor="#00C"
android:pathData="M133.8,24.7c-7.9-7.9-20-7.1-28,0.8c-5.9,5.9-6.2,15.7-4,22.3c0.3-1.5,1-3,2.1-4.2c3-3,7.8-3,10.8,0
c3,3,3,7.8,0,10.8c-1.3,1.3-2.9,2-4.6,2.2c6.9,2.7,16.7,2.1,22.8-4C141,44.7,141.8,32.6,133.8,24.7z"/>
但是android:pathData中这一些数字字母是什么意思呢?今天我们就来简单的介绍一下SVG路径语法。我们先来看一条简单的SVG文件:
[AppleScript] 纯文本查看 复制代码 <circle class="st0" cx="81.5" cy="77" r="14.7" />
Android矢量中的对应表达是:
[AppleScript] 纯文本查看 复制代码 android:pathData="M66.8,77 a14.7,14.7 0 0,1 29.4,0 a14.7,14.7 0 0,1 -29.4,0z"
大家都知道,矢量图就是一系列的绘图指令,每个字母字符表示新命令的开始,因此可以理解为:
[AppleScript] 纯文本查看 复制代码 M66.8,77
a14.7,14.7 0 0,1 29.4,0
a14.7,14.7 0 0,1 -29.4,0
z
该路径包含3条不同的命令:
M:表示Moveto命令,将画笔移动到特定的点。通过x,y形式分割的后续数字表明这些点。
a:表示Arc命令,使用指定的半径,从当前画笔位置到指定的点绘制一个圆弧。
z:闭合路径。不一定要闭合路径,但如果当前的位置和开始位置不同,则会在两个位置之间绘制一条线。
介绍完了这些字母分别代表什么意思。下面我们就来看一下一条矢量命令表达的是什么意思。
初始的<circle>元素定义了圆心位于(81.5,77),半径14.7的一个圆。
Android的表达式绘制方式如图:
M66.8,77
先移动到点A(66.8,77)
a14.7,14.7 0 0,1 29.4,0
然后顺时针以点A为起点点B(点B在dianA的右边29.4)为终点,半径为14.7画一个圆弧。就把这个圆的上半部分画出来了。
a14.7,14.7 0 0,1 -29.4,0
然后以点B为起点,点A为终点,半径为14.7画圆的下半部分。(点A在点B的左边29.4)
其中0 0,1表示圆弧不应预先旋转,并且圆弧应沿顺时针扫掠。
|
|