Snap.svg的可视化学习

794 阅读1分钟

最近公司有做人物画像的想法,东找找西找找,用了three、go.js、canvas等可视化。最后想通过svg来绘画,无意中看到张鑫旭的一个中文文档翻译:Snap

这里说一下为什么看好一点Snap

首先是animate的属性,Snap能够使用animate属性给某个或者几个图形添加动画。

这里说一下,很多canvas动画都是通过requestAnimationFrame这个属性来进行帧动画,每次对canvas进行清除画布,然后重新渲染一遍,也许有人会说局部重新渲染或者item的渲染,但是这样也会产生复杂的计算量,也许可以通过vue那样的双向数据绑定来实现数据检查,我之前写过一个sgraphy的canvas组件,使用的就是requestAnimationFrame动画。

svg优势

svg的点击操作你可以很快的获取到你点击的量,而canvas你需要比对鼠标位置信息,计算得出你的鼠标位置和item之间的距离,如果需要添加上缩放、放大操作更加复杂一些。

demo

这里给一个Snap的小demo