English | 简体中文
轻松实现图形交互与编辑，AI 时代的无限画布引擎
官网: leaferjs.com
👉 在浏览器里 “跑得动 100 万个图形” 的 Canvas 引擎
👉 可以做 “Figma 级编辑器” 的 Canvas 内核
极致性能 · 极低内存 · 类 DOM API · 图形编辑 · 跨平台 · 零依赖 · 轻量 (70KB min+gzip)
在 Web 图形开发中，开发者常面临“性能与易用性”的选型困境。
LeaferJS 致力于终结这种权衡。 它从底层重构，不仅在性能上挑战 Web 渲染和交互的物理极限，更在开发体验上追求极致的简单。它是为了解决“大规模、高密度、海量图层”的生产力工具而诞生的标准化引擎。
在 AI 生成内容爆发的今天，图形引擎的挑战已从 “如何画出来” 转变为 “如何编排与精修”：
- ⚡ 极致承载力： 突破极限，百万交互图层依然保持丝滑响应，完美承载 AI 生成的海量碎片。
- 🤖 语义化编辑： 结构化场景树让 AI 能像操作 DOM 一样操控图形，构建真正的 AI 协同工作流。
- 🛠️ 原生编辑器： 内置 Editor 插件，让AI 生成的内容一键获得精准旋转、缩放、多选等工业级编辑能力。
Leafer AI 知识库 | MCP & Skills | 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 环境。
npm install leafer-ui
# 需使用插件时，推荐同时安装跨平台核心包，防止出现更新版本不同步问题
npm install leafer-ui @leafer-ui/core @leafer-ui/drawimport { 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 始终处于 Web 图形技术的领先水平。
| 仓库名称 | 功能描述 | 开源地址 |
|---|---|---|
| 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 时, 你就已成为了 这个充满活力的大家庭 的一员，踏入这座建设中的“技术城堡”。只有通过每位成员的热情参与与贡献，这座城堡才能逐步走向完善。
用户zw8T394C 用户zw8T398C 龙眼吃多了上火 用户zw8T392T 用户z89CSw69 用户CzP9SCAz Kim 用户249AzA8v l0f5c7bf 夏先生 yinuo 用户3wTwAz78 用户zw8T39zT 用户249AzA82 用户CzP9SCvz 用户39A334xT 用户3wTwAz3x 用户zw8T39zC 稀饭、微凉 用户CzP9SCT4 便宜VPS服务器 菲鸽 szhua Cheng Suezp beyond 用户3PvP2S63 o Arvin finallycc 用户39A3346C 大雷 用户CzP9SC4z 随风 用户z89CSwT9 用户3wTwAzCx UPMuling 军杨 桔子雨工作室 用户zw8T37xC 前端炒饭仔 用户z89CSw46 崮生 互动矩阵 ZhanYoHo 何佳Q coderhyh 早上好啊 快图设计 do 毛哥哥 迅排设计 用���z89CSw86 糖果 南城以北 黑色摩天仑 Charm Lauginwing 在路上 Jerry 张余🌈 李狗嗨。💢 用户zw8T376T 用户249AzA2v ʚ LMT ɞ 格子 等等 goosen F4nniu 梁福斌 江万江 杨超 ToB Dev 前端之虎陈随易 A☀️云☀️A zhk 爱发电用户_c9c82 轻简历 爱发电用户_0fac0 wangyesheji.cn 风间 爱发电用户_Tqsm 爱发电用户_6KpE 星小志 zwm 爱发电用户_3725c Noth1ng 纳西妲の√ 爱发电用户_Ahb9 爱发电用户_7617d 冷漠 爱发电用户_9RXB 今日值得读 爱发电用户_49sT 爱发电用户_NFCS 爱发电用户_43ad8 爱发电用户_30455 砖吐筷筷 xiaozhang 爱发电用户_b47b3 longbow1998 爱发电用户_5d755 爱发电用户_b76b8 爱发电用户_e70c2 xiaou@截图工具 ousiri 爱发电用户_039dc 花祁 爱发电用户_99f39 坤坤 爱发电用户_X6hp ycteng 曹吉美爸爸 啸沧海 Ronny 爱发电用户_UXEV Biu 王志强 SaltedFish 爱发电用户_76f9d PD.新城คิดถึง 糖颂缘冥倾 ALBERT. 爱发电用户_Pbm7 Leafer 赞助我们
MIT 开源许可协议，可以免费使用，且能用于商业场景。
Copyright © 2023-present Chao (Leafer) Wan