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 閉合曲線