SVG動態繪製不規則圖形

做者簡介 wuyue 螞蟻金服·數據體驗技術團隊

在瀏覽器中，任意的二維平面圖形都可以經過path路徑的形式描述。而後底層api 直接靜態繪製出來。可是若是想動態的繪製路徑，瀏覽器是沒有直接支持方式的。 本文就是解決這個問題， 爲瀏覽器補全這個功能，讓靜態的路徑能方便的動態繪製。

最終效果

先看下最終實現的效果吧~

芯片描繪：

人臉掃描：

人工書寫：

效果仍是挺酷炫的，實現的整個開發過程就從接需求開始講起吧。

需求

某一天設計同窗發過來一些圖片，說但願能動起來，還原真實場景，真的像寫字， 人臉掃描，電路的感受？？

與設計同窗討論了n多姿式：

• 淡入淡出
• 粒子效果，碎裂組合
• 有小變大，花式旋轉，變形
• ...

可是設計同窗堅持本身的姿式，就是要還原真實場景，就是要掃描！

因而我就只能：

好了再也不扯淡了，迴歸正題~

就瀏覽器動態繪製想到了如下兩個方案：

方案一

瀏覽器雖然沒有提供動態繪製的方法，可是svg提供了一個比較重要的屬性stroke，中文稱之爲描邊。最開始想的是用stroke-dasharray設置虛線描邊，而後用animation改變stroke-dashoffset來繪製動態的文案。這樣子能夠實現動態繪製的效果。可是有如下幾點不足。

• 每條path都得寫css的動畫來控制。
• 繪製過程單一，只能用瀏覽器提供的幾個動畫的算法，無法本身控制繪製過程
• 後續再有這樣的需求，前端都須要大量開發

基於上面幾點，放棄了這個方案。

方案二

咱們能不能本身控制svg的繪製過程，實現他的動態繪製呢？好像...是能夠的！！

分析svg

首先要先分析svg。不規則圖形都是能夠經過ps的鋼筆工具摳圖，而後導出到AI裏面就能夠獲取到該圖形的path信息。 或者直接讓設計同窗提供svg格式的圖片。 最終咱們能夠獲取到該圖形的path信息， 舉例以下：

上圖是我截取的 人臉的svg 格式，經過分析裏面格式能夠看出，有幾個關鍵信息：

• 佈局信息 ， viewBox裏面能夠認爲是原始大小。
• style 部分是樣式， 來控制線條的粗細，顏色等。
• 第三個紅框部分是 路徑信息， 這裏是有固定格式的， 具體可參考這裏https://developer.mozilla.org/en-US/docs/Web/SVG

最終咱們能夠將上述信息轉化以下形式的指令，方便後續代碼解析。

命令解析

問題明確了，就是拆分path指令。把每條命令都解析出來， 而後依據每條指令算點，按對應樣式描線。具體流程以下：

解析指令部分的關鍵代碼以下：

思路是窮舉全部的分隔符，而後對每一個分隔符，實現解析部分。窮舉的分隔符以下：

指令繪製

而後就是每條指令的執行部分代碼：

最終對於每條指令，歸結到 是畫直線， 仍是畫曲線， 根據對應的曲線方程，算出對應的點， 而後就是動態的把點連起來，不停地畫線段，最終大量的微小線段組合成複雜圖形。 核心代碼以下：

描點連線作動畫部分：

而後就作到了本文開頭的效果了~

總結

對於複雜圖形， 咱們先經過各類手段獲取其路徑信息。而後把路徑信息分拆爲各條微小指令， 針對每條指令，去實現動畫。經過描點連線的形式實現，最終全部的點連城線，大量的線組合起來就動態繪製出了複雜圖形。

並且咱們能夠將繪製的速度等開放成配置提供給設計同窗，再有這樣的需求，設計同窗只須要提供擁有路徑的svg圖片。而後本身調整配置就能夠了，解放了前端同窗的開發量。

感興趣的同窗能夠關注專欄或者發送簡歷至'wuyue.lwy####alibaba-inc.com'.replace('####', '@')，歡迎有志之士加入~

原文連接：github.com/ProtoTeam/b…