English | 简体中文
轻松构建可交互、可编辑的图形应用，AI 时代的无限画布引擎
开源官网: leaferjs.com
开源森林: leafer.pro
PxGrow: pxgrow.com
👉 在浏览器里 “跑得动 100 万个图形” 的 Canvas 引擎
👉 可以做 “Figma 级编辑器” 的 Canvas 内核
极致性能 · 极低内存 · 类 DOM API · 图形编辑 · 跨平台 · 零依赖 · 轻量 (70KB min+gzip)
本仓库是 LeaferJS 的集成仓库，整合核心引擎及相关扩展，提供本地开发、运行示例和自定义打包的能力。
| 仓库 | 说明 |
|---|---|
| leafer | ⚙️ 核心引擎 |
| leafer-ui | 🖼️ UI 组件与图形能力 |
| leafer-in | 🖱️ 官方插件 |
| leafer-draw | ✏️ 绘图场景 |
| leafer-game | 🎮 游戏场景 |
| leafer-editor | 🛠️ 编辑器场景 |
使用 --recurse-submodules 同时获取所有子仓库：
git clone --recurse-submodules https://github.com/leaferjs/LeaferJS.git
cd LeaferJSnpm installnpm run start启动成功后，在浏览器中访问：
将 LeaferJS 官网中的示例代码复制到 index.ts，即可在本地实时查看运行效果。
同步主仓库及所有子仓库的最新代码：
git pull --recurse-submodules根据需要选择对应的打包命令：
| 命令 | 说明 |
|---|---|
npm run core |
打包核心代码及相关依赖 |
npm run web |
仅打包 Web 环境代码 |
npm run all |
打包所有环境的代码 |
npm run dts |
生成所有包的 TypeScript 类型声明文件（.d.ts） |
npm run clear |
清理打包产物 |
在 Web 图形开发中，开发者常面临“性能与易用性”的选型困境。
LeaferJS 致力于终结这种权衡。 它从底层重构，不仅在性能上挑战 Web 渲染和交互的物理极限，更在开发体验上追求极致的简单。它是为了解决“大规模、高密度、海量图层”的生产力工具而诞生的标准化引擎。
在 AI 生成内容爆发的今天，图形引擎的挑战已从 “如何画出来” 转变为 “如何编排与精修”：
- ⚡ 极致承载力： 突破极限，百万交互图层依然保持丝滑响应，完美承载 AI 生成的海量碎片。
- 🤖 语义化编辑： 结构化场景树让 AI 能像操作 DOM 一样操控图形，构建真正的 AI 协同工作流。
- 🛠️ 原生编辑器： 内置 Editor 插件，让AI 生成的内容一键获得精准旋转、缩放、多选等工业级编辑能力。
Skills & Leafer AI 知识库 | MCP | Ask AI
LeaferJS 的极致性能与标准化能力，使其成为以下领域的理想底座：
- 🤖 AI 场景： AI 无限画布、AI 设计工具、生成式 UI 交互。
- 🛠️ 生产力工具： 图形编辑器、在线设计平台（Figma/Canva 类）、电子白板、低代码引擎。
- 📊 工业可视化： 万级节点电力组态、流程图、资产监控、大规模拓扑图。
- 🎬 数字内容生成： 批量生成图片/海报、短视频帧渲染（Node.js 端）、互动 H5。
- 🎮 互动应用： 轻量小游戏、品牌互动应用、高频交互数据大屏。
LeaferJS 将 Web 图形处理的“天花板”向上推举了约 10 倍。
| 测试项 (100万个可交互矩形) | 传统 Canvas 库 | LeaferJS | 提升 |
|---|---|---|---|
| 首屏创建速度 | ~9-15 秒 | 1.28 秒 | 约快 8 倍 🎉 |
| 内存占用 | ~2-4GB (浏览器可能崩溃) | 320 MB | 约节省 8 倍 |
| 单元素拖拽帧率 | 0-4 FPS | 60 FPS | 约流畅 15 倍 |
测试环境: 2K屏笔记本 / Chrome V143.0，数据仅供参考，实际表现取决于硬件性能。
- 🎨 强大的图形系统： 完整的场景树结构，支持矢量图形、SVG 路径及像素操作。
- 🧠 极致的交互响应： 原生支持拖拽、缩放、多点触控，毫秒级的命中检测（Hit Testing）。
- 🛠️ 原生编辑器支持： 内置 Editor 插件，一键开启图形的缩放、旋转、移动、多选等功能。
- 🧩 现代布局引擎： 业内罕见地在 Canvas 引擎中原生支持 Flex 布局，像写 HTML 一样自然。
- 🎬 状态驱动动画： 内置高性能过渡效果与路径动画，让动态交互更简单。
- 🌍 全平台适配： 一套代码完美运行于 Web、Node.js、微信小程序及移动端 H5 环境。
import { Leafer, Rect } from 'leafer-ui'
// 创建一个自适应窗口的交互应用
const leafer = new Leafer({ view: window })
// 创建一个可以被拖拽的矩形
const rect = new Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
draggable: true,
})
leafer.add(rect)从“一个引擎”到“一个成熟产品”之间存在巨大的研发鸿沟。为了支持开源引擎的长久维护，并协助企业跨越复杂场景的开发瓶颈，我们构建了透明且健康的生态：
- LeaferJS 永久开源 (MIT)： 核心功能和基础插件始终保持开源与自由，能够满足绝大多数项目需求，让开发者拥有安全、可控、可持续的技术选择，无需担心核心能力受到商业限制。
- PxGrow 提供可选商业插件： 专注于解决工业级应用中的复杂业务难题。包括专业编辑器套件、复杂图形算法与性能优化能力，帮助企业节省数月甚至数年的研发投入。
- 良性循环与长期主义： 开发者因开源受益，企业因商业能力提效，而商业支持又持续推动 LeaferJS 的发展与创新，形成开放、透明、可持续的发展循环。
| 仓库名称 | 功能描述 | 开源地址 |
|---|---|---|
| LeaferJS | 主集成仓库，支持直接运行代码 | GitHub |
| leafer | 引擎核心仓库 | GitHub |
| leafer-ui | UI 表现层仓库 | GitHub |
| leafer-in | 官方插件仓库 | GitHub |
| leafer-x | 社区插件提交/展示仓库 | GitHub |
| test | 自动化测试仓库 | GitHub |
| code | 示例代码仓库 | GitHub |
| docs | 在线文档仓库 | GitHub |
LeaferJS 是一个持续打磨了五年的原创开源引擎。我们致力于把“图形系统底座”这件事标准化，让开发者专注产品创意，而非底层实现。
如果你支持原创、追求极致性能，请为我们点亮一颗 Star！
- 🌟 Star 仓库： 你的认可对我们至关重要。
- 🐞 提交反馈： 每一个 Issue 都是我们进步的机会。
- 🤝 加入社区： 与社区开发者共同探索 Web 图形技术的极限。
当你使用 LeaferJS 时, 你就已成为了 这个充满活力的大家庭 的一员，踏入这座建设中的“技术城堡”。只有通过每位成员的热情参与与贡献，这座城堡才能逐步走向完善。
MIT 开源许可协议，可以免费使用，且能用于商业场景。
Copyright © 2023-present Chao (Leafer) Wan