leafer-ui

一款好用的 Canvas 渲染引擎，革新的体验。高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑，前端开发必备～

leafer-ui 是基于核心库 leafer 开发的一套绚丽多彩的 UI 绘图、交互框架。作为LeaferJS 的表现层，可结合 AI 绘图、生成界面，表现力丰富、性能强劲，可媲美当前主流设计软件。

提供了丰富的 UI 绘图元素，和开箱即用的功能，如自动布局、图形编辑、SVG 导出，方便与 Figma、Sketch 等产品进行数据交换。并为跨平台开发提供了统一的交互事件，如拖拽、旋转、缩放手势等。

可用于高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。随着生态的不断发展，未来将支撑可视化开发网页、应用、游戏、动画。

v1.0 正式版已发布 🎉🎉🎉

📗 图文并茂、由浅入深的了解 LeaferJS

📙 全新动画、状态、过渡、游戏功能

📘 绝境中盛开，LeaferJS 的创业故事

如果你觉得不错，请帮我们点个 Star 🌟 ，让这个库被更多的人看见 - GitHub / Gitee ✨ ✨ ✨

快速入门

1. 准备在线 Playground 环境

可通过 Cloud Studio 模版创建一个 LeaferJS 项目，用于运行、练习后续的示例代码。

2. 学习 LeaferJS 快速入门教程

跟随官网教程步骤（文档底部有下一步引导按钮）从浅到深的一步步学习。

建议将教程中的示例代码复制到 LeaferJS 项目 的 index.ts 文件中运行、调试效果。

3. 开发一个画龙点睛的小游戏

给你一条会飞的龙，看你能做出什么好玩的小游戏分享给我们 ◠‿◠

快速安装

🚀 想马上在产品中使用，请安装 leafer-ui，开始你的探索之旅。

场景包

高效绘图场景，推荐安装更轻量的 leafer-draw （49KB min+gzip）。

游戏开发场景，推荐安装更省心的 leafer-game，已集成了游戏相关插件。

图形编辑场景，推荐安装更省心的 leafer-editor，已集成了图形编辑器相关插件。

入门场景

高效绘图： 长图、产品海报、印刷品等

Flex 自动布局、中心绘制，后端批量生成，渐变、内外阴影、裁剪、遮罩、擦除...

UI 交互： 小游戏、互动应用、组态等

跨平台交互事件、手势，CSS 交互状态、光标，动画、状态、过渡、精灵，箭头、连线...

图形编辑： 头像裁剪、图片、DIY 编辑器等

丰富的图形编辑功能、高可定制，标尺、视窗控制、滚动条...

互动交流

有问题、建议可以 提交 issue，留下你的贡献足迹。

欢迎加入 技术交流群 ，与小伙伴们建立联系，共同学习进步，偶尔会有特殊福利。

使命与愿景

leafer-ui 致力于实现一套简洁、开放、现代化的 UI 绘图语言标准，表现力丰富，便于 AI 理解，人类可视化使用，并为数字化产品开发提供跨平台、轻量化、高性能的运行时。

让不同的软件之间能够沟通、协作、共享绘图数据，让数字化产品开发可以更快、更简单。

通过不断革新的图形渲染技术、配套支持， 吸引更多的开发者加入使用，建立起一个开放的生态环境，沟通有无，互相从中受益，推动行业的快速发展，并诞生出更多有创意的技术和产品。

我们正在坚定的向这个目标持续前进，可以通过 开发计划 了解更多信息。

资源

官方网站

快速上手

快速安装

LeaferJS 主仓库

leafer 仓库

leafer-in 官方插件仓库

License

leafer-ui 是采用 MIT 许可的开源项目，可以永久免费使用。