LeaferJS：绚丽多彩的 HTML5 Canvas 2D 图形渲染引擎
概览
Leafer UI 是基于 Leafer 开发的一套丰富多彩的 UI 绘图和交互框架，能够与 AI 绘图和生成界面相结合，表现力强大、性能优越。它提供了众多 UI 绘图元素和开箱即用的功能，如自动布局、图形编辑、SVG 导出，方便与 Figma、Sketch 等工具进行数据交换，并为跨平台开发提供了统一的交互事件（如拖拽、旋转、缩放手势等）。适用于高效绘图、组态和图形图像编辑软件，未来将支持可视化开发网页、应用、游戏和动画。
快速安装
🚀 想立即使用？请安装 leafer-ui，开始探索之旅。
- 场景版：推荐安装
leafer-editor，集成图形编辑器相关插件，省心省力。 - 轻量版：对于单纯绘图的需求，推荐安装
leafer-draw（49KB min+gzip）。
阅读顺序
- 🚀 第 1 本书：快速上手，轻松入门 😎
- 🍉 第 2 本书：参考手册，详解元素、属性、方法、事件和类库的使用
- 🍊 第 3 本书：插件中心，了解官方及社区插件
我们还提供了不断更新的场景示例供学习，您可以通过顶部导航栏快速切换。
创建应用
Leafer 实例采用树状结构，Leafer 为根节点，提供管理功能，可以添加子元素，通过 Group / Box 层层嵌套，构成复杂的渲染树。
创建固定宽高的应用
import { Leafer } from 'leafer-ui';
new Leafer({
view: 'id', // 支持 window、div、canvas 标签对象，id字符串时不加 # 号
width: 600, // 不能设置为 0，否则会变为自动布局
height: 600
});
创建自适应布局的应用
当画布的父节点尺寸改变后会自动调整：
import { Leafer } from 'leafer-ui';
new Leafer({ view: window }); // 等同于 { view: window, top: 0, right: 0, bottom: 0, left: 0 }
高效绘图
Leafer 提供易于上手的自动布局功能，支持按中心点绘制，便于创建海报和分享。提供渐变、阴影、遮罩等功能，能轻松实现专业设计效果。此外，强大的 Pen 工具让绘制路径和元素组合如绘画般简单。
import { Leafer, Pen } from 'leafer-ui';
const leafer = new Leafer({ view: window });
const pen = new Pen();
pen.setStyle({ fill: { type: 'radial', stops: [{ offset: 0, color: '#FF4B4B' }, { offset: 1, color: '#FEB027' }] } });
pen.roundRect(0, 0, 100, 100, 30);
pen.setStyle({ y: -5, fill: 'white' });
pen.moveTo(40, 30).bezierCurveTo(70, 30, 90, 60, 63, 80).quadraticCurveTo(50, 88, 40, 80).bezierCurveTo(10, 60, 50, 40, 40, 30);
leafer.add(pen);
UI 交互
- 组态、流程图：提供丰富的箭头样式和元素状态，结合用户的连线插件，快速搭建组态和流程图软件。
- 图片裁剪：支持裁剪遮罩、手机端手指缩放和旋转，简单代码即可实现图片裁剪工具。
总结
LeaferJS 致力于实现简洁、开放、现代化的 UI 绘图语言标准，具备丰富表现力，易于 AI 理解，便于人类可视化使用。它为数字化产品开发提供跨平台、轻量化、高性能的运行时支持，助力高效绘图和组态开发。
