Code
Both
Preview
GitHub
官方 社区 征集
场景
🎮️ 小游戏
心花怒放
画龙点睛
快速入门
🧬 基础
创建 Leafer
创建固定宽高的 Leafer
window
div
canvas
id
创建自适应布局的 Leafer
full
padding-left
padding
创建自动生长的 Leafer
grow
grow-width
grow-height
创建元素
创建元素
标准创建
简洁创建
使用 tag
使用 JSON
创建 Rect
绘制不同圆角的矩形
创建 Ellipse
绘制扇形圆环
创建 Line
绘制横线
创建 Polygon
绘制圆角六边形
创建 Star
绘制圆角星形
创建 Path
标准创建
创建 Pen
画出不同颜色的形状
创建Image
使用默认宽高
Image 加载 SVG
使用svg字符串
创建 Canvas
使用 context 绘制
创建 Text
标准创建
创建 Group
通过 add 方法添加
创建 Box
标准创建
创建 Frame
标准创建
设置样式
初始化元素样式
修改样式
标准修改
简洁修改
重置样式
修改对象
修改数据
使用 JSON
线性渐变填充
默认方向
线性渐变描边
默认方向
描边样式
外阴影
drop-shadow
内阴影
遮罩功能
将圆环设为遮罩
擦除功能
将圆环设为橡皮擦
隐藏元素
设置不透明度
原点
围绕原点旋转 45 度
around 属性
围绕坐标(50,50) 为中心旋转 45 度
事件处理
监听事件
通过 on 方法监听
通过 event 对象监听
移除元素
移除元素
标准移除
条件移除
销毁移除
清空元素
销毁应用
Vue / React
前端环境
Vue
React
HTML
服务端渲染
Nuxt.js
VitePress
Next.js
组件式开发（社区提供）
leafer-vue
🧲 好玩
动画
动画样式
入场和出场动画
颜色过渡
关键帧动画
虚线箭头动画
交互状态
过渡效果
按钮交互
自定义状态
切换状态
运动路径
运动路径
沿路径运动
自身描边动画
Robot 游戏元素
创建 Robot 游戏元素
自动布局
自动布局
图形编辑器
App结构 - 图形编辑器
editor
实现原理
😎 进阶
创建 App
App结构 - 图形编辑器
editor
简化
实现原理
缩放平移视图
应用配置 - viewport 视口类型
App
Leafer
实现原理
应用配置 - custom 视口类型
App
Leafer
实现原理
应用配置 - design 视口类型
App
Leafer
实现原理
应用配置 - document 视口类型
App
Leafer
实现原理
转换坐标
画笔工具示例
获取包围盒
图形编辑器
创建图形
局部渲染
应用配置 - 关闭局部渲染
App
Leafer
生命周期
生命周期
监听元素生命周期事件
通过 event 对象监听
通过 on 监听
应用周期
监听 Leafer 事件
渲染周期
监听渲染事件
应用配置
基础
应用配置 - 手动启动应用
Leafer
App
应用配置 - 关闭局部渲染
Leafer
App
视口类型
应用配置 - block 视口类型
Leafer
应用配置 - viewport 视口类型
App
Leafer
实现原理
应用配置 - custom 视口类型
App
Leafer
实现原理
应用配置 - design 视口类型
App
Leafer
实现原理
应用配置 - document 视口类型
App
Leafer
实现原理
画布
应用配置 - 关闭交互事件
Leafer
App
点按操作
应用配置 - 取消光标碰撞半径
Leafer
App
应用配置 - 获取穿透路径
Leafer
App
触屏操作
应用配置 - 阻止移动端默认滑动页面事件
Leafer
App
多点触屏
应用配置 - 禁用多点触屏功能
Leafer
App
滚轮操作
应用配置 - 鼠标滚动直接缩放视图
App
Leafer
平移视图
应用配置 - 拖拽时直接平移视图
App
Leafer
应用配置 - 拖拽至边界时自动平移视图
App
Leafer
缩放视图
应用配置 - 控制视图缩放范围
App
Leafer
元素参考
🍉 应用
Leafer
应用配置 - 手动启动应用
Leafer
单独指定缩放层
Leafer
App
监听浏览器 unload 事件自动销毁
App
App结构 - 图形编辑器
editor
简化
实现原理
🥥 组元素
Group
创建 Group
通过 add 方法添加
通过 children 属性添加
创建元素
使用 tag
移除元素
条件移除
Box
创建 Box
标准创建
隐藏超出宽高的内容
自适应文本
Frame
创建 Frame
标准创建
🍊 元素
Rect
创建 Rect
绘制矩形
绘制圆角矩形
绘制不同圆角的矩形
Ellipse
创建 Ellipse
绘制圆
绘制圆环
绘制扇形圆环
绘制扇形
绘制圆角弧线
绘制椭圆
Line
创建 Line
绘制横线
绘制到目标点的直线
绘制斜线
绘制竖线
绘制折线
绘制圆角折线
绘制曲线
绘制 0.2 曲率的曲线
绘制趋势图
Polygon
创建 Polygon
绘制三角形
绘制五边形
绘制圆角六边形
绘制自由多边形
绘制平滑多边形
绘制 0.2 曲率的平滑多边形
绘制趋势图
Star
创建 Star
绘制车标
绘制星光
绘制五角星
绘制圆角星形
Path
创建 Path
标准创建
缠绕路径
使用 pen 绘制
使用路径数据
Pen
创建 Pen
画出不同颜色的形状
画曲线
结合图形组件
结合图片
结合文字
Image
使用 Rect 代替 Image
创建Image
使用默认宽高
固定宽度，自适应高度
固定高度，自适应宽度
监听图片事件
加载成功
加载失败
SVG
Image 加载 SVG
使用url
使用svg字符串
Rect 填充 SVG
使用svg字符串
Canvas
创建 Canvas
使用 context 绘制
使用图形元素绘制
Text
创建 Text
标准创建
创建 Box
自适应文本
动画样式
文本count动画
打字机动画
删除文本动画
UI
🥝 自定义元素
基础
注册元素
自定义元素
注册元素
注册数据
自定义元素
定义数据
添加属性
自定义元素
添加属性
添加方法
自定义元素
添加方法
高级
继承元素
自定义元素
继承 Rect
继承 Pen
绘制路径
自定义元素
自定义线条
自定义图形
context
自定义元素
使用 canvas.context 自定义图形
元素通用功能
🎞️ 数据
id / name
id
查找单个元素
通过 id 查找
tag
查找功能
通过 tag 查找
name
查找功能
通过 name 查找
className
查找功能
通过 className 查找
innerId
查找单个元素
通过 innerId 查找
innerName
显示矩形元素的 innerName
parent / leafer
parent
等待元素被添加到父元素中时，执行回调
leafer
等待元素被添加到应用中时，执行回调
数据 / 克隆
data
通过 set() 修改属性
无动画过渡
有动画过渡
proxyData
clone()
克隆元素
路径数据
getPath()
获取元素的数字路径
getPathString()
获取元素的字符串路径
path
Rect 转路径优先模式
使用 pen 绘制
使用 path 属性
导入导出
export()
导出图片
导出 Base64 编码数据
导出二进制数据
导出二进制数据
导出文件
导出画布
导出高清图
画面截图
toJSON()
导出 JSON
创建元素
使用 JSON
Leafer 导入 JSON
修改数据
使用 JSON
移除 / 销毁
remove()
移除元素
标准移除
条件移除
destroy()
移除元素
销毁移除
清空元素
销毁应用
📐 布局
位置 / 缩放 / 旋转
position
通过 move() 移动元素
无动画过渡
有动画过渡
size
创建 Rect
绘制矩形
调整 Group 大小，不使用 scale 属性
scale
通过 scaleOf() 缩放元素
无动画过渡
有动画过渡
flip()
通过 flip() 镜像元素
无动画过渡
有动画过渡
rotation
通过 rotateOf() 旋转元素
无动画过渡
有动画过渡
skew
通过 rotateOf() 旋转元素
无动画过渡
有动画过渡
偏移 / resize
offset
偏移元素
resize
调整 Group 大小，不使用 scale 属性
图形编辑器
添加底部固定按钮
围绕中心
origin
原点
设置原点在中心
围绕原点缩放 1.5 倍
围绕原点旋转 45 度
围绕原点倾斜 45 度
around
around 属性
围绕坐标 (50,50) 为中心进行绘制
围绕坐标(50,50) 为中心缩放 1.5 倍
围绕坐标(50,50) 为中心旋转 45 度
围绕坐标(50,50) 为中心倾斜 45 度
around 坐标点 (50,50) 在矩形的右下角
包围盒 / 变换
bounds
transform
转换坐标
转换坐标
坐标转换
世界坐标转内部坐标
内部坐标转世界坐标
世界坐标中的移动距离 转 内部坐标移动距离
快速转换
快速坐标转换
世界坐标转本地坐标
世界坐标中的移动距离 转 本地坐标移动距离
层叠 / 放置
zIndex
调整元素在父元素中的层叠顺序
dropTo()
监听拖放事件
🏼 外观
透明 / 隐藏
opacity
设置不透明度
visible
隐藏元素
隐藏元素，且不占空间
填充 / 描边
fill
纯色填充
线性渐变填充
默认方向
图案填充
默认 cover 覆盖模式
多个不同类型的填充叠加
线性渐变填充 + 图案填充
stroke
纯色描边
线性渐变描边
默认方向
图案描边
默认 cover 覆盖模式
多个不同类型的描边叠加
线性渐变描边 + 图案描边
虚线描边
渐变 / 图像
linear
线性渐变填充
默认方向
控制方向
设置不透明度
radial
径向渐变填充
默认方向
控制方向
拉伸渐变
设置不透明度
angular
角度渐变填充
默认方向
控制方向
拉伸渐变
设置不透明度
solid
纯色填充
image
图案填充
默认 cover 覆盖模式
cover 覆盖模式旋转 90 度
fit 适应模式
stretch 拉伸模式
clip 裁剪模式
repeat 平铺模式
repeat 平铺模式旋转 90 度
内外阴影
shadow
外阴影
drop-shadow
box-shadow
innerShadow
内阴影
裁剪 / 擦除
clip
创建 Box
隐藏超出宽高的内容
图案填充
clip 裁剪模式
mask
遮罩功能
将圆环设为遮罩
将半透明的圆环设为遮罩
将圆形组设为遮罩
将路径设为遮罩
快速设置遮罩
eraser
擦除功能
将圆环设为橡皮擦
将半透明的圆环设为橡皮擦
将圆形组设为橡皮擦
将路径设为橡皮擦
混合模式
blendMode
🖱 交互
可交互性
hittable
停用元素交互事件
hitChildren
停用子元素交互事件
hitSelf
hitFill
交互功能
不可见的 fill 也能响应交互
hitStroke
交互功能
只有 stroke 能响应交互
编辑 / 拖拽
editable
图形编辑器
editConfig
editOuter
editInner
editable
draggable
光标样式
cursor
光标样式
覆盖系统光标
设置光标
设置图片光标
交互状态
state
自定义状态
切换状态
过渡效果
按钮交互
hover
光标移入时的交互样式
press
光标按下时的交互样式
focus
聚焦状态
selected
选中状态
disabled
禁用状态
事件处理
on() / once()
监听事件
简洁模式
监听单个事件
监听多个事件
数组形式
字符串形式
只监听一次事件
off()
移除监听单个事件
移除监听多个事件
数组形式
字符串形式
emit()
派发自定义事件
模拟派发交互事件
命名
自定义事件名称
捕获/冒泡
监听捕获事件
移除捕获事件
事件流
阻止事件流传递
立即阻止事件流传递
模拟交互
模拟点击事件
模拟 drag 事件
模拟缩放事件
模拟平移事件
模拟旋转事件
🐆 动画
动画
animation
动画样式
入场和出场动画
摇摆动画
颜色过渡
关键帧动画
虚线箭头动画
animate()
动画方法
摇摆动画
颜色过渡
关键帧动画
过渡
transition
过渡效果
按钮交互
运动路径
motionPath
运动路径
沿路径运动
motion
运动路径
自身描边动画
getMotionTotal()
getMotionPoint()
🌴 高级
限制拖动范围
dragBounds
限制元素拖动范围
在 Frame 内拖动
强制渲染
forceUpdate()
forceRender()
nextRender()
查找拾取
find()
查找功能
通过 id 查找
通过 innerId 查找
通过 className 查找
通过 tag 查找
通过 自定义函数 查找
findOne()
查找单个元素
通过 id 查找
通过 innerId 查找
通过 className 查找
通过 tag 查找
通过 自定义函数 查找
pick()
通过 point 拾取元素
自定义属性
changeAttr()
修改元素属性
修改文本默认填充色为红色
addAttr()
新增元素属性
为文本新增一个 float 属性
为文本新增一个 dataType 类型的属性
常用功能
🌲 事件
交互事件
PointerEvent
监听点击事件
多种点击事件同时只触发一个
同时派发多种点击事件
DragEvent
监听拖拽事件
画笔工具示例
DropEvent
监听拖放事件
SwipeEvent
监听滑动事件
MoveEvent
监听平移交互事件
ZoomEvent
监听缩放交互事件
RotateEvent
监听旋转交互事件
KeyEvent
元素事件
ImageEvent
监听图片事件
加载成功
监听 fill 图片事件
加载成功
监听图片事件
加载失败
ChildEvent
监听 Child 事件
PropertyEvent
监听元素属性事件
平台事件
LeaferEvent
监听 Leafer 事件
ResizeEvent
监听 Resize 事件
RenderEvent
请求渲染/动画帧
监听渲染事件
LayoutEvent
监听布局事件
WatchEvent
监听观察事件
基础事件
Event
阻止事件流传递
立即阻止事件流传递
UIEvent
🌷 实用
数学
Point
Bounds
Matrix
列表
LeafList
🛠 开发
调试模式
开发插件
插件
✂️ 图形编辑器
安装插件
图形编辑器
简洁创建
实现原理
Editor
图形编辑器
editable
显示旋转控制点
添加底部固定按钮
显示中间控制点，并修改样式
选中元素事件
手动旋转元素
创建图形
EditBox
EditPoint
编辑器配置
图形编辑器
显示所有控制点
快速修改样式
自定义样式
按中心点缩放
固定比例缩放
禁用旋转
禁用缩放
编辑器事件
EditorEvent
EditorMoveEvent
EditorScaleEvent
EditorRotateEvent
EditorSkewEvent
EditorGroupEvent
InnerEditorEvent
编辑工具
EditTool
注册
控制点
使用
图形编辑器
自定义编辑工具
内部编辑器
InnerEditor
注册
控制点
使用
图形编辑器
自定义内部编辑工具
🫐 官方插件
视口
视图控制
安装
视图控制
缩放到合适大小
zoom
视图控制
放大
缩小
指定缩放值
缩放到合适大小
让画布内容居中显示
聚焦到指定元素
聚焦到指定元素 - 不缩放画布，只进行位移
聚焦到指定区域
滚动条
安装
滚动条
默认主题
ScrollBar
滚动条
默认主题
暗黑主题
自定义样式
修改主题
设置画布 padding
箭头
安装
箭头样式
角度箭头
Arrow
箭头样式
角度箭头
角度箭头 - 箭头变得更大一些
角度箭头 - strokeCap变的平滑
角度箭头 - strokeJoin变的平滑
角度箭头 - 箭头变得平滑
单边角度箭头
标准箭头
标准箭头 - 箭头都变得平滑
三角形箭头
反向三角形箭头
圆形箭头
圆形箭头（线性）
方形箭头
方形箭头（线性）
菱形箭头
菱形箭头（线性）
标注箭头
动画样式
虚线箭头动画
HTML
安装
HTMLText
HTML 文本
自动布局
安装
自动布局
Flow
自动布局
文本编辑
安装
文本编辑器
TextEditor
动画
安装
创建动画实例
颜色过渡
Animate
创建动画实例
摇摆动画
创建动画实例
颜色过渡
关键帧动画
Robot 游戏
安装
创建 Robot 游戏元素
Robot
创建 Robot 游戏元素
交互状态
交互状态
按钮效果
查找元素
导出元素
color
resize
TypeScript
JavaScript