?

下面來(lái)解釋一下“M 100,240 C510,300 80,100 300,160 H40 v80”這樣字符串的意義。?
分為四種情況來(lái)解釋：?
1.?移動(dòng)指令：Move Command（M）：M 起始點(diǎn)? 或者：m 起始點(diǎn)?
比如：M 100,240或m 100,240?
使用大寫(xiě)M時(shí)，表示絕對(duì)值; 使用小寫(xiě)m時(shí); 表示相對(duì)于前一點(diǎn)的值，如果前一點(diǎn)沒(méi)有指定，則使用(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)?
上面每種形狀后用括號(hào)括起的英文字母為命令簡(jiǎn)寫(xiě)的大寫(xiě)形式，但你也可以使用小寫(xiě)。使用大寫(xiě)與小寫(xiě)的區(qū)別是：大寫(xiě)是絕對(duì)值，小寫(xiě)是相對(duì)值。?
比如：L 100, 200 L 300,400表示從絕對(duì)坐標(biāo)點(diǎn)(100,200)到另一絕對(duì)坐標(biāo)點(diǎn)(300,400)的一條直線。而l 100, 200 l 300,400則表示相對(duì)上一點(diǎn)（如果未指定，則默認(rèn)為(0,0)坐標(biāo)點(diǎn)）開(kāi)始計(jì)算的坐標(biāo)點(diǎn)(100,200)到坐標(biāo)點(diǎn)為(300,400)的一條直線。?
當(dāng)我們重復(fù)使用同一種類(lèi)型時(shí)，就可以省略前面的命令。比如：L 100, 200 L 300,400簡(jiǎn)寫(xiě)為：L 100, 200 300,400。

SVG是一種矢量圖格式，是Scalable Vector Graphics三個(gè)單詞的首字母縮寫(xiě)。在xml文件中的標(biāo)簽是<vector>，畫(huà)出的圖形可以像一般的圖片資源使用，例子如下：

<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>

其所畫(huà)出的圖形為　　　

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

是不是很羨慕這些酷酷的圖形，當(dāng)然自己也可以去動(dòng)手去做。顯而易見(jiàn)，上面例子的重點(diǎn)是在PathData里面的那一大竄數(shù)字：

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"> 是聲明的畫(huà)布大小。

先慢慢學(xué)習(xí)一些基本的語(yǔ)法：

• M：move to 移動(dòng)繪制點(diǎn)，作用相當(dāng)于把畫(huà)筆落在哪一點(diǎn)。
• L：line to 直線，就是一條直線，注意，只是直線，直線是沒(méi)有寬度的，所以你什么也看不到。
• Z：close 閉合，嗯，就是把圖封閉起來(lái)。
• C：cubic bezier 三次貝塞爾曲線
• Q：quatratic bezier 二次貝塞爾曲線
• A：ellipse 圓弧

每個(gè)命令都有大小寫(xiě)形式，大寫(xiě)代表后面的參數(shù)是絕對(duì)坐標(biāo)，小寫(xiě)表示相對(duì)坐標(biāo)，相對(duì)于上一個(gè)點(diǎn)的位置。參數(shù)之間用空格或逗號(hào)隔開(kāi)。

命令詳解：

• M (x y) 把畫(huà)筆移動(dòng)到x,y，要準(zhǔn)備在這個(gè)地方畫(huà)圖了。
• L (x y) 直線連到x,y，還有簡(jiǎn)化命令H(x) 水平連接、V(y)垂直連接。僅僅是連起來(lái)，并不會(huì)像筆畫(huà)線一樣顯示圖形。
• Z，沒(méi)有參數(shù)，連接起點(diǎn)和終點(diǎn)
• C(x1 y1 x2 y2 x y)，控制點(diǎn)（x1,y1）（ x2,y2），終點(diǎn)x,y?。
• Q(x1 y1 x y)，控制點(diǎn)（x1,y1），終點(diǎn)x,y
• C和Q會(huì)在下文做簡(jiǎn)單對(duì)比。
• 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軸旋轉(zhuǎn)角度? large-arc-flag 為0時(shí)表示取小弧度，1時(shí)取大弧度?（舍取的時(shí)候，是要長(zhǎng)的還是短的） sweep-flag 0取逆時(shí)針?lè)较?#xff0c;1取順時(shí)針?lè)较?

L的用法：

android:pathData=" M10,0 L10,40 40,40" /> 把畫(huà)筆放在（10,0）位置，連線10，40點(diǎn) 在連線40，40點(diǎn)。。。于是，一個(gè)直角三角形出來(lái)了~這里沒(méi)有寫(xiě)z，沒(méi)什么關(guān)系。

?Q和C的對(duì)比：?

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

　
控制點(diǎn)1，30,90 ：?
控制點(diǎn)2，80,20??:?

C

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

現(xiàn)在修改第一個(gè)控制點(diǎn)：

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

a:

這么多 數(shù)字，怎么看啊，可以直接拉到下面看作用。

android:pathData=" M50,50 a10,5 0,1 0 1,0" /> 以50，50為起點(diǎn)，逆時(shí)針畫(huà) 橢圓圖形，x軸半徑10，y軸半徑5

?

轉(zhuǎn)動(dòng)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" />

出現(xiàn)上面的情況可以想到是因?yàn)?#xff0c;起始點(diǎn)50,50在橢圓中的位置不同。那么，再修改一下。

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

現(xiàn)在取小弧度看看，

android:pathData=" M50,50 a10,5 0 0 1 0 7" /> ，可以看到小弧度 順時(shí)針畫(huà)圖。

再修改為逆時(shí)針， 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軸半徑

第一個(gè)0 為 x軸旋轉(zhuǎn)角度

第二個(gè)0 為取大小弧度，0為小，1為大

第三個(gè)0 為順逆時(shí)針，0為逆1為順

第四個(gè) 7 為修改修改起始點(diǎn)在橢圓中的位置，該位置為起始點(diǎn)。

這是前輩留下的圖：

以上內(nèi)容部分來(lái)源于 網(wǎng)絡(luò)。本文不已盈利為目的，僅供大家學(xué)習(xí)參考。

總結(jié)

以上是生活随笔為你收集整理的Android vector Path Data画图详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。