上上篇講到SVG的動畫.但是沒詳細講到pathData里面的詳細路徑.
比如下面這個圖形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M22,16
V4
c0,-1.1 -0.9,-2 -2,-2
H8
c-1.1,0 -2,0.9 -2,2
v12
c0,1.1 0.9,2 2,2
h12
c1.1,0 2,-0.9 2,-2z
m-11,-4
l2.03,2.71
L16,11
l4,5
H8
l3,-4z
M2,6
v14
c0,1.1 0.9,2 2,2
h14
v-2
H4
V6
H2z" />
看到這里pathData里的數(shù)據(jù)，顯而易見，我把圖的每個畫圖步驟換行分解了。
pathData 的指令基本都是由字母跟若干數(shù)字組成，數(shù)字之間可以用空格或者逗號隔開 (其實逗號會被忽略掉，加上逗號只是一些習慣的問題，方便查看)。一般來說指令字母分為大小寫兩種,大寫的字母是基于原點的坐標系(偏移量)，即絕對位置；小寫字母是基于當前點坐標系(偏移量)，即相對位置。
M：move to 移動繪制點，作用相當于把畫筆落在哪一點。
L：line to 直線，就是一條直線，注意，只是直線，直線是沒有寬度的，所以你什么也看不到。
Z：close 閉合，嗯，就是把圖封閉起來。
C：cubic bezier 三次貝塞爾曲線
Q：quatratic bezier 二次貝塞爾曲線
A：ellipse 圓弧
對應坐標的含義
M (x y) 把畫筆移動到x,y，要準備在這個地方畫圖了。
L (x y) 直線連到x,y，還有簡化命令H(x) 水平連接、V(y)垂直連接。
Z，沒有參數(shù)，連接起點和終點
C(x1 y1 x2 y2 x y)，控制點（x1,y1）（ x2,y2），終點x,y 。
Q(x1 y1 x y)，控制點（x1,y1），終點x,y
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
移動
M x,y ； (m dx, dy) 移動虛擬畫筆到對應的點，但是并不繪制。一開始的時候默認是在(0,0)。
比如現(xiàn)在，M22,16，就是將開始點定位到(22,16)這里。
直線
L x,y (l dx, dy) 從當前點劃一條直線到對應的點。
H x (h dx) 從當前點繪制水平線，相當于l x,0
V y (v dy) 從當前點繪制垂直線，相當于l 0,y
現(xiàn)在，V4 就是基于剛才(22,16)的基礎上，在Y軸的方向畫垂直線，X軸不變。劃線到(22,4)這個點上。
這里 c0,-1.1 -0.9,-2 -2,-2，c是三次貝塞爾曲線。小寫說明是基于(22,4)點的相對坐標來進行繪制。
0,-1.1是控制點1，-0.9,-2是控制點2，-2,-2是終點位置。所以基于相對位置?？梢杂嬎愠隹刂泣c1的絕對位置。
即是(22,2.9),控制點2是(21.1, 2),終點是(20,2)
終點和起點連接起來也就成為這個圖。
同理剩下的也就可以形成正方形圓角
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M22,16
V4
c0,-1.1 -0.9,-2 -2,-2
H8
c-1.1,0 -2,0.9 -2,2
v12
c0,1.1 0.9,2 2,2
h12
c1.1,0 2,-0.9 2,-2z
"/>
</vector>
由于我們畫正方形的時候是逆時針來畫，如果這個山形也是逆時針來畫的話，也就重疊看不見了。所以要順時針來畫山形。在此基礎上加上m-11,-4 l2.03,2.71 L16,11 l4,5 H8 l3,-4z 也就可以看見了。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M22,16
V4
c0,-1.1 -0.9,-2 -2,-2
H8
c-1.1,0 -2,0.9 -2,2
v12
c0,1.1 0.9,2 2,2
h12
c1.1,0 2,-0.9 2,-2z
m-11,-4
l2.03,2.71
L16,11
l4,5
H8
l3,-4z
"/>
</vector>
剩下的那個圖形也就非常簡單了。
這里面沒講到A命令的具體的使用。
A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y
a rx,ry x-axis-rotation large-arc-flag,sweepflag dx,dy
rx ry 橢圓半徑
x-axis-rotation x軸旋轉(zhuǎn)角度
large-arc-flag 為0時表示取小弧度，1時取大弧度（要長的還是短的）
sweep-flag 0取逆時針方向，1取順時針方向
x,y (dx,dy) 終點的位置
android:pathData=" M50,50 a10,5 0,1 0 1,0" />
以50，50為起點，逆時針畫
橢圓圖形，x軸半徑10，y軸半徑5
轉(zhuǎn)動x軸~~~
android:pathData=" M50,50 a10,5 90,1 0 1,0" />
我想要橢圓上半段，此處修改為x軸半徑的兩倍
android:pathData=" M50,50 a10,5 90,1 0 20,0" />
橢圓左半段
android:pathData=" M50,50 a10,5 90 1 0 0 10" />
橢圓右半段
android:pathData=" M50,50 a10,5 90 1 1 0 10" />
<path
android:fillColor="#fff70000" 下
android:pathData=" M50,50 a10,5 0 1 0 1 0" />
<path
android:fillColor="#FFF22420" 上
android:pathData=" M50,50 a10,5 0 1 1 1 0" />
<path
android:fillColor="#fff57000"右
android:pathData=" M50,50 a10,5 0 1 1 1 1" />
<path
android:fillColor="#FF323243"左
android:pathData=" M50,50 a10,5 0 1 0 0 1" />
出現(xiàn)上面的情況可以想到是因為，起始點50,50在橢圓中的位置不同。那么，再修改一下。
android:pathData=" M50,50 a10,5 0 1 1 0 7" /> 修改了右邊橢圓的代碼
現(xiàn)在取的是大弧度，所以看到這樣的效果，如果 7改為10（也就是y軸半徑的兩倍）這剛好會在 一半的位置。
現(xiàn)在取小弧度看看
android:pathData=" M50,50 a10,5 0 0 1 0 7" /> ，可以看到小弧度 順時針畫圖。
再修改為逆時針，
android:pathData=" M50,50 a10,5 0 0 0 0 7" />
橢圓的屬性 差不多講解完成了，如下
android:pathData=" M50,50 a10,5 0 0 0 0 7" />
10，5 為橢圓x，y軸半徑
第一個0 為 x軸旋轉(zhuǎn)角度
第二個0 為取大小弧度，0為小，1為大
第三個0 為順逆時針，0為逆1為順
第四個0 為修改起始點在橢圓中的位置，y軸.
第五個 7 為修改起始點在橢圓中的位置，x軸。
這是前輩留下的圖：
