还在用 Fabric.js 画 1 万个图形？你的页面可能撑不住了
一款让 10 万图形流畅渲染的国产 2D 引擎，到底凭什么？
一、先搞懂一个核心概念：什么是“分层渲染”？
要理解 LeaferJS 为什么快，首先要理解传统 Canvas 方案为什么慢。
传统 Canvas 的“笨办法”
假设你的画布上有 5000 个圆形。
现在用户拖动其中一个圆形，移动了 2 个像素。
传统 Canvas 库会这样做：
- 清空整个画布
- 重新绘制全部 5000 个圆形
是的——4999 个根本没动的图形也被重绘了。
这个成本随着图形数量线性增长。图形越多，越卡。当图形数量到 1 万时，即使是高性能设备也开始掉帧。
LeaferJS 的解决方案：分层渲染
LeaferJS 的思路很简单：把不同的东西放在不同的“层”里。
比如：
- 背景层：网格、底色（几乎永远不变）
- 静态层：装饰元素、辅助线（偶尔变化）
- 动态层：用户正在拖拽的图形（频繁变化）
- 临时层：选区框、吸附线（用完即消失）
拖拽一个图形时，只重绘“动态层”，其他层完全不动。
这就是分层渲染的核心思想：把变化隔离，让代价最小化。
用代码表示大概是这样的：
import { Leafer, Rect, Group } from 'leafer-ui'
const app = new Leafer({ view: '#canvas' })
// 背景层：画个网格，永远不变
const bgLayer = new Group()
bgLayer.add(createGrid())
app.add(bgLayer)
// 静态层：5000 个装饰图形，几乎不变
const staticLayer = new Group()
for (let i = 0; i < 5000; i++) {
staticLayer.add(createRandomShape())
}
app.add(staticLayer)
// 动态层：可拖拽的元素
const dynamicLayer = new Group()
const dragRect = new Rect({ x: 100, y: 100, width: 80, height: 80, fill: '#FF5722' })
dynamicLayer.add(dragRect)
app.add(dynamicLayer)
实际测试中，这种架构能让 1 万+ 图形 的场景依然保持 60fps。
二、除了分层，还有两个“隐藏技巧”
分层渲染是主干，但 LeaferJS 还有两个重要优化。
1. 脏矩形机制
分层解决了“重绘哪个层”的问题。
但一个层内部，也不应该全部重绘。
LeaferJS 会追踪哪些区域发生了变化（称为“脏矩形”），只重绘这些区域。
比如你移动了一个矩形，LeaferJS 会自动计算：
- 矩形的原位置（需要清除）
- 矩形的新位置（需要绘制）
两者合并成一个“脏矩形”，画布上其他地方完全不动。
这就像打扫房间时，只擦掉弄脏的那一块地板，而不是把整个房间拖一遍。
2. 智能缓存策略
有些图形很“重”：比如一个包含 100 个子元素的组合图形。
如果这个组合图形需要整体移动，LeaferJS 会把它临时渲染成一张“图片”，然后移动这张图片。
移动到位后，再恢复成可编辑的矢量图形。
这种“矢量 ↔ 位图”的动态转换，在大规模交互场景下非常有效。
三、上手体验：写代码的感觉怎么样？
坦白说，LeaferJS 的 API 设计和 Fabric.js 比较相似，学习曲线不陡。
一个完整可运行的交互示例：
import { Leafer, Rect, PointerEvent } from 'leafer-ui'
const app = new Leafer({ view: '#canvas', width: 800, height: 600 })
// 创建一个可拖拽的圆角矩形
const rect = new Rect({
x: 100,
y: 100,
width: 120,
height: 80,
fill: '#1890ff',
cornerRadius: 8,
draggable: true // 内置拖拽支持
})
// 点击时改变颜色
rect.on(PointerEvent.CLICK, () => {
rect.fill = '#52c41a'
})
app.add(rect)
如果你是第一次接触 Canvas 图形库，大概需要 1-2 天熟悉概念。
如果你用过 Fabric.js 或 Konva，半天就能上手。
四、什么时候该用它？什么时候不适合？
✅ 推荐使用
| 场景 | 说明 |
|---|---|
| 在线海报/PPT 设计器 | 复杂模板、多图层场景 |
| 数据可视化大屏 | 节点上千的拓扑图、流程图 |
| 在线白板 / 思维导图 | 大量可拖拽元素 |
| H5 营销互动页 | 高性能动画需求 |
❌ 不推荐使用
| 场景 | 替代方案 |
|---|---|
| 简单的图表展示 | ECharts、Chart.js（更省事） |
| 3D 场景 | Three.js（术业有专攻） |
| 重度文字编辑 | ProseMirror、Slate（专业编辑器） |
| SVG 原生导出依赖 | 等待 LeaferJS 导出能力完善 |
五、和主流方案的横向对比
| 维度 | Fabric.js | Konva | PixiJS | LeaferJS |
|---|---|---|---|---|
| 定位 | 图形编辑器 | 图形绘制 | 游戏渲染 | 设计工具 |
| 1 万+ 图形性能 | 一般 | 一般 | 优秀 | 优秀 |
| 包体积 (gzip) | 180KB | 120KB | 200KB | 66KB |
| 内置编辑能力 | 强 | 中 | 弱 | 中强 |
| 中文文档 | ❌ | ❌ | ❌ | ✅ |
| 学习门槛 | 中等 | 低 | 较高 | 中等 |
一句话总结：
LeaferJS 在“图形编辑能力”和“渲染性能”之间找到了一个不错的平衡点，同时包体积最小。
六、一些你可能想问的问题
Q：生产环境可用吗？
A：目前版本 v1.x，已有多个商业项目使用（官方社区有案例展示）。功能没有 Fabric.js 那么全面，但核心渲染性能已得到验证。
Q：和 Canvas 原生 API 比，性能损耗大吗？
A：LeaferJS 底层仍然是 Canvas 2D API，但通过分层、脏矩形等策略，整体性能远高于手写原生但缺乏优化的代码。
Q：有中文社区吗？
A：有。官方提供钉钉/微信群，响应速度比国外库快很多。
Q：商业项目需要付费吗？
A：MIT 协议，免费商用。
写在最后
作为开发者，我们总是面临各种技术选型。LeaferJS 不一定是最好的，但它在“国产”、“高性能”、“图形编辑”这个交叉领域，提供了一个很有竞争力的选项。
如果你正在做类似的海报设计器、白板、拓扑图等产品，不妨给它一个机会。
互动时间
你在开发中遇到过 Canvas 性能问题吗？
是用什么方案解决的？欢迎在评论区分享你的经验。
如果觉得这篇文章有帮助，点赞、转发就是对我最大的支持。
