Android vector Path Data畫圖詳解

標籤：

 

　　SVG是一種向量圖格式，是Scalable Vector Graphics三個單詞的首字母縮寫。在xml檔案中的標籤是<vector>，畫出的圖形可以像一般的圖片資源使用，例子如下：

<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,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" /></vector>

其所畫出的圖形為　　　

於此同時，android studio提供了豐富的圖片資源，可以右鍵module,new->vector asset選擇，如下：

是不是很羨慕這些酷酷的圖形，當然自己也可以去動手去做。顯而易見，上面例子的重點是在PathData裡面的那一大竄數字：

android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />

 

xml檔案中： 

android:viewportHeight="24.0" android:viewportWidth="24.0"> 是聲明的畫布大小。

先慢慢學習一些基本的文法：

• 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，沒有參數，串連起點和終點
• C(x1 y1 x2 y2 x y)，控制點（x1,y1）（ x2,y2），終點x,y 。
• Q(x1 y1 x y)，控制點（x1,y1），終點x,y
• C和Q會在下文做簡單對比。
• A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) 

• android:pathData=" M50,50 a10,10 1,1 0 1,0" />
  rx ry 橢圓半徑 
  x-axis-rotation x軸旋轉角度 
  large-arc-flag 為0時表示取小弧度，1時取大弧度 （舍取的時候，是要長的還是短的）
  sweep-flag 0取逆時針方向，1取順時針方向 

L的用法：

android:pathData=" M10,0 L10,40 40,40" /> 
把畫筆放在（10,0）位置，連線10，40點 在連線40，40點。。。於是，一個直角三角形出來了~這裡沒有寫z，沒什麼關係。
    

 Q和C的對比： 詳細瞭解貝茲路徑：

http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

Q
 android:pathData="M0,0 q30,90 80,20"/>　　　

　
控制點1，30,90 ：
控制點2，80,20  : 

C

android:pathData=" M0,0 c0,0 30,90 80,20" />
C 第一控制點(0,0) 第二控制點(30,90) 結束點(80,20) 或 c 第一控制點 第二控制點 結束點

現在修改第一個控制點：

android:pathData=" M0,0 c50,0 30,90 80,20" />

a:

這麼多 數字，怎麼看啊，可以直接拉到下面看作用。

android:pathData=" M50,50 a10,5 0,1 0 1,0" />
以50，50為起點，逆時針畫

橢圓圖形，x軸半徑10，y軸半徑5 

 

轉動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" />

出現上面的情況可以想到是因為，起始點50,50在橢圓中的位置不同。那麼，再修改一下。

    android:pathData=" M50,50 a10,5 0 1 1 0 7" />  修改了右邊橢圓的代碼
  現在取的是大弧度，所以看到這樣的效果，如果 7改為10（也就是y軸半徑的兩倍）這剛好會在 一半的位置。

現在取小弧度看看，

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軸旋轉角度

第二個0 為取大小弧度，0為小，1為大

第三個0 為順逆時針，0為逆1為順

第四個 7 為修改修改起始點在橢圓中的位置，該位置為起始點。

這是前輩留下的圖：

Android vector Path Data畫圖詳解