pathdataandroid

❶ Android SVG的pathData詳解

上上篇講到SVG的動畫.但是沒詳細講到pathData裡面的詳細路徑.

比如下面這個圖形

看到這里pathData里的數據，顯而易見，我把圖的每渣毀個畫圖步驟換行分解了。
pathData 的指令基本都是由字母跟若干數字組成，數字之間可以用空格或者逗號隔開 (其實逗號會被忽略掉，加上逗號只是一些習慣的問題，方便查看)。一般來說指令字母分為大小寫兩種,大寫的字母是基於原點的坐標系(偏移量)，即絕對位置；小寫字母是基於當前點坐標系(偏移量)，即相對位置。

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
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)

移動
M x,y ； (m dx, dy) 移動虛擬畫筆到對應的點，如耐備但是並不繪制。一開始的時候默認是在(0,0)。

比如現在，M22,16，就是將開始點畝碼定位到(22,16)這里。

直線
L x,y (l dx, dy) 從當前點劃一條直線到對應的點。
H x (h dx) 從當前點繪制水平線，相當於l x,0
V y (v dy) 從當前點繪制垂直線，相當於l 0,y

現在，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是終點位置。所以基於相對位置。可以計算出控制點1的絕對位置。
即是(22,2.9),控制點2是(21.1, 2),終點是(20,2)

終點和起點連接起來也就成為這個圖。
同理剩下的也就可以形成正方形圓角

由於我們畫正方形的時候是逆時針來畫，如果這個山形也是逆時針來畫的話，也就重疊看不見了。所以要順時針來畫山形。在此基礎上加上m-11,-4 l2.03,2.71 L16,11 l4,5 H8 l3,-4z 也就可以看見了。

剩下的那個圖形也就非常簡單了。

這裡面沒講到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軸旋轉角度
large-arc-flag 為0時表示取小弧度，1時取大弧度（要長的還是短的）
sweep-flag 0取逆時針方向，1取順時針方向
x,y (dx,dy) 終點的位置

以50，50為起點，逆時針畫
橢圓圖形，x軸半徑10，y軸半徑5

轉動x軸~~~

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

現在取小弧度看看

再修改為逆時針，

橢圓的屬性 差不多講解完成了，如下
android:pathData=" M50,50 a10,5 0 0 0 0 7" />
10，5 為橢圓x，y軸半徑
第一個0 為 x軸旋轉角度
第二個0 為取大小弧度，0為小，1為大
第三個0 為順逆時針，0為逆1為順
第四個0 為修改起始點在橢圓中的位置，y軸.
第五個 7 為修改起始點在橢圓中的位置，x軸。
這是前輩留下的圖：

❷ Android 製作逐漸顯示動畫(描邊動畫、矢量動畫VectorDrawble)

Android 系統從5.0開始支持矢量圖，可以通過 Android Studio自帶的 Vector Assert 工具將SVG、PSD 轉成VectorDrawble。

轉化好的VectorDrawblew看起來好像挺復雜，是不是完全看不懂。沒關系，只要轉化的圖形沒有問題，你不用關心其內部數據。

我們直接進入矢量動畫部分。

矢量動畫的實現通過在xml定義<animated-vector>標簽（其對應的Java對象是AnimatedVectorDrawable）實現，如下所示：

可以看到<animated-vector>標簽是主要元素是target，它其實就起到一個橋梁作用，將動畫和VectorDraw中的圖形聯系起來。

比如target1，它將屬性動畫splash_animator_draw和vectorDrawble對象中name等於line1的對象聯系起來，即：動畫將生效在line1對象上。

之前展示了由svg圖片通過Android Studio Vector Assert工具轉換過來的VectorDrawble，裡面的實際上svg畫圖語法，<path>標簽里的pathData包含了畫圖的路徑(坐標)和語法

在實際使用過程中有幾率遇到這樣兩個問題(筆者都遇到過)：

其實以上兩個問題都要求你掌握進階知識，svg畫圖語法。

官方svg語法解析： https://www.w3.org/TR/SVG/paths.html
不喜歡看英文，去這篇博客： http://www.jianshu.com/p/a3cb1e23c2c4

對於Android程序員，Lottie的動畫使用很簡單，步驟如下：

1.接入Lottie

從動畫實現上來說，Lottie動畫應該是最簡單的方法了。

Lottie的優點很明顯：

Lottie的缺點：

好了，如果覺得本文對你有幫助，請關注、留言、點贊我，謝謝！

❸ android圖片系列 (2) - 靜態 SVG 圖片

SVG 圖片是一種可支持任意縮放的圖片格式，使用 xml 定義，使用 canvas 中 path 路徑來完成繪制，和我們傳統使用的 BitMap點陣圖有很大的區別。

SVG 在前端早就普及了，在android 中是 google 是在5.0之後開始支穗埋持的，14年出來之後兼容是個大問題，隨著2016.2 V7包 23.2.0版本的發布才算是有個相對完善的兼容使用方案。

SVG 的概念我就不寫了，拿來主義啦，原文： Android Vector曲折的兼容之路

不瞎逼逼，我們先來看一看 android 中的 SVG 矢量圖是個什麼東東

看到沒有，這就是一個 SVG 矢量圖片，就是一個 xml 文件，右邊是預覽，先說下，這東西的好處：縮放不失真，體積小。這一個 SVG 圖片只有970個位元組...強大吧，比 png 格式的圖片強的沒邊了吧，png 我們還得適配，做多套，然後一個一個改名字復制到工程里，有了 SVG 媽媽再也不擔心我們寫作業啦...

這里需要解釋下這里的幾個標簽：

這里有一分詳細的屬性說明：

好了下面開始介紹 SVG 啦

首先，需要講解兩個概念——SVG和Vector。

SVG，即Scalable Vector Graphics 矢量圖，這種圖像格式在前端中已經使用的非常廣泛了

Vector，在Android中指的是Vector Drawable，也就是Android中的矢量圖

因此，可以說Vector就是Android中的SVG實現猜顫螞，因為Android中的Vector並不是支持全部的SVG語法，也沒有必要，因為完整的SVG語法是非常復雜的，但已經支持的SVG語法已經夠用了，特別是Path語法，幾乎是Android中Vector的標配

Android以一種簡化的方式對SVG進行了兼容，這種方式就是通過使用它的Path標簽，通過Path標簽，幾洞消乎可以實現SVG中的其它所有標簽，雖然可能會復雜一點，但這些東西都是可以通過工具來完成的，所以，不用擔心寫起來會很復雜。

Path指令解析如下所示：

支持的指令：

M = moveto(M X,Y) ：將畫筆移動到指定的坐標位置
L = lineto(L X,Y) ：畫直線到指定的坐標位置
H = horizontal lineto(H X)：畫水平線到指定的X坐標位置
V = vertical lineto(V Y)：畫垂直線到指定的Y坐標位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次貝賽曲線
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次貝賽曲線
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
Z = closepath()：關閉路徑

坐標軸為以(0,0)為中心，X軸水平向右，Y軸水平向下
所有指令大小寫均可。大寫絕對定位，參照全局坐標系；小寫相對定位，參照父容器坐標系
指令和數據間的空格可以省略
同一指令出現多次可以只用一個
注意，』M』處理時，只是移動了畫筆， 沒有畫任何東西。 它也可以在後面給出上同時繪制不連續線。
關於這些語法，開發者需要的並不是全部精通，而是能夠看懂即可，其它的都可以交給工具來實現。

這里有一篇 Android vector標簽 PathData 畫圖超詳解 詳細描述了 SVG 中 path 的繪制

好了概念性的東西說完了，我們來看看

SVG 的使用分2種，一種是靜態 SVG 矢量圖，就是本文的主角，本章節主要談論的東西，另一種是 SVG 矢量動畫，是SVG 的高級應用，是給靜態 SVG 加上objectAnimator 動畫，應用的很廣泛，是實現 android icon 動態交互的核心做法。

上面的SVG 圖大家都看到了，我們就是寫一個 xml 的文件，裡面承載的標簽都是描述如何繪制我們想要的圖案的，畫布大小，顏色，路徑等，然後交給系統去繪制。

現在讓我們來看看 SVG 在 andorid 中如何應用，如何兼容5.0以下版本。

SVG 雖然早早就在前端使用了，但是 android 上開始支持 SVG 的使用還是從5.0開始的，在5.0以上系統的使用很簡單，和之前一樣使用 PNG 圖片一樣

首先 android 中的 SVG 圖片的承載方式是一個 xml 文件，所以UI 給我們的 SVG 圖片是不能直接使用的，這里 google 給我們提供載入方式

Android studio 在 2.3.3 的版本中可以直接使用 svg，新建一個 SVGDemo項目，新建 Vector Asset 文件：app-> main -> New -> Vector Asset 如圖所示：

我們選擇 Local File 就是選擇本地svg文件進行導入，對文件命名後點擊 Next ->Finish 在 drawable目錄 下就添加了一個.xml的文件

好了這樣一個 svg 圖片我們算是加入到我們的工程里里了，可以直接使用了。當然在此之前我們把 SVG 圖片放在那個 drawable 文件夾呢。對於這個問題就要說一下了：

有一點需要解釋一下，svg 矢量圖文件我們放在drawable 根目錄即可。android 系統不會根據你把 svg 矢量圖存放在不同的 drawable 文件夾，對圖片進行解析度上的縮放，因此我們不用像使用 PNG 圖片時准備多套圖片了。我們導入 SVG 圖片默認存放的地址就是 drawable根目錄，所以我們就放這里就好了，當然也可以自己寫SVG 圖片，都是 xml 的，自己寫完 path 路徑後都是可以查看預覽的，一般也不會自己寫，都是UI 的活。

這樣就 ok啦，5.0以上的系統SVG你就像一般 png 圖片一樣使用就好啦，你可以試一下。

SVG 在 4.x 版本上的兼容根據 SVG 使用范圍的變化，配置也是逐步增加的

這時 imageview 就不行了，我們需要使用 AppCompatActivity 或是 AppCompatImageView，這時我們需要導入 V7 包

gradle 需要如下配置：

系統會在 4.x 版本時對 SVG 自動生成相應的 drawable 圖，此時 SVG 是沒有無限拉伸特性的，gradle 的配置目的是去這個

舉個例子：

資源設置不能用 src 了，必須使用 srcCompat ，這時我們能看到圖而不是去 SVG 的特性了

這時上面的設置就不夠了，我們在 view 所在的 activity 或是全局添加下面的設置

然後這還不夠，我們必須給 SVG 圖片添加一個容器，比如 selector，這樣我們才能正常使用，比如給 textview 設置圖片，自定義屬性設置圖片

這個 vc_halfstart_24dp 就是 SVG 圖片

這個我們必須要添加官方的 vectorDrawable 支持庫了，最低支持到 23.2.0

這樣基本就沒啥問題了

SVG 配合自定義 view 的話，就得我們讀取 SVG 然後轉換成 path 路徑來畫了，SVG 實質上也是 xml 文件，所以解析 xml 文件的思路也使用，當然還有其他一些 SVG 轉 path 的思路

SVG前戲—讓你的View多姿多彩 一文中提供了一些思路，大家不妨去看看

❹ pathdata android怎麼生成

1.Eclipse下App放置在項目根目錄的bin目錄中 2.而Android studio大改後，放在了mole中，所以你一定要記得你的存放路徑。也就是工程對應的文件夾。 android studio工程的族態存儲路徑下app/build/outputs/apk 其中app是你的mole，襪稿在對應的兆好源mole下即可找到