?

下面來解釋一下“M 100,240 C510,300 80,100 300,160 H40 v80”這樣字符串的意義。?
分為四種情況來解釋：?
1.?移動指令：Move Command（M）：M 起始點? 或者：m 起始點?
比如：M 100,240或m 100,240?
使用大寫M時，表示絕對值; 使用小寫m時; 表示相對于前一點的值，如果前一點沒有指定，則使用(0,0)。

2.?繪制指令(Draw Command):?
我們可以繪制以下形狀：?
(1) 直線:Line(L)?
(2) 水平直線: Horizontal line(H)?
(3) 垂直直線: Vertical line(V)?
(4) 三次方程式貝塞爾曲線: Cubic Bezier curve(C)?
(5) 二次方程式貝塞爾曲線: Quadratic Bezier curve(Q)?
(6) 平滑三次方程式貝塞爾曲線: Smooth cubic Bezier curve(S)?
(7) 平滑二次方程式貝塞爾曲線: smooth quadratic Bezier curve(T)?
(8) 橢圓圓弧: elliptical Arc(A)?
上面每種形狀后用括號括起的英文字母為命令簡寫的大寫形式，但你也可以使用小寫。使用大寫與小寫的區別是：大寫是絕對值，小寫是相對值。?
比如：L 100, 200 L 300,400表示從絕對坐標點(100,200)到另一絕對坐標點(300,400)的一條直線。而l 100, 200 l 300,400則表示相對上一點（如果未指定，則默認為(0,0)坐標點）開始計算的坐標點(100,200)到坐標點為(300,400)的一條直線。?
當我們重復使用同一種類型時，就可以省略前面的命令。比如：L 100, 200 L 300,400簡寫為：L 100, 200 300,400。

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"><pathandroid: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的對比：?

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" /> <pathandroid:fillColor="#fff70000" 下android:pathData=" M50,50 a10,5 0 1 0 1 0" /><pathandroid:fillColor="#FFF22420" 上android:pathData=" M50,50 a10,5 0 1 1 1 0" /><pathandroid:fillColor="#fff57000"右android:pathData=" M50,50 a10,5 0 1 1 1 1" /><pathandroid: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画图详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。