Canvas 2D图形操作：fabricjs/konvajs/pixijs对比总结
Author：zhoulujun Date：
canvas操作库
开源2d图形库——ZRender、fabric.js、 konva.js、 pixi.js 、leaflet.js 、 paper.js、 p5.js等等一大堆，看的眼花缭乱
Fabric.js、Konva.js和Pixi.js是用于在网页上创建2D图形的库，而Leaflet.js则是用于创建交互式地图的库。
fabric
fabric是一个强大的、简单易用的JavaScript HTML5 canvas库。fabric.js允许你创建并操作2D图形，如形状、文本、图像等，并提供了丰富的交互功能。
A simple and powerful Javascript HTML5 canvas library..
源码解析，有很多，比如：Fabric.js 原理与源码解析 https://zhuanlan.zhihu.com/p/380686514
konva
Konva是一个基于2d Context的canvas类库，可同时应用于pc和移动端。Konva对象模型和API体系简明易懂，包含常用形状、事件系统、变换及分层等功能。适用场景为应用系统。
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.。
https://konvajs.org/docs/sandbox/index.html
可以创建复杂的动画效果，如移动、旋转、缩放等。
支持事件监听，例如鼠标点击、拖拽、滑动等。
支持多种图形，包括矩形、圆形、多边形、线条等。
可以实现图形的分组、层级管理等。
支持图片缓存，可以在Canvas中快速的绘制图片。
具有高度的性能和优化，可以在大型项目中使用。
pixijs
一个快速的 2D渲染引擎，利用 Canvas WebGL API实现高性能的图形渲染。适用场景为游戏和动画。运行时硬件加速明显，CPU等使用率大幅飙升。
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer。
Pixi.js的设计目标是提高Web应用程序的渲染性能，它可以在不同的设备上实现流畅的动画效果，而且非常易于使用。 Pixi.js支持多种渲染器，包括WebGL、Canvas和SVG，可以根据不同的场景选择最适合的渲染器。它还提供了很多实用的功能，例如精灵、文本、遮罩、滤镜、动画等，可以帮助开发者轻松创建各种效果。 Pixi.js的API简单易用，文档详细，社区活跃，拥有大量的插件和扩展，可以满足各种需求。Pixi.js除了适用于游戏开发，还可以用于数据可视化、UI设计、广告制作等领域。
对比总结：
总体对比
| fabric.js | konva.js | pixi.js | |
|---|---|---|---|
| 简介 | Fabric.js是一个开源的JavaScript库，用于创建交互式的Canvas应用程序。 | Konva.js是一个HTML5 Canvas库，用于创建交互式的Canvas应用程序。 | Pixi.js是一个快速、轻量级的2D渲染引擎，可用于创建游戏、动画和交互式应用程序。 |
| github地址 | https://github.com/fabricjs/fabric.js | https://github.com/konvajs/konva | https://github.com/pixijs/pixijs |
| Star数量（统计于2023.5.23） | 24.9k | 9.3k | 40k |
| 更新频率 | 约3次/周 | 约1次/周 | 约3次/周 |
| Fork数量 | 3.3k | 809 | 4.8k |
| issue情况 | 253 open, 5425 closed, open率4.5% | 74 open, 1172 closed, open率5.9% | 134 open, 5038 closed,open率2.6% |
| 官方文档 | 英文文档 | 英文文档、中文文档 | 英文文档、中文文档 |
| 博客分享 | 较多 | 一般 | 一般 |
| Fork数量 | 3.3k | 809 | 4.8k |
| 参考案例 | ① vue-fabric-editor ② react-design-editor ③ 新版蓝湖 | polotno-studio | 暂无 |
| 编辑能力 | 编辑能力强，支持文本、图片、形状等多种图形元素的编辑，可以进行拖拽、缩放、旋转、变换等操作，还支持多种样式和效果。 | 编辑能力强，支持多种图形元素的编辑，可以进行拖拽、缩放、旋转、变换等操作，但在样式和效果方面略显不足。 | 编辑能力较好， 可以创建高性能的2D图形，具有丰富的渲染功能，可以进行高级的图形设计和编辑，但缺少拖拽、缩放等基础编辑功能。 |
| 性能及适用场景 | 性能一般，适用于开发小型应用。 | 性能较好，可以处理大量图形元素，适合开发复杂的应用。 | 性能优异，适用于大规模的用户界面和游戏开发，例如创建复杂的用户界面、2D游戏等。 |
| 学习及开发成本 | 常用功能封装齐全，可参考案例较多，上手和使用成本一般； 基于es5开发。可能会影响开发效率。 | 可直接参考的案例较少，暴露的api较少，学习成本较高； 对ts的支持比较高，架构设计更灵活，开发成本相对较低。 | 需要开发者具备一定的图形设计能力，学习成本较高。 |
图形库编辑能力对比
| fabric.js | konva.js | pixi.js | |
|---|---|---|---|
| 画布大小调整 | — | — | — |
| 画布缩放 | — | — | × |
| 拖动画布 | — | √ | × |
| 图形缩放 | √ | √ | — |
| 图形旋转 | √ | √ | — |
| 拖动图形 | √ | √ | — |
| 自动对齐 | — | — | — |
| 自动吸附 | — | — | × |
| 标尺 | — | — | × |
| 辅助线 | √ | — | × |
| 右键菜单 | — | — | — |
| 网格 | — | — | — |
Adobe支持的大家一致认定的Flash继承者的CreateJS，还有大材小用的动画引擎Pixi.js和Phaser.js。直到我看到Fabric.js的官网首页的演示，我就知道就是它了。它甚至还可以序列化和反序列化图形，这样就可以直接把图形转为JSON存储到数据库里！
Fabric.js ：如果需要创建交互性强的图形应用，如在线图像编辑器或绘图工具，是一个很好的选择。
Konva.js：如果需要处理大量图形和复杂动画，特别是在数据可视化和游戏开发中， 提供了出色的性能和灵活性。
Pixi.js ：如果项目需要极高的渲染性能和复杂的图形效果，特别适合游戏开发和高性能动画。
如果不是超复杂的游戏的话，我们就在Fabric.js和Konva.js里面选，他们社区相对较大，有较多的案例和插件可供参考和使用
konva碾压fabric
在文档方面，konva碾压fabric；konva提供详细的教程还有常见应用场景的Demo，文档类目清晰，对开发者非常友好；konva还提供与流行JS框架结合版本，比如react-konva与vue-konva，开箱即用，非常舒服。
Typescript支持
fabric使用原生JS开发，因为在 2010 年开搞的（ES6还悬着呢）
konva使用Typescript开发，原生支持TS
konva
Konva 有一定的嵌套结构，有些类似 DOM 结构。通过 add 和 remove 就能实现子节点的添加和删除。
Konva Tree
Konva Tree 主要包括这么几部分：
Stage 根节点：这是应用的根节点，会创建一个 div 节点，作为事件的接收层，根据事件触发时的坐标来分发出去。一个 Stage 节点可以包含多个 Layer 图层。
Layer 图层：Layer 里面会创建一个 Canvas 节点，主要作用就是绘制 Canvas 里面的元素。一个 Layer 可以包含多个 Group 和 Shape。比如我们可以把程序分为3个图层：
静态layer（存储不变数据，如坐标，背景图）
动态layer（存储变化数据，如汽车位置、大小）
鼠标移动事件的layer（鼠标移动时要触发的变化）
Group 组：Group 包含多个 Shape，如果对其进行变换和滤镜，里面所有的 Shape 都会生效。
Shape：指 Text、Rect、Circle 等图形，这些是 Konva 封装好的类。
参考文章：
史上最全Canvas 2D开源项目 https://zhuanlan.zhihu.com/p/672799338
Canvas库之争 fabric.js vs konva.js https://github.com/Richar-Dada/notes/issues/6
konva.js 原理与源码解析 https://zhuanlan.zhihu.com/p/594585333
Konva js笔记 https://zhuanlan.zhihu.com/p/165031795
转载本站文章《Canvas 2D图形操作：fabricjs/konvajs/pixijs对比总结》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/comprehensive/9234.html