leaferjs / leafer-ui

一款好用的 Canvas 渲染引擎,革新的体验。高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑,前端开发必备~
https://www.leaferjs.com
MIT License
2.38k stars 82 forks source link
animate animation autolayout canvas canvas2d configuration design editor engine graphics html5 leafer leafer-ui leaferjs miniapp node renderer translation worker

leafer-ui

LeaferJS

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

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

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

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

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

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

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

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

快速安装

🚀 想马上使用,请安装 leafer-ui,开始你的探索之旅。

场景版

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

单纯绘图的场景,推荐安装更轻量的 leafer-draw (49KB min+gzip)。

入门场景

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

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

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

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

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

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

互动交流

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

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

使命与愿景

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

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

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

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

资源

官方网站

快速上手

快速安装

LeaferJS 主仓库

leafer 仓库

leafer-in 官方插件仓库

License

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