可视化组件库对比
常用绘图引擎的性能对比网站：
https://benchmarks.slaylines.io/two.html
统计截止2021.11.07
| 名称 | 类型 | 版本 | 大小 | Canvas | SVG | WebGL | WebGL2 | WebGPU | TypeScript | 备注 |
|---|---|---|---|---|---|---|---|---|---|---|
| ZRender | 绘图引擎 | 5.0.4 | 203KB | √ | √ | × | √ | |||
| AntV/G | 绘图引擎 | 5.0.17 | √ | √ | √ | √ | √ | 用了Rust写GPU插件，程序结构很好，packages分得很细 | ||
| SpriteJS | 绘图引擎 | 3.6.0 | 449KB | √ | × | √ | √ | × | ||
| ECharts | 图表库 | 5.2.2 | 989KB | √ | √ | √ | √ | |||
| Chart.js | 图表库 | 3.7.1 | 192KB | √ | x | x | x | 程序设计很简洁，值得参考，可惜只支持Canvas | ||
| Vega | 图表库 | 5.21.0 | 490KB | × | ||||||
| D3.js | 计算库 | 7.1.1 | 269KB | √ | × | |||||
| Pixi.js | 绘图引擎 | 6.2.2 | 450KB | |||||||
| Fabric.js | ||||||||||
| Konva.js | ||||||||||
| Two.js | 绘图引擎 | 0.8.7 | 166KB | √ | √ | √ | × |
It all depends on your use case. What exactly do you want to draw?
- A game like canvas application with a lot of graphics, images, filters, etc? http://pixijs.com/ will do the work.
- Data visualizations or charts? Take https://d3js.org/
- CAD-like applications for drawing some shapes and image manipulations? Take https://konvajs.org/ or http://fabricjs.com/
There are many other similar libraries for every use case. If you are not sure - just make a small prototype with each framework. You will see what works better for you.
pixi做的游戏：
https://itch.io/games/made-with-pixijs
资料
(精)AntV/G的程序设计：
https://zhuanlan.zhihu.com/p/469977477
这个文章非常好，里面有很多的设计：canvas、group、shape的三层设计，节流设计，更新队列设计，裁剪设计，拾取的分组识别，以及树的设计，很值得参考。