黑马程序员技术交流社区

标题: 【济南中心】Android显示矢量图（二） [打印本页]

---

作者: 大山哥哥    时间: 2016-12-31 17:30
标题: 【济南中心】Android显示矢量图（二）


我们上一次介绍了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表示圆弧不应预先旋转，并且圆弧应沿顺时针扫掠。

---

作者: 小虎同学    时间: 2017-1-3 10:29
并没看太懂

---

作者: baby14    时间: 2019-7-6 10:44
多谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2