Android vector标签 PathData 画图超详解
Android vector標(biāo)簽 PathData 畫圖超詳解
SVG是一種矢量圖格式，是Scalable Vector Graphics三個(gè)單詞的首字母縮寫。在xml文件中的標(biāo)簽是<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>其所畫出的圖形為
于此同時(shí)，android studio提供了豐富的圖片資源，可以右鍵module,new->vector asset選擇，如下：
是不是很羨慕這些酷酷的圖形，當(dāng)然自己也可以去動(dòng)手去做。顯而易見，上面例子的重點(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文件中：?
共有三個(gè)標(biāo)簽，下面就是<path>部分：
先慢慢學(xué)習(xí)一些基本的語法：
- M：move to 移動(dòng)繪制點(diǎn)，作用相當(dāng)于把畫筆落在哪一點(diǎn)。
- L：line to 直線，就是一條直線，注意，只是直線，直線是沒有寬度的，所以你什么也看不到。 android:strokeColor="#333330" android:strokeWidth="10" 設(shè)置顏色和線寬
- Z：close 閉合，嗯，就是把圖封閉起來。
- C：cubic bezier 三次貝塞爾曲線
- Q：quatratic bezier 二次貝塞爾曲線
- A：ellipse 圓弧
每個(gè)命令都有大小寫形式，大寫代表后面的參數(shù)是絕對(duì)坐標(biāo)，小寫表示相對(duì)坐標(biāo)，相對(duì)于上一個(gè)點(diǎn)的位置。參數(shù)之間用空格或逗號(hào)隔開。
命令詳解：
- M (x y) 把畫筆移動(dòng)到x,y，要準(zhǔn)備在這個(gè)地方畫圖了。
- L (x y) 直線連到x,y，還有簡化命令H(x) 水平連接、V(y)垂直連接。
- Z，沒有參數(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ì)在下文做簡單對(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í)候，是要長的還是短的）
sweep-flag 0取逆時(shí)針方向，1取順時(shí)針方向?
?
L的用法：
android:pathData=" M10,0 L10,40 40,40" />把畫筆放在（10,0）位置，連線10，40點(diǎn) 在連線40，40點(diǎn)。。。于是，一個(gè)直角三角形出來了~這里沒有寫z，沒什么關(guān)系。
?Q和C的對(duì)比： 詳細(xì)了解貝塞爾曲線：
http://blog.csdn.net/android_mnbvcxz/article/details/78932860
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í)針畫 橢圓圖形，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í)針畫圖。再修改為逆時(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è)0 ?為修改修改起始點(diǎn)在橢圓中的位置，y軸.
第四個(gè) 7 為修改修改起始點(diǎn)在橢圓中的位置，x軸。
這是前輩留下的圖：
<path>里面還有哪些屬性那？
- android:name 定義該 path 的名字，這樣在其他地方可以通過名字來引用這個(gè)路徑
- android:pathData 和 SVG 中 d 元素一樣的路徑信息。
- android:fillColor 定義填充路徑的顏色，如果沒有定義則不填充路徑
- android:strokeColor 定義如何繪制路徑邊框，如果沒有定義則不顯示邊框
- android:strokeWidth 定義路徑邊框的粗細(xì)尺寸
- android:strokeAlpha 定義路徑邊框的透明度
- android:fillAlpha 定義填充路徑顏色的透明度
- android:trimPathStart 從路徑起始位置截?cái)嗦窂降谋嚷?#xff0c;取值范圍從 0 到1
- android:trimPathEnd 從路徑結(jié)束位置截?cái)嗦窂降谋嚷?#xff0c;取值范圍從 0 到1
- android:trimPathOffset 設(shè)置路徑截取的范圍 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.
- android:strokeLineCap 設(shè)置路徑線帽的形狀，取值為 butt, round, square.
- android:strokeLineJoin 設(shè)置路徑交界處的連接方式，取值為 miter,round,bevel.
- android:strokeMiterLimit 設(shè)置斜角的上限，Sets the Miter limit for a stroked path.
下面詳細(xì)講一下?android:strokeLineCap?，android:strokeLineJoin 兩個(gè)屬性
android:pathData="M200,200 l100,300M300,200 l-100,300
再?zèng)]有添加這兩條屬性前：
?
添加語句：android:strokeLineCap="round"?后可以看到有三個(gè)點(diǎn)改變了格式（左下角是圖形結(jié)束點(diǎn)，并沒有改變）
最后添加：android:strokeLineJoin="round"?左下角也做了改變，如下
這xml開始部分的代碼是做什么的那？?
<vector?xmlns:android="http://schemas.android.com/apk/res/android"
??? android:width="24dp"
??? android:height="24dp"
??? android:viewportHeight="24.0"
??? android:viewportWidth="24.0">
先看看有哪些屬性，
- android:name 定義該drawable的名字
- android:width 定義該 drawable 的內(nèi)部(intrinsic)寬度,支持所有 Android 系統(tǒng)支持的尺寸，通常使用 dp
- android:height 定義該 drawable 的內(nèi)部(intrinsic)高度,支持所有 Android 系統(tǒng)支持的尺寸，通常使用 dp
- android:viewportWidth 定義矢量圖視圖的寬度，視圖就是矢量圖 path 路徑數(shù)據(jù)所繪制的虛擬畫布
- android:viewportHeight 定義矢量圖視圖的高度，視圖就是矢量圖 path 路徑數(shù)據(jù)所繪制的虛擬畫布
- android:tint 定義該 drawable 的 tint 顏色。默認(rèn)是沒有 tint 顏色的
- android:tintMode 定義 tint 顏色的?Porter-Duff blending?模式，默認(rèn)值為 src_in
- android:autoMirrored 設(shè)置當(dāng)系統(tǒng)為 RTL (right-to-left) 布局的時(shí)候，是否自動(dòng)鏡像該圖片。比如 阿拉伯語。
- android:alpha 該圖片的透明度屬性
<group>里面可以定義多了<path>，這樣可以方便管理多個(gè)<path>
- android:name 定義 group 的名字
- android:rotation 定義該 group 的路徑旋轉(zhuǎn)多少度，這樣圖片就被旋轉(zhuǎn)了，注意寫數(shù)字的時(shí)候別暈了。
- android:pivotX 定義縮放和旋轉(zhuǎn)該 group 時(shí)候的 X 參考點(diǎn)。該值相對(duì)于 vector 的 viewport 值來指定的。
- android:pivotY 定義縮放和旋轉(zhuǎn)該 group 時(shí)候的 Y 參考點(diǎn)。該值相對(duì)于 vector 的 viewport 值來指定的。
- android:scaleX 定義 X 軸的縮放倍數(shù)
- android:scaleY 定義 Y 軸的縮放倍數(shù)
- android:translateX 定義移動(dòng) X 軸的位移。相對(duì)于 vector 的 viewport 值來指定的。
- android:translateY 定義移動(dòng) Y 軸的位移。相對(duì)于 vector 的 viewport 值來指定的。
<clip-path>定義當(dāng)前繪制的剪切路徑，就是圖像的一部分剪切下來。注意，clip-path 只對(duì)當(dāng)前的 group 和子 group 有效。
<clip-path android:pathData="M200,200 h200 v150 h-200 v-150" />
原圖為上面的 叉 ，剪切后為：
終，下次為動(dòng)畫的制作。有部分是前人的功勞~銘記。
總結(jié)
以上是生活随笔為你收集整理的Android vector标签 PathData 画图超详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 贝塞尔曲线初探
- 下一篇： Android混淆解析