Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG),同时还引入了 AnimatedVectorDrawable 来支持矢量图动画
1 直线命令
<path> 元素里有5个画直线的命令,顾名思义,直线命令就是在两个点之间画直线。首先是“Move to”命令,M,前面已经提到过,它需要两个参数,分别是需要移动到的点的x轴和y轴的坐标。假设,你的画笔当前位于一个点,在使用M命令移动画笔后,只会移动画笔,但不会在两点之间画线。因为M命令仅仅是移动画笔,但不画线。所以M命令经常出现在路径的开始处,用来指明从何处开始画
M x y 或 m dx dy
能够真正画出线的命令有三个(M命令是移动画笔位置,但是不画线),最常用的是“Line to”命令,L,L需要两个参数,分别是一个点的x轴和y轴坐标,L命令将会在当前位置和新位置(L前面画笔所在的点)之间画一条线段
L x y (or l dx dy)
另外还有两个简写命令,用来绘制平行线和垂直线。H,绘制平行线。V,绘制垂直线。这两个命令都只带一个参数,标明在x轴或y轴移动到的位置,因为它们都只在坐标轴的一个方向上移动。
H x (or h dx)
V y (or v dy)
绘制一个矩形
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="M 100 100 L 300 100 L 300 300 L 100 300 z"
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="M 100 100 H 300 V 300 H 100 z"
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
Z命令会从当前点画一条直线到路径的起点,尽管我们不总是需要闭合路径,但是它还是经常被放到路径的最后。另外,Z命令不用区分大小写
2 曲线命令
绘制平滑曲线的命令有三个,其中两个用来绘制贝塞尔曲线,另外一个用来绘制弧形或者说是圆的一部分.
在path元素里,只存在两种贝塞尔曲线:三次贝塞尔曲线C,和二次贝塞尔曲线Q
2.1 贝塞尔曲线
2.1.1 三次贝塞尔曲线C
三次贝塞尔曲线C,三次贝塞尔曲线需要定义一个点和两个控制点,所以用C命令创建三次贝塞尔曲线,需要设置三组坐标参数:
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
这里的最后一个坐标(x,y)表示的是曲线的终点,另外两个坐标是控制点,(x1,y1)是起点的控制点,(x2,y2)是终点的控制点
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="400"
android:viewportWidth="400">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="M 100 100 C 200 0 300 0 400 100 "
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
M 定义起点为(100,100)
C 定义终点为(400,100)
其中两个控制点 (200,0)(300,0)
2.1.2 连接贝塞尔曲线 S
以将若干个贝塞尔曲线连起来,从而创建出一条很长的平滑曲线。通常情况下,一个点某一侧的控制点是它另一侧的控制点的对称(以保持斜率不变)。这样,可以使用一个简写的贝塞尔曲线命令S
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="800dp"
android:height="800dp"
android:viewportHeight="800"
android:viewportWidth="800">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="M 100 100 C 200 0 300 0 400 100 S 600 200 700 100"
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
2.1.3 二次贝塞尔曲线Q
它比三次贝塞尔曲线简单,只需要一个控制点,用来确定起点和终点的曲线斜率。因此它需要两组参数,控制点和终点坐标
Q x1 y1, x y (or q dx1 dy1, dx dy)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="400dp"
android:height="400dp"
android:viewportHeight="800"
android:viewportWidth="800">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="M 100 100 Q 200 0 400 100"
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
2.1.4 连接贝塞尔曲线 T
就像三次贝塞尔曲线有一个S命令,二次贝塞尔曲线有一个差不多的T命令,可以通过更简短的参数,延长二次贝塞尔曲线。
T x y (or t dx dy)
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="800dp"
android:height="800dp"
android:viewportHeight="800"
android:viewportWidth="800">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="M 100 100 Q 200 0 300 100 T 500 100"
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
2.2 弧形
弧形命令A是另一个创建SVG曲线的命令。基本上,弧形可以视为圆形或椭圆形的一部分。假设,已知椭圆形的长轴半径和短轴半径,另外已知两个点(它们的距离在圆的半径范围内),这时我们会发现,有两个路径可以连接这两个点。每种情况都可以生成出四种弧形。所以,为了保证创建的弧形唯一,A命令需要用到比较多的参数
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
弧形命令A的前两个参数分别是x轴半径和y轴半径
参数 x-axis-rotation (第三个)表示弧形的旋转情况
参数 large-arc-flag (第四个)决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧。
参数 sweep-flag(第五个)表示弧线的方向,0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧。
最后的参数x y 是弧线的终点
实例
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:///apk/res/android"
android:width="800dp"
android:height="800dp"
android:viewportHeight="800"
android:viewportWidth="800">
<path
android:name="rect_vector"
android:fillColor="#04f91d"
android:pathData="
M 100 400
A 100 120 0 0 1 400 400 Z"
android:strokeColor="#f76f07"
android:strokeWidth="5" />
</vector>
这里 起点坐标是 (100,400) 弧线的半径 rx =100 ry=120 旋转角度为 0度,第四个参数 0 代表取的是小角方向的弧度,这里正好两而相等
终点坐标是 (400,400) 最后 Z 闭合曲线