007.SVG 动态绘制不规则图形.md

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 图片。然后自己调整配置就可以了，解放了前端同学的开发量。