一、背景
原生 canvas 的操作主要基于上下文,需要使用者自己从0开始去实现一些基本功能,比较复杂。而 canvas 库文件则封装好了许多便利的对象,使得用户可以在比较高级的层面上进行绘制。
二、官网
Fabric.js 官网:Fabric.js Javascript Canvas Library
Konva.js 官网:Konva 中文文档 中文API
三、区别
1、Fabric.js
优点:
- 比较老牌,常用的转换(放大、缩小、拖拽)都已经封装好了,特别适合用 Canvas 写交互性的界面
- 内置了丰富的笔刷,基本的对齐、标线都有了
- 代码集成度比较高,内置了可交互富文本(纯 Canvas 实现)
缺点:
- 代码使用 ES 5开发,不能很好的支持 TypeScript,开发效率可能会有影响
- 由于库本身集成了很多功能点,代码包的大小偏大(压缩后308 kB)
- 细节功能还需要完善,比如标线系统实现相对简单
2、Konva.js
优点:
- 支持桌面/移动端事件
- 控制点的自定义样式和事件可以轻松实现
- 使用 TypeScript 编写,TS 原生支持
- 渲染分层比较清晰,Stage -> Layer -> Group -> Shape
- 代码简洁、干净,易于阅读
- 核心代码精七,代码包较小(压缩后155 kB)
缺点:
- 部分功能实现基于 DOM(富文本)
- 后起之秀,周边生态还比较薄弱