https://github.com/leaferjs/ui

一款好用的 Canvas 渲染引擎，革新的体验。高效绘图 、UI 交互（小游戏、互动应用、组态）、图形编辑。
https://github.com/leaferjs/ui

animate animation autolayout canvas canvas2d configuration design editor engine graphics html5 leafer leafer-ui leaferjs miniapp node render renderer translation worker

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/leaferjs/ui
• Owner: leaferjs
• License: mit
• Created: 2023-03-05T14:14:20.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-26T03:22:38.000Z (3 months ago)
• Last Synced: 2024-09-26T07:32:39.484Z (3 months ago)
• Topics: animate, animation, autolayout, canvas, canvas2d, configuration, design, editor, engine, graphics, html5, leafer, leafer-ui, leaferjs, miniapp, node, render, renderer, translation, worker
• Language: TypeScript
• Homepage: https://www.leaferjs.com
• Size: 999 KB
• Stars: 2,357
• Watchers: 22
• Forks: 82
• Open Issues: 47
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - leaferjs/ui - Leafer UI 是基于 Leafer 开发的一套绚丽多彩的 UI 绘图框架，可结合 AI 绘图、生成界面。 (TypeScript)
• awesome-github-star - ui

README

        
# Leafer UI

[![LeaferJS](./leaferjs.jpg)](https://www.leaferjs.com)

Leafer UI 是基于 [Leafer](https://github.com/leaferjs/leafer) 开发的一套绚丽多彩的 UI 绘图、交互框架，作为 [LeaferJS](https://www.leaferjs.com) 的表现层，可结合 AI 绘图、生成界面，表现力丰富、性能强劲。

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

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

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

📗 [图文并茂、由浅入深的了解 LeaferJS](https://leaferjs.com/ui/blog/2024-07-09.html)

📙 [全新动画、状态、过渡、游戏功能](https://leaferjs.com/ui/blog/2024-09-20.html)

📘 [绝境中盛开，LeaferJS 的创业故事](https://leaferjs.com/ui/blog/2024-04-08.html)

如果你觉得不错，请帮我们点个 [Star](https://github.com/leaferjs/ui) 🌟 ，吸引更多的资源参与进来 - [GitHub](https://github.com/leaferjs/ui) / [Gitee](https://gitee.com/leaferjs/ui) ✨ ✨ ✨

## 快速安装

🚀 想马上使用，请安装 [ leafer-ui](https://leaferjs.com/ui/guide/install/ui/start.html)，开始你的探索之旅。

## 场景版

编辑图形的场景，推荐安装更省心的 [leafer-editor](https://leaferjs.com/ui/guide/install/editor/start.html)，已集成了图形编辑器相关插件。

单纯绘图的场景，推荐安装更轻量的 [leafer-draw](https://leaferjs.com/ui/guide/type/draw/start.html) （49KB min+gzip）。

## 入门场景

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

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

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

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

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

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

## 互动交流

有问题、建议可以 [提交 issue](https://github.com/leaferjs/ui/issues)，留下你的贡献足迹。

欢迎加入 [技术交流群](https://leaferjs.com/#contact) ，与小伙伴们建立联系，共同学习进步，偶尔会有特殊福利。

## 使命与愿景

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

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

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

我们正在坚定的向这个目标持续前进，可以通过 [开发计划](https://www.leaferjs.com/ui/plan/) 了解更多信息。

### 资源

[官方网站](https://www.leaferjs.com)

[快速上手](https://www.leaferjs.com/ui/guide)

[快速安装](https://www.leaferjs.com/ui/guide/start.html)

[LeaferJS 主仓库](https://github.com/leaferjs/LeaferJS)

[Leafer 仓库](https://github.com/leaferjs/leafer)

[LeaferIN 官方插件仓库](https://github.com/leaferjs/in)

### License

Leafer UI 是采用 MIT 许可的开源项目，可以永久免费使用。