SVG是Scalable Vector Graphics的简写,是一种矢量图格式。在 Android 5.0 ( API 21) 时候,用 VectorDrawable 支持矢量图,用 AnimatedVectorDrawable 支持矢量图动画。SVG在Android资源文件中标签是<vector>,其中通过标签<path>可以画出各种图形,然后像一般图片一样使用。非常方便,也可以很大的节省app的空间,但是全是字母数字,掌握起来还是有点难度的。先简单记录一下规则吧!
path的语法规则如下:
M:move to 移动绘制点,作用相当于把画笔落到某一个点。
L:line to 直线,就是画一条直线。注意:只是直线,直线是没有宽度的,所以你什么也看不到
V:vertical 垂直直线
H:horizontal 水平直线
Z:close 闭合,就是把图封闭起来
Q:quadratic bezier 二次贝塞尔曲线
T:二次贝塞尔曲线
C:cubic bezier 三次贝塞尔曲线
S:三次贝塞尔曲线
A:ellipse圆弧
每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写代表相对坐标,相对于上一个点的位置。参数之间用空格或者逗号隔开,其实逗号编译器会忽略,只是方便自己读写。
命令详解
M(x,y) 画笔移动到x,y点位置
L(x,y) 从当前点到x,y点画一条直线
V(y) 从当前点画一条垂直线,相当于L(0,y)
H(x) 从当前点画一条水平线,相当于L(x,0)
Z 没有参数,连接当前点和起点,是图形闭合
Q(x1 y1 x y),控制点(x1,y1),终点x,y
T(x y) T比Q少了控制点,只指定了终点x,y,T的控制点是默认就是上一次的控制点关于上次终点的中心对称点。比如上次的控制点P1是(2,-4),终点P2是(4,0), 那么使用T指令后默认控制点P1`为(2,4)。因此T指令可以用在Q指令之后,只指定终点就可以画出一条平滑贝塞尔曲线。
C(x1 y1 x2 y2 x y),控制点(x1,y1)( x2,y2),终点x,y 。
S(x1 y1 x y) S比C指令少了一个控制点,只制定了一个控制点(x1,y1),另一个控制点是上一次最后一个控制点相对上次的终点的中心对称点,终点是x,y
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry是椭圆半径
x-axis-rotation是x轴旋转角度
large-arc-flag为0时表示取小弧度,1时取大弧度 (舍取的时候,是要长的还是短的)
sweep-flag为0取逆时针方向,1取顺时针方向
x y是终点的位置