Android矢量圖pathData繪製規則及簡單常用的矢量圖繪製

右箭頭

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
        <path android:name="arrow"
            android:strokeColor="#FFFFFF"
            android:strokeWidth="0.5"
            android:pathData="M12,0 L24,12 12,24"/>
</vector>

下箭頭

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!--android:rotation="180" 可實現上箭頭-->
    <group
        android:name="group1"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="0">
        <path
            android:name="path1"
            android:fillColor="#FFFFFFFF"
            android:pathData="M7,7.67 L17,7.67 12,16.33" />
    </group>
</vector>

圓點

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="300.0"
    android:viewportWidth="300.0">
        <path
            android:name="circle"
            android:fillColor="@android:color/black"
            android:pathData="M150,75 a75,75 0 1,1 0,150 a75,75 0 1,1 0,-150"
            android:strokeColor="#00000000" />

</vector>

矢量圖pathData繪製規則：

1. Mx,y：移動到點(x,y)
2. Lx,y：直線連到點x,y，簡化命令H(x)水平連接和V(y)垂直連接
3. Qx1,y1 x2,y2：二階貝塞爾曲線，控制點（x1,y1），終點x2,y2
4. Cx1,y1 x2,y2 x3,y3：三階貝塞爾曲線，控制點（x1,y1）（ x2,y2），終點x3,y3
5. Tx y：平滑的二階貝塞爾曲線，參數只有一個點(x,y)，這個點是結束點，控制點是前一個二階貝塞爾曲線的控制點相對於前一個貝塞爾曲線的結束點的鏡像點
6. Sx2,y2 x,y：平滑的三階貝塞爾曲線，參數爲(x2,y2 x,y) ，x2,y2 爲第二個控制點，x,y爲繪製終點，那麼第一個控制點則是前一個三階曲線的第二個控制點相對於前一個三階曲線終點的鏡像點
7. Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y：ellipse arc圓弧曲線
8. z：close閉合

注：每個指令都有大小寫形式，大寫表示後面的參數是絕對座標，小寫表示相對於上一個點的相對座標位置，參數可以用逗號或者空格分離

矢量圖繪製橢圓詳解：

Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y

1. rx,ry ：分別表示x軸半徑和y軸半徑
2. x-axis-rotation：表示x軸的旋轉角度
3. large-arc-flag,sweep-flag：分別表示 繪製大弧還是小弧，1大0小，順時針弧線還是逆時針弧線，1順0逆
4. x,y：表示繪製的終點

示例：

標題