Android VectorDrawable SVG 命令详细分析

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://schemas.android.com/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://schemas.android.com/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://schemas.android.com/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://schemas.android.com/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://schemas.android.com/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://schemas.android.com/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://schemas.android.com/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 闭合曲线