SVG动态绘制不规则图形

SVG动态绘制不规则图形
数据体验技术团队 @ 蚂蚁金服(杭州)网络技术有限公司

作者简介 wuyue 蚂蚁金服·数据体验技术团队

在浏览器中,任意的二维平面图形均可以通过path路径的形式描述。然后底层api 直接静态绘制出来。但是如果想动态的绘制路径,浏览器是没有直接支持方式的。 本文就是解决这个问题, 为浏览器补全这个功能,让静态的路径能方便的动态绘制。

最终效果

先看下最终实现的效果吧~

芯片描绘:

人脸扫描:

人工书写:

效果还是挺酷炫的,实现的整个开发过程就从接需求开始讲起吧。

需求

某一天设计同学发过来一些图片,说希望能动起来,还原真实场景,真的像写字, 人脸扫描,电路的感觉??

与设计同学讨论了n多姿势:

  • 淡入淡出
  • 粒子效果,碎裂组合
  • 有小变大,花式旋转,变形
  • ...

但是设计同学坚持自己的姿势,就是要还原真实场景,就是要扫描!

于是我就只能:

好了不再扯淡了,回归正题~

就浏览器动态绘制想到了以下两个方案:

方案一

浏览器虽然没有提供动态绘制的方法,但是svg提供了一个比较重要的属性stroke,中文称之为描边。最开始想的是用stroke-dasharray设置虚线描边,然后用animation改变stroke-dashoffset来绘制动态的文案。这样子可以实现动态绘制的效果。但是有以下几点不足。

  • 每条path都得写css的动画来控制。
  • 绘制过程单一,只能用浏览器提供的几个动画的算法,没法自己控制绘制过程
  • 后续再有这样的需求,前端都需要大量开发

基于上面几点,放弃了这个方案。

方案二

我们能不能自己控制svg的绘制过程,实现他的动态绘制呢?好像...是可以的!!

分析svg

首先要先分析svg。不规则图形都是可以通过ps的钢笔工具抠图,然后导出到AI里面就可以获取到该图形的path信息。 或者直接让设计同学提供svg格式的图片。 最终我们可以获取到该图形的path信息, 举例如下:

svg.png

上图是我截取的 人脸的svg 格式,通过分析里面格式可以看出,有几个关键信息:

  • 布局信息 , viewBox里面可以认为是原始大小。
  • style 部分是样式, 来控制线条的粗细,颜色等。
  • 第三个红框部分是 路径信息, 这里是有固定格式的, 具体可参考这里https://developer.mozilla.org/en-US/docs/Web/SVG

最终我们可以将上述信息转化如下形式的指令,方便后续代码解析。

path.png

命令解析

问题明确了,就是拆分path指令。把每条命令都解析出来, 然后依据每条指令算点,按对应样式描线。具体流程如下:

step.png

解析指令部分的关键代码如下:

parse.png

思路是穷举所有的分隔符,然后对每个分隔符,实现解析部分。穷举的分隔符如下:

order.png

指令绘制

然后就是每条指令的执行部分代码:

line.png
C.png

最终对于每条指令,归结到 是画直线, 还是画曲线, 根据对应的曲线方程,算出对应的点, 然后就是动态的把点连起来,不停地画线段,最终大量的微小线段组合成复杂图形。 核心代码如下:

lineTo.png
draw.png

描点连线做动画部分:

animate.png

然后就做到了本文开头的效果了~

总结

对于复杂图形, 我们先通过各种手段获取其路径信息。然后把路径信息分拆为各条微小指令, 针对每条指令,去实现动画。通过描点连线的形式实现,最终所有的点连城线,大量的线组合起来就动态绘制出了复杂图形。

而且我们可以将绘制的速度等开放成配置提供给设计同学,再有这样的需求,设计同学只需要提供拥有路径的svg图片。然后自己调整配置就可以了,解放了前端同学的开发量。

感兴趣的同学可以关注专栏或者发送简历至'wuyue.lwy####alibaba-inc.com'.replace('####', '@'),欢迎有志之士加入~

原文链接:github.com/ProtoTeam/b…

分类:
前端
收藏成功!
已添加到「」, 点击更改