LeaferJS 简介

LeaferJS 是一款免费开源（MIT）的 HTML5 Canvas 2D 图形渲染引擎，定位是「AI 时代的无限画布引擎」。它主打易学易用、性能强悍，可以用来做高效绘图、UI 交互和图形编辑器（Figma 级编辑器内核）。

核心特点

性能强：官方宣称可在 2K 屏笔记本 / Chrome 上约 1.28 秒创建 100 万个交互矩形，内存约 320MB。
体积小、零依赖：leafer-ui v2.x 约 70KB min+gzip，无第三方依赖。
跨平台：支持 Web、Web Worker（解放主线程）、Node.js（服务端生成图片）、微信小程序。
场景树管理：可嵌套 Group、Frame、Box 等容器元素，类似 DOM 的层级组织方式。
渲染层可插拔：核心逻辑与渲染实现解耦，未来可适配 WebGL / WebGPU / Skia。
局部渲染 + 事件拾取优化：只重绘脏区域，事件拾取相比 Konva 的色值法做了优化。
编辑器能力开箱即用：旋转、缩放、多选、框选、打组、标尺、吸附、视窗控制、滚动条、文字编辑等。

主要能力分类

高效绘图

生成图片、短视频素材、海报、印刷品、可视化图表。

支持 Flex 自动布局、中心绘制、渐变、内外阴影、裁剪、遮罩、擦除、圆角路径，也支持后端批量生成。

UI 交互

小游戏、互动应用、工业组态与可视化。

提供跨平台交互事件、手势、CSS 风格的交互状态、光标、动画、状态过渡、运动路径、精灵、箭头、连线。

图形编辑

AI 无限画布、图形编辑器、图片编辑器、矢量设计工具。

编辑相关能力以插件方式提供，可高度定制。

生态与子仓库

LeaferJS 由多个子包组成：

包	作用
`leafer`	核心渲染内核
`leafer-ui`	常用 UI 元素与交互层（日常开发主要用它）
`leafer-in`	官方插件集合（编辑器、标尺、动画等）
`leafer-draw`	绘图相关能力
`leafer-game`	游戏方向能力

快速上手思路

import { App, Rect, Ellipse } from 'leafer-ui'

const app = new App({ view: window, editor: {} })

const rect = new Rect({
  x: 100,
  y: 100,
  width: 200,
  height: 120,
  fill: '#32cd79',
  cornerRadius: 12,
  editable: true,
})

const circle = new Ellipse({
  x: 380,
  y: 100,
  width: 120,
  height: 120,
  fill: '#feb027',
  editable: true,
})

app.tree.add(rect)
app.tree.add(circle)

rect.on('tap', () => {
  rect.fill = '#ff4d4f'
})

常见流程：

安装 leafer-ui（需要编辑器能力时引入 @leafer-in/editor）。
创建 App 或 Leafer 实例并绑定容器。
往场景树里添加图形元素。
绑定事件、动画、状态。
需要编辑器时开启 editor 配置。

和 Fabric.js / Konva.js 的详细对比

定位差异

Fabric.js：2010 年前后就有的老牌库，核心卖点是「交互式对象模型」+ SVG ↔ Canvas 双向解析，天生偏图片/海报编辑器。
Konva.js：Stage / Layer / Group / Shape 的场景树架构，事件系统完善，官方提供 react-konva、vue-konva、svelte-konva、ng2-konva 绑定，偏通用交互画布。
LeaferJS：2023 年起步的国产引擎，主打极致性能 + 开箱即用的编辑器交互层，定位「无限画布 / Figma 级编辑器内核」。

能力对比

维度	Fabric.js	Konva.js	LeaferJS
架构	对象模型 + 单画布	Stage / Layer 多画布分层	场景树 + 脏矩形局部渲染
大规模图形性能	弱（万级开始吃力）	中（分层可缓解）	强（宣称百万级仍可交互）
事件拾取	包围盒 + 逐对象命中	色值法（额外一倍绘制开销）	优化过的路径查找
编辑器能力	内置（选中框、控制点较完善）	需自己用 Transformer 拼	插件内置（`@leafer-in/editor`）
SVG 导入导出	✅ 强项	❌ 不支持导出 SVG	部分支持（以 Canvas 为主）
框架绑定	无官方绑定	React / Vue / Svelte / Angular 官方绑定	无官方绑定（自行封装）
自动布局（Flex）	❌	❌	✅
Node.js 服务端渲染	部分支持	基本不支持	✅ 官方支持
小程序 / Worker	需自行适配	需自行适配	官方适配
体积	较大（约 300KB+）	中（约 150KB 左右）	小（约 70KB min+gzip，零依赖）
社区与生态	最成熟，英文资料多	成熟，文档友好	较新，以中文社区为主
踩坑资料 / Stack Overflow	非常多	多	少，主要靠官方文档

性能数字来自官方 benchmark（canvas-benchmark）和第三方测评，属于厂商自测口径，选型时建议自己按真实场景跑一遍。
参考量级：1000 张图片动态场景下 Leafer ≈ 60fps、Pixi ≈ 58fps，而 Konva / Fabric ≈ 7fps。

三者的取舍建议

选 Fabric.js：需要 SVG 导入导出、需要成熟的图片编辑器能力、团队更看重资料丰富度和长期稳定性；图形数量不大（几百到几千）。
选 Konva.js：用 React / Vue 且希望有官方绑定、以声明式方式写画布；交互密集但元素规模中等；不需要 SVG 导出。
选 LeaferJS：元素规模大（万级以上）、需要无限画布 / Figma 式编辑体验、需要服务端或小程序渲染、能接受相对年轻的生态并且以中文文档为主。

迁移成本感受

Fabric → Leafer：对象模型差异较大，滤镜、SVG 序列化这类能力需要重写，改造成本最高。
Konva → Leafer：概念映射较直接（Stage→Leafer/App、Layer→Group/Frame、Shape→Rect/Ellipse/Path），事件 API 风格也接近，迁移相对顺畅。

其他同类库

PixiJS：偏 2D 游戏 / WebGL 渲染，性能强但图形编辑场景要自己造轮子。
AntV G：偏数据可视化方向，图形编辑器能力需要自己补。

什么时候适合用

需要做画布类编辑器（白板、海报编辑、流程图、无限画布）。
需要在浏览器里渲染大量图形且要保持交互流畅。
需要服务端 Node.js 批量生成图片。
想要一个开箱即用的编辑器交互层，不想从零实现选中框、缩放手柄、吸附。

使用时要注意

国内项目为主，英文社区相对小：遇到问题主要靠官方中文文档和 issue。
小程序端有坑：官方文档也明确提示微信小程序平台底层限制较多。
版本迭代快：v2 与 v1 API 有差异，升级时注意更新日志。
Canvas 的通病：无障碍、文本可选中、SEO 都需要额外方案。
插件按需引入：编辑器等能力在 @leafer-in/* 里，不引入就没有对应功能。

核心特点​

主要能力分类​

高效绘图​

UI 交互​

图形编辑​

生态与子仓库​

快速上手思路​

和 Fabric.js / Konva.js 的详细对比​

定位差异​

能力对比​

三者的取舍建议​

迁移成本感受​

其他同类库​

什么时候适合用​

使用时要注意​

相关链接​