Androidの矢量圖形之VectorDrawable研究

5.0以上支持VectorDrawable了，可以創建vector的xml資源文件。vector其實就使用來繪制矢量圖形的。

看一個例子：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    
    <path
         android:fillColor="#000000"
         android:pathData="M25,0 l 50,50 -50,50Z"/>

</vector>

首先vector 標簽是一個drawable對象，所以是放在res/drawable目錄的。

vector 標簽下有android:width和android:height屬性，這兩個屬性是必填的，定義矢量圖形的絕對大小，雖然說是矢量圖形隨意縮放，但是不能說這里不定義寬高直接到要設置到的目標控件上定義控件的寬高，這樣是不允許的，一定要設置這個絕對寬高，要不然會報錯。

然后還有個android:viewportHeight和android:viewportWidth屬性，這個是畫布寬高，也是必填的，定義Path路徑的時候就必須在這個畫布大小里去繪制，超出畫布就顯示不出來了。

path標簽android:fillColor屬性定義繪制顏色，android:pathData定義繪制路徑。

M25,0 l 50,50 -50,50Z這個路徑表示：在100*100的畫布內，先把繪制點移動到絕對坐標(25,0)這個點，然后畫直線到(50,50)這個點，l指令是相對坐標，大寫的L表示絕對坐標，那么l 50,50就是在原點(25,0)的x軸往前移50，往下移50，絕對坐標就是(75,50)，也就是三角形的右邊那個點。
然后從(50,50)這個點繪制到三角形最下面那個點(-50,50)，這也是相對右邊那個點相對坐標，也就是把(75,50)這個絕對坐標當作是原點(0,0),參作這個原點往后移動50再往下移動50，在整個畫布中的絕對坐標就是(25，100)

 再看一種畫法：

M300,70 l 0,-70 70,70 0,0 -70,70z

這個官方的畫法，先定點，然后把定點固定在原點垂直上方，然后往右下移確定三角形右邊的定點，最后把點水平向后移動70往下移動70，回到原點的水平軸在y軸上移動140.

是先畫三角的上半部分再畫下半部分。

同樣是畫上面這個三角形：

先移動到隨便一個點：M300，70

然后把線段一端定在三角形下邊那個點l 0,70（也就是垂直往下移動了70）

后面再補上三角形右邊的點l 0,70 70,70（下面的點x軸和y軸都移動70，就到三角形右邊的點）

M300,70 l 0,70 70,-70  這樣就把三角形下半段畫好了

再補上上半段M300,70 l 0,70 70,-70 -70,-70

如果要把這個三角形旋轉角度怎么辦？

就要在path外層頂一個group節點,利用這個group對它進行旋轉

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    
    <group android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0">
        
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70"/>
    </group>
</vector>