[English](./README.md) | 简体中文
# LeaferJS：好用的 Canvas 引擎轻松实现图形交互与编辑，AI 时代的无限画布引擎官网: [leaferjs.com](https://www.leaferjs.com) **👉 在浏览器里“跑得动 100 万个图形”的 Canvas 引擎** **👉 第一个可以做“Figma级编辑器”的 Canvas 内核**

极致性能 · 极低内存 · 类 DOM API · 图形编辑 · 跨平台 · 零依赖 · 轻量 (70KB min+gzip)

[![NPM Downloads](https://img.shields.io/npm/dm/leafer-ui?style=flat-square&color=32cd79)](https://www.npmjs.com/package/leafer-ui) [![GitHub Stars](https://img.shields.io/github/stars/leaferjs/leafer-ui?style=flat-square&label=Stars&color=ffd700)](https://github.com/leaferjs/leafer-ui/stargazers) [![GitHub Release](https://img.shields.io/github/v/release/leaferjs/leafer-ui)](https://github.com/leaferjs/leafer-ui/releases) [![GitHub License](https://img.shields.io/github/license/leaferjs/leafer-ui)](https://github.com/leaferjs/leafer-ui/blob/main/LICENSE)

## 🧐 为什么选择LeaferJS？在 Web 图形开发中，开发者常面临“性能与易用性”的选型困境。 **LeaferJS 致力于终结这种权衡。** 它从底层重构，不仅在性能上挑战 Web 渲染和交互的物理极限，更在开发体验上追求极致的简单。它是为了解决“大规模、高密度、海量图层”的生产力工具而诞生的标准化引擎。 ## 🏗️ 为什么是 AI 时代的无限画布引擎？在 AI 生成内容爆发的今天，图形引擎的挑战已从 **“如何画出来”** 转变为 **“如何编排与精修”**： - **⚡ 极致承载力：** 突破极限，百万交互图层依然保持丝滑响应，完美承载 AI 生成的海量碎片。 - **🤖 语义化编辑：** 结构化场景树让 AI 能像操作 DOM 一样操控图形，构建真正的 AI 协同工作流。 - **🛠️ 原生编辑器：** 内置 Editor 插件，让AI 生成的内容一键获得精准旋转、缩放、多选等工业级编辑能力。 [Leafer AI 知识库](https://github.com/leaferjs/ai-docs) | [MCP & Skills](https://context7.com/leaferjs/ai-docs?tab=skills) | [Ask AI](https://context7.com/leaferjs/ai-docs?tab=chat) ## 🎨 应用场景 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，数据仅供参考，实际表现取决于硬件性能。 [性能对比详情](https://www.leaferjs.com/#performance) | [性能基准测试](https://benchmark.leaferjs.com/leafer/) ## ⚡️ 核心能力 - **🎨 强大的图形系统：** 完整的场景树结构，支持矢量图形、SVG 路径及像素操作。 - **🧠 极致的交互响应：** 原生支持拖拽、缩放、多点触控，毫秒级的命中检测（Hit Testing）。 - **🛠️ 原生编辑器支持：** 内置 **Editor 插件**，一键开启图形的**缩放、旋转、移动、多选**等功能。 - **🧩 现代布局引擎：** 业内罕见地在 Canvas 引擎中原生支持 **Flex 布局**，像写 HTML 一样自然。 - **🎬 状态驱动动画：** 内置高性能过渡效果与路径动画，让动态交互更简单。 - **🌍 全平台适配：** 一套代码完美运行于 Web、Node.js、微信小程序及移动端 H5 环境。 [功能列表详情](https://www.leaferjs.com/#different) | [在线体验](https://www.leaferjs.com/examples/) ## 🛠️ 快速上手 ```sh npm install leafer-ui # 需使用插件时，推荐同时安装跨平台核心包，防止出现更新版本不同步问题 npm install leafer-ui @leafer-ui/core @leafer-ui/draw ``` ```ts 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) ``` [在线运行示例](https://www.leaferjs.com/examples/#official%2Fstart%2Fcreate.ts) | [图形编辑示例](https://www.leaferjs.com/examples/#official%2Fplugin%2Feditor%2Fframe%2Ftransparent.ts) ## 💼 商业支持与可持续性从“一个引擎”到“一个成熟产品”之间存在巨大的研发鸿沟。为了支持开源引擎的长久维护，并协助企业跨越复杂场景的开发瓶颈，我们构建了透明且健康的生态： - **LeaferJS 永久开源 (MIT)：** 核心功能和基础插件始终保持开源与自由，保障每一位开发者的选型安全与技术掌控权。 - **[PxGrow](https://www.pxgrow.com/) 商业插件 (可选)：** 专注于解决**工业级应用**中的复杂业务难题。它封装了高级编辑器套件、极端场景性能优化及复杂图形算法，旨在帮企业节省数月甚至数年的业务功能研发周期。 - **良性循环与长期主义：** 所有的商业收入将用于反哺开源引擎的持续迭代，确保 LeaferJS 始终处于 Web 图形技术的领先水平。 ### LeaferJS 仓库组成一览表 | 仓库名称 | 功能描述 | 开源地址 | | :------------ | :--------------------------- | :---------------------------------------------- | | **LeaferJS** | 主集成仓库，支持直接运行代码 | [GitHub](https://github.com/leaferjs/LeaferJS) | | **leafer** | 引擎核心仓库 | [GitHub](https://github.com/leaferjs/leafer) | | **leafer-ui** | UI 表现层仓库 | [GitHub](https://github.com/leaferjs/leafer-ui) | | **leafer-in** | 官方插件仓库 | [GitHub](https://github.com/leaferjs/leafer-in) | | **leafer-x** | 社区插件提交/展示仓库 | [GitHub](https://github.com/leaferjs/leafer-x) | | **test** | 自动化测试仓库 | [GitHub](https://github.com/leaferjs/test) | | **code** | 示例代码仓库 | [GitHub](https://github.com/leaferjs/code) | | **docs** | 在线文档仓库 | [GitHub](https://github.com/leaferjs/docs) | ## 🌟 参与贡献：五年沉淀，始于初心 LeaferJS 是一个持续打磨了五年的原创开源引擎。我们致力于把“图形系统底座”这件事标准化，让开发者专注产品创意，而非底层实现。 **如果你支持原创、追求极致性能，请为我们点亮一颗 Star！**

- 🌟 **Star 仓库：** 你的认可对我们至关重要。 - 🐞 **提交反馈：** 每一个 Issue 都是我们进步的机会。 - 🤝 **加入社区：** 与社区开发者共同探索 Web 图形技术的极限。 ## 贡献指南当你使用 LeaferJS 时, 你就已成为了这个充满活力的大家庭的一员，踏入这座建设中的“技术城堡”。只有通过每位成员的热情参与与贡献，这座城堡才能逐步走向完善。 [社区行为准则](./contributor/CODE_OF_CONDUCT.md) [代码提交规范](./contributor/COMMIT_CONVENTION.md) [提问的智慧](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md#%E6%8F%90%E9%97%AE%E7%9A%84%E6%99%BA%E6%85%A7) ## 致谢贡献者 [每一位贡献代码的社区成员](https://github.com/leaferjs/leafer-ui/graphs/contributors) [每一位参与生态的社区成员](https://www.leaferjs.com/ui/contribute/) ## 赞助商

金牌赞助商

银牌赞助

铜牌赞助

用户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 赞助我们