高級UI特效—用SVG碼造一個精美的中國地圖

前言

來繼續學習SVG，要想深刻了解仍是要多動手進行實戰。關於svg基礎能夠去看一下個人上一篇文章《SVG前戲—讓你的View多姿多彩》,今天就用SVG打造一個精美的UI效果。

正文

先上效果圖：

咱們都知道SVG的文件是純粹的 XML。如：

[圖片上傳中...(12345.gif-60d52c-1533723732988-0)]

看到這裏，咱們都明白了。原來裏面相似以path的數據進行組裝的。只須要進行解析xml就能夠了。

解析關鍵代碼：

關鍵點：仍是在於UI繪製的時候，把解析到的數據進行分片繪製。這裏用是path和region互相結合的一個算法。另外剛開始解析數據的時候，我開起了線程池進行繪製刷新的。詳細可參考demo！

路徑的路徑描述指令含義表：

• M = moveto 至關於 android Path 裏的moveTo(),用於移動起始點
• L = lineto 至關於 android Path 裏的lineTo()，用於畫線
• H = horizontal lineto 用於畫水平線
• V = vertical lineto 用於畫豎直線
• C = curveto 至關於cubicTo(),三次貝塞爾曲線
• S = smooth curveto 一樣三次貝塞爾曲線，更平滑
• Q = quadratic Belzier curve quadTo()，二次貝塞爾曲線
• T = smooth quadratic Belzier curveto 一樣二次貝塞爾曲線，更平滑
• A = elliptical Arc 至關於arcTo()，用於畫弧
• Z = closepath 至關於closeTo(),關閉path

大寫表明絕對位置, 小寫表明相對位置。

SVG裏面還有各類標籤：

包括line直線，circle圓，rect矩形，eliipse橢圓，polygon多邊形，等等 這些只要咱們又一個SVG文件，均可以將其轉換成java代碼

地圖項目地址：

https://github.com/androidstarjack/MySvgYuyahaoDrawChinaMap

備註：該demo僅爲學習Android提供思路用，我很愛國的！

閱讀更多

終於，我仍是下決心學Java後臺了

談一下Application和Context

金9銀10的面試黃金季節，分享幾個重要的面試題

談一下Application和Context

總結

做爲一個程序員，咱們固然不能手動去作這個工做，那就涉及兩個問題，一個是SVG的解析，一個是解析後的繪製。雖然有人已經完成了這個工做，但我以爲仍是本身動手敲一遍爲好！任什麼時候候不要太過於依賴第三方的。

相信本身，沒有作不到的，只有想不到的

歡迎關注我公衆號：終端研發部，在這裏得到的不單單是技術！