SVG 之pathData使用

前几天无意看到有关矢量图的相关知识。在练习尝试之后，写篇博客作为笔记。有不足之处还请各位大神提议。

这个是一个简单的小例子 一条直线
-

这是效果图
-

参数	表示
M0	代表移动点在x轴的位置为0
0	表示移动点初始时 y轴的位置
L30	表示一条在x轴上长度是30的直线
0	表示该直线在y轴的位置

• 画布的大小取决于 android:viewportHeight && android:viewportWidth 的值
  *

上述代码也可以写成 这样解释便是： 起始点M0 0，到目标点30 0 画一条直线

• 接下来我们来介绍pathData中的 v & h* V 代表垂直 H 代表水平 举个栗子
  

• 在Android 中x轴的正方向是从左往右

• y轴的正方向是从上网下

参数	表示
M2 0	代表起始点
h100	表示x轴正方向位置移动100
v100	表示y轴正方向位置移动100
h-100	表示x轴负方向位置移动100
v-100	表示y轴负方向位置移动100

效果图如下

• 下面我们介绍a 操作符 通过a 我们可以制作圆形，椭圆形
  

参数	表示
a50	表示该圆在x轴方向的半径
50	表示该圆在y轴方向的半径
第一个0	表示 x轴旋转角度
第二个0	表示 y轴旋转角度
1	这个1表示顺时针扫掠 0相反
100 0	表示结束点

绿色方形为画布 中白色圆型极为pathData 绘制路径

• 写到此有必要将各个命令列出来了

M = moveto 相当于 android Path 里的moveTo(),用于移动起始点
L = lineto 相当于 android Path 里的lineTo()，用于画线
H = horizontal lineto 用于画水平线
V =vertical lineto 用于画竖直线
C = curveto 相当于cubicTo(),三次贝塞尔曲线
S = smooth curveto 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve quadTo()，二次贝塞尔曲线
T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线，更平滑
A = elliptical Arc 相当于arcTo()，用于画弧
Z = closepath 相当于closeTo(),关闭path

一个简单贝塞尔曲线图

注意：所有的命令都区分大小写，大写表示绝对位置，小写表示相对位置 ；三次贝塞尔曲线与二次贝塞尔曲线用法相同，只是多了一个操作点

写到此处就结束了，小弟不才 ，请多多指教