HTML5 2d canvas 库 —— Fabric.js 和 Konva.js

一、背景

原生 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(富文本)
  • 后起之秀,周边生态还比较薄弱

猜你喜欢

转载自blog.csdn.net/qq_31851435/article/details/131479373