Code
Both
Preview
  Sample Code
Scenes
🎨 Graphic Editing
Transparent Canvas
Create Shapes
Duplicate Elements
Pen Tool
Drag to Create
Add to Tree Layer
Add to Frame
Context Menu
🎮️ Mini Games
Blooming Heart
Finishing the Dragon
Quick Start
🧬 Basics
Create Leafer Engine
创建固定宽高的 Leafer
window
div
canvas
id
创建自适应布局的 Leafer
full
padding-left
padding
创建自动生长的 Leafer
grow
grow-width
grow-height
Create Elements
创建元素
标准创建
简洁创建
使用 tag
使用 JSON (Leafer)
创建 Rect
绘制不同圆角的矩形 (Leafer)
创建 Ellipse
绘制扇形圆环 (Leafer)
创建 Line
绘制横线 (Leafer)
创建 Polygon
绘制圆角六边形 (Leafer)
创建 Star
绘制圆角星形 (Leafer)
创建 Path
标准创建 (Leafer)
创建 Pen
画出不同颜色的形状 (Leafer)
创建Image
使用默认宽高 (Leafer)
Image 加载 SVG
使用svg字符串
创建 Canvas
使用 context 绘制 (Leafer)
创建 Text
标准创建 (Leafer)
创建 Group
通过 add 方法添加 (Leafer)
创建 Box
标准创建 (Leafer)
创建 Frame
标准创建 (Leafer)
Set Styles
初始化元素样式
修改样式
标准修改
简洁修改
重置样式
修改对象
修改数据
使用 JSON (Leafer)
线性渐变填充
默认方向 (Leafer)
线性渐变描边
默认方向 (Leafer)
描边样式
外阴影
drop-shadow (Leafer)
内阴影 (Leafer)
遮罩功能
将圆环设为遮罩 (Leafer)
擦除功能
将圆环设为橡皮擦 (Leafer)
隐藏元素 (Leafer)
设置不透明度 (Leafer)
原点
围绕原点旋转 45 度 (Leafer)
around 属性
围绕坐标(50,50) 为中心旋转 45 度 (Leafer)
Event Handling
监听事件
通过 on 方法监听
通过 event 对象监听
Remove Elements
移除元素
标准移除
条件移除
销毁移除
清空元素
销毁引擎
Export Elements
导出图片
导出文件 (Leafer)
导出高清图 (Leafer)
导出 Base64 编码数据 (Leafer)
同步导出 Base64 编码数据 (Leafer)
导出二进制数据 (Leafer)
绘制水印 (Leafer)
画面截图 (Leafer)
导出 JSON (Leafer)
Vue / React
Frontend Environment
Vue
React
HTML
Server-side Rendering
Nuxt.js
VitePress
Next.js
Component-based Development (Community Provided)
leafer-vue
🧲 Fun
Animation
动画样式
入场和出场动画 (Leafer)
颜色过渡 (Leafer)
关键帧动画 (Leafer)
虚线箭头动画
Interactive State
过渡效果
按钮交互 (Leafer)
自定义状态
切换状态 (Leafer)
Motion Path
运动路径
沿路径运动
自身描边动画
Robot Game Element
创建 Robot 游戏元素
Auto Layout
自动布局
Graphic Editor
App结构 - 图形编辑器
editor
实现原理
😎 Advanced
Create App Application
App结构 - 图形编辑器
editor
简化
实现原理
Zoom & Pan View
应用与引擎配置 - viewport 视口类型
App
Leafer
实现原理
应用与引擎配置 - custom 视口类型
App
Leafer
实现原理
应用与引擎配置 - design 视口类型
App
Leafer
实现原理
应用与引擎配置 - document 视口类型
App
Leafer
实现原理
Coordinate Transformation
画笔工具示例
拖拽创建图形
添加到 tree
添加到 Frame
Get Bounding Box
图形编辑器
创建图形 - 进入绘制模式
元素包围盒
检测 rect2 是否与 rect1 碰撞
Partial Rendering
应用与引擎配置 - 关闭局部渲染
App
Leafer
应用与引擎配置 - 关闭局部布局
App
Leafer
Lifecycle
Element Lifecycle
监听元素生命周期事件
通过 event 对象监听
通过 on 监听
Engine Lifecycle
监听 Leafer 事件
Render Lifecycle
监听渲染事件
App & Engine Configuration
Base
应用与引擎配置 - 手动启动应用
Leafer
App
应用与引擎配置 - 关闭局部渲染
Leafer
App
Viewport Type
应用与引擎配置 - block 视口类型
Leafer
Canvas
应用与引擎配置 - 关闭交互事件
Leafer
App
Pointer Interaction
应用与引擎配置 - 取消光标碰撞半径
Leafer
App
应用与引擎配置 - 获取穿透路径
Leafer
App
Touch Interaction
应用与引擎配置 - 阻止移动端默认滑动页面事件
Leafer
App
Multi-touch
应用与引擎配置 - 禁用多点触屏功能
Leafer
App
应用与引擎配置 - 锁定单一手势操作
Leafer
App
Wheel Interaction
应用与引擎配置 - 鼠标滚动直接缩放视图
App
Leafer
Pan View
应用与引擎配置 - 拖拽时直接平移视图
App
Leafer
应用与引擎配置 - 拖拽至边界时自动平移视图
App
Leafer
Zoom View
应用与引擎配置 - 控制视图缩放范围
App
Leafer
Element Reference
🍉 App & Engine
App
App结构 - 图形编辑器
editor
简化
实现原理
图形编辑器
创建图形 - 进入绘制模式
Leafer
应用与引擎配置 - 手动启动应用
Leafer
创建固定宽高的 Leafer
window
div
canvas
id
创建自适应布局的 Leafer
full
padding-left
padding
创建自动生长的 Leafer
grow
grow-width
grow-height
单独指定缩放层
Leafer
App
监听浏览器 unload 事件自动销毁
监听 Leafer 事件 - 缩放变化事件
🥥 Group Elements
Group
创建 Group
通过 add 方法添加 (Leafer)
通过 add 方法添加 (App)
通过 children 属性添加 (Leafer)
通过 children 属性添加 (App)
创建元素
使用 tag
移除元素
条件移除
Box
创建 Box
标准创建 (Leafer)
标准创建 (App)
隐藏超出宽高的内容 (Leafer)
隐藏超出宽高的内容 (App)
自适应文本 (Leafer)
自适应文本 (App)
Frame
创建 Frame
标准创建 (Leafer)
标准创建 (App)
🍊 Elements
Rect
创建 Rect
绘制矩形 (Leafer)
绘制矩形 (App)
绘制圆角矩形 (Leafer)
绘制圆角矩形 (App)
绘制不同圆角的矩形 (Leafer)
绘制不同圆角的矩形 (App)
Ellipse
创建 Ellipse
绘制圆 (Leafer)
绘制圆 (App)
绘制圆环 (Leafer)
绘制圆环 (App)
绘制扇形圆环 (Leafer)
绘制扇形圆环 (App)
绘制扇形 (Leafer)
绘制扇形 (App)
绘制圆角弧线 (Leafer)
绘制圆角弧线 (App)
绘制带圆角的扇形圆环 (Leafer)
绘制带圆角的扇形圆环 (App)
绘制椭圆 (Leafer)
绘制椭圆 (App)
Line
创建 Line
绘制横线 (Leafer)
绘制横线 (App)
绘制到目标点的直线 (Leafer)
绘制到目标点的直线 (App)
绘制斜线 (Leafer)
绘制斜线 (App)
绘制竖线 (Leafer)
绘制竖线 (App)
绘制折线 (Leafer)
绘制折线 (App)
绘制圆角折线 (Leafer)
绘制圆角折线 (Leafer)
绘制曲线 (Leafer)
绘制曲线 (App)
绘制 0.2 曲率的曲线 (Leafer)
绘制 0.2 曲率的曲线 (App)
绘制趋势图 (Leafer)
绘制趋势图 (App)
Polygon
创建 Polygon
绘制三角形 (Leafer)
绘制三角形 (App)
绘制五边形 (Leafer)
绘制五边形 (App)
绘制圆角六边形 (Leafer)
绘制圆角六边形 (App)
绘制自由多边形 (Leafer)
绘制自由多边形 (App)
绘制平滑多边形 (Leafer)
绘制平滑多边形 (App)
绘制 0.2 曲率的平滑多边形 (Leafer)
绘制 0.2 曲率的平滑多边形 (App)
绘制趋势图 (Leafer)
绘制趋势图 (App)
Star
创建 Star
绘制车标 (Leafer)
绘制车标 (App)
绘制星光 (Leafer)
绘制星光 (App)
绘制五角星 (Leafer)
绘制五角星 (App)
绘制圆角星形 (Leafer)
绘制圆角星形 (App)
Path
创建 Path
标准创建 (Leafer)
标准创建 (App)
缠绕路径 (Leafer)
缠绕路径 (App)
使用 pen 绘制 (Leafer)
使用 pen 绘制 (App)
使用路径数据 (Leafer)
使用路径数据 (App)
Pen
创建 Pen
画出不同颜色的形状 (Leafer)
画出不同颜色的形状 (App)
画曲线 (Leafer)
画曲线 (App)
结合图形组件 (Leafer)
结合图形组件 (App)
结合图片 (Leafer)
结合图片 (App)
结合文字 (Leafer)
结合文字 (App)
Image
等待图片加载完，再添加到引擎中
创建Image
使用默认宽高 (Leafer)
使用默认宽高 (App)
固定宽度，自适应高度 (Leafer)
固定宽度，自适应高度 (App)
固定高度，自适应宽度 (Leafer)
固定高度，自适应宽度 (App)
图片占位符 (Leafer)
图片占位符 (App)
使用 fill 代替 url (Leafer)
使用 fill 代替 url (App)
使用 Rect 代替 Image (Leafer)
使用 Rect 代替 Image (App)
监听图片事件
加载成功
加载失败
SVG
Image 加载 SVG
使用url
使用svg字符串
Rect 填充 SVG
使用svg字符串
Canvas
创建 Canvas
使用 context 绘制 (Leafer)
使用 context 绘制 (App)
使用图形元素绘制 (Leafer)
使用图形元素绘制 (App)
Text
创建 Text
标准创建 (Leafer)
标准创建 (App)
带背景框样式 (Leafer)
带背景框样式 (App)
创建 Box
自适应文本 (Leafer)
自适应文本 (App)
创建 Text
占位符文本 (Leafer)
占位符文本 (App)
动画样式
文本count动画 (Leafer)
打字机动画 (Leafer)
删除文本动画 (Leafer)
UI
🥝 Custom Elements
Base
Register Element
自定义元素
注册元素
Register Data
自定义元素
定义数据
Add Attribute
自定义元素
添加属性
Add Method
自定义元素
添加方法
Advanced
Extend Element
自定义元素
继承 Rect
继承 Pen
继承 Group
Draw Path
自定义元素
自定义线条
自定义图形
context
自定义元素
使用 canvas.context 自定义图形
Common Element Features
🎞️ Data
id / name
id
查找单个元素
通过 id 查找 (Leafer)
通过 id 查找 (App)
tag
查找功能
通过 tag 查找 (Leafer)
通过 tag 查找 (App)
name
查找功能
通过 name 查找 (Leafer)
通过 name 查找 (App)
className
查找功能
通过 className 查找 (Leafer)
通过 className 查找 (App)
innerId
查找单个元素
通过 innerId 查找 (Leafer)
通过 innerId 查找 (App)
innerName
显示矩形元素的 innerName (Leafer)
显示矩形元素的 innerName (App)
parent / leafer
parent
等待元素被添加到父元素中时，执行回调 (Leafer)
等待元素被添加到父元素中时，执行回调 (App)
leafer
等待元素被添加到引擎中时，执行回调 (Leafer)
等待元素被添加到引擎中时，执行回调 (App)
Data / Clone
data
通过 set() 修改属性
无动画过渡 (Leafer)
无动画过渡 (App)
有动画过渡 (Leafer)
有动画过渡 (App)
proxyData
clone()
克隆元素 (Leafer)
克隆元素 (App)
Path Data
getPath()
获取元素的数字路径 (Leafer)
获取元素的数字路径 (App)
getPathString()
获取元素的字符串路径 (Leafer)
获取元素的字符串路径 (App)
path
Rect 转路径优先模式
使用 pen 绘制 (Leafer)
使用 pen 绘制 (App)
使用 path 属性 (Leafer)
使用 path 属性 (App)
Import / Export
export()
导出图片
导出文件 (Leafer)
导出文件 (App)
导出高清图 (Leafer)
导出高清图 (App)
导出 Base64 编码数据 (Leafer)
导出 Base64 编码数据 (App)
导出二进制数据 (Leafer)
导出二进制数据 (App)
同步导出 Base64 编码数据 (Leafer)
同步导出 Base64 编码数据 (App)
导出二进制数据 (Leafer)
导出二进制数据 (App)
绘制水印 (Leafer)
绘制水印 (App)
导出画布 (Leafer)
导出画布 (App)
裁剪元素 (Leafer)
裁剪元素 (App)
画面截图 (Leafer)
画面截图 (App)
添加一个自定义异步任务（导出图片时会等待此任务执行完再导出）
toJSON()
导出 JSON (Leafer)
创建元素
使用 JSON (Leafer)
使用 JSON (App)
Leafer 导入 JSON (Leafer)
Leafer 导入 JSON (App)
修改数据
使用 JSON (Leafer)
使用 JSON (App)
Remove / Destroy
remove()
移除元素
标准移除
条件移除
destroy()
移除元素
销毁移除
清空元素
销毁引擎
📐 Layout
Position / Scale / Rotation
position
通过 move() 移动元素
无动画过渡 (Leafer)
无动画过渡 (App)
有动画过渡 (Leafer)
有动画过渡 (App)
size
创建 Rect
绘制矩形 (Leafer)
绘制矩形 (App)
调整 Group 大小，不使用 scale 属性 (Leafer)
调整 Group 大小，不使用 scale 属性 (App)
scale
通过 scaleOf() 缩放元素
无动画过渡 (Leafer)
无动画过渡 (App)
有动画过渡 (Leafer)
有动画过渡 (App)
scaleFixed
scaleFixed
元素不随画面放大 (Leafer)
元素不随画面放大 (App)
画布缩放到0.5时才跟随缩小 (Leafer)
画布缩放到0.5时才跟随缩小 (App)
flip()
通过 flip() 镜像元素
无动画过渡 (Leafer)
无动画过渡 (App)
有动画过渡 (Leafer)
有动画过渡 (App)
rotation
通过 rotateOf() 旋转元素
无动画过渡 (Leafer)
无动画过渡 (App)
有动画过渡 (Leafer)
有动画过渡 (App)
skew
通过 skewOf() 倾斜元素
无动画过渡 (Leafer)
无动画过渡 (App)
有动画过渡 (Leafer)
无动画过渡 (App)
Offset / resize
offset
偏移元素 (Leafer)
偏移元素 (App)
resize
调整 Group 大小，不使用 scale 属性 (Leafer)
调整 Group 大小，不使用 scale 属性 (Leafer)
图形编辑器
添加底部固定按钮
Around Center
origin
原点
设置原点在中心 (Leafer)
设置原点在中心 (App)
围绕原点缩放 1.5 倍 (Leafer)
围绕原点缩放 1.5 倍 (App)
围绕原点旋转 45 度 (Leafer)
围绕原点旋转 45 度 (App)
围绕原点倾斜 45 度 (Leafer)
围绕原点倾斜 45 度 (App)
around
around 属性
围绕坐标 (50,50) 为中心进行绘制 (Leafer)
围绕坐标 (50,50) 为中心进行绘制 (App)
围绕坐标(50,50) 为中心缩放 1.5 倍 (Leafer)
围绕坐标(50,50) 为中心缩放 1.5 倍 (App)
围绕坐标(50,50) 为中心旋转 45 度 (Leafer)
围绕坐标(50,50) 为中心旋转 45 度 (App)
围绕坐标(50,50) 为中心倾斜 45 度 (Leafer)
围绕坐标(50,50) 为中心倾斜 45 度 (App)
around 坐标点 (50,50) 在矩形的右下角 (Leafer)
around 坐标点 (50,50) 在矩形的右下角 (App)
Bounds / Transform
bounds
元素包围盒
检测 rect2 是否与 rect1 碰撞
transform
Coordinate Conversion
Coordinate Conversion
坐标转换
世界坐标转内部坐标 (Leafer)
内部坐标转世界坐标 (Leafer)
世界坐标中的移动距离 转 内部坐标移动距离 (Leafer)
拖拽创建图形
添加到 tree
添加到 Frame
Quick Conversion
快速坐标转换
世界坐标转本地坐标
世界坐标中的移动距离 转 本地坐标移动距离
Stack / Placement
zIndex
调整元素在父元素中的层叠顺序 (Leafer)
调整元素在父元素中的层叠顺序 (App)
dropTo()
监听拖放事件
🏼 Appearance
Opacity / Visibility
opacity
设置不透明度 (Leafer)
设置不透明度 (App)
visible
隐藏元素 (Leafer)
隐藏元素 (App)
隐藏元素，且不占空间 (Leafer)
隐藏元素，且不占空间 (App)
Fill / Stroke
fill
纯色填充 (Leafer)
纯色填充 (App)
线性渐变填充
默认方向 (Leafer)
默认方向 (App)
图案填充
默认 cover 覆盖模式 (Leafer)
默认 cover 覆盖模式 (App)
多个不同类型的填充叠加
线性渐变填充 + 图案填充 (Leafer)
线性渐变填充 + 图案填充 (App)
stroke
纯色描边 (Leafer)
纯色描边 (App)
线性渐变描边
默认方向 (Leafer)
默认方向 (App)
图案描边
默认 cover 覆盖模式 (Leafer)
默认 cover 覆盖模式 (App)
多个不同类型的描边叠加
线性渐变描边 + 图案描边 (Leafer)
线性渐变描边 + 图案描边 (App)
虚线描边 (Leafer)
虚线描边 (App)
Gradient / Image
linear
线性渐变填充
默认方向 (Leafer)
默认方向 (App)
控制方向 (Leafer)
控制方向 (App)
设置不透明度 (Leafer)
设置不透明度 (App)
radial
径向渐变填充
默认方向 (Leafer)
默认方向 (App)
控制方向 (Leafer)
控制方向 (App)
拉伸渐变 (Leafer)
拉伸渐变 (App)
设置不透明度 (Leafer)
设置不透明度 (App)
angular
角度渐变填充
默认方向 (Leafer)
默认方向 (App)
控制方向 (Leafer)
控制方向 (App)
拉伸渐变 (Leafer)
拉伸渐变 (App)
设置不透明度 (Leafer)
设置不透明度 (App)
solid
纯色填充 (Leafer)
纯色填充 (App)
image
图案填充
默认 cover 覆盖模式 (Leafer)
默认 cover 覆盖模式 (App)
cover 覆盖模式旋转 90 度 (Leafer)
cover 覆盖模式旋转 90 度 (App)
fit 适应模式 (Leafer)
fit 适应模式 (App)
stretch 拉伸模式 (Leafer)
stretch 拉伸模式 (App)
clip 裁剪模式 (Leafer)
clip 裁剪模式 (App)
repeat 平铺模式 (Leafer)
repeat 平铺模式 (App)
repeat 平铺模式旋转 90 度 (Leafer)
repeat 平铺模式旋转 90 度 (App)
图形编辑器
背景为透明方格的画板
Inner / Outer Shadow
shadow
外阴影
drop-shadow (Leafer)
drop-shadow (App)
box-shadow (Leafer)
box-shadow (App)
图形编辑器
背景为透明方格的画板
innerShadow
内阴影 (Leafer)
内阴影 (App)
Dim / Highlight
dim
突出主体、淡化其他元素
Leafer
App
突出显示并置顶渲染，淡化其他元素
leafer
App
bright
突出显示，置顶渲染元素
leafer
App
突出显示并置顶渲染，淡化其他元素
leafer
App
Clip / Erase
clip
创建 Box
隐藏超出宽高的内容 (Leafer)
隐藏超出宽高的内容 (App)
图案填充
clip 裁剪模式 (Leafer)
clip 裁剪模式 (App)
mask
遮罩功能
将圆环设为遮罩 (Leafer)
将圆环设为遮罩 (App)
将半透明的圆环设为遮罩 (Leafer)
将半透明的圆环设为遮罩 (App)
将圆形组设为遮罩 (Leafer)
将圆形组设为遮罩 (App)
将路径设为遮罩 (Leafer)
将路径设为遮罩 (App)
快速设置遮罩 (Leafer)
快速设置遮罩 (App)
eraser
擦除功能
将圆环设为橡皮擦 (Leafer)
将圆环设为橡皮擦 (App)
将半透明的圆环设为橡皮擦 (Leafer)
将半透明的圆环设为橡皮擦 (App)
将圆形组设为橡皮擦 (Leafer)
将圆形组设为橡皮擦 (App)
将路径设为橡皮擦 (Leafer)
将路径设为橡皮擦 (App)
Blend Mode
blendMode
混合模式
multiply 正片叠底 (Leafer)
multiply 正片叠底 (App)
darken 变暗 (Leafer)
darken 变暗 (App)
color-burn 颜色加深 (Leafer)
color-burn 颜色加深 (App)
lighten 变亮 (Leafer)
lighten 变亮 (App)
color-dodge 颜色减淡 (Leafer)
color-dodge 颜色减淡 (App)
screen 只显示新图形 (Leafer)
screen 只显示新图形 (App)
overlay 叠加 (Leafer)
overlay 叠加 (App)
hard-light 强光 (Leafer)
hard-light 强光 (App)
soft-light 柔光 (Leafer)
soft-light 柔光 (App)
difference 差集 (Leafer)
difference 差集 (App)
exclusion 排除 (Leafer)
exclusion 排除 (App)
hue 色相 (Leafer)
hue 色相 (App)
saturation 饱和度 (Leafer)
saturation 饱和度 (App)
color 颜色 (Leafer)
color 颜色 (App)
luminosity 明度 (Leafer)
luminosity 明度 (App)
source-over 在现有画布上绘制新图形 (Leafer)
source-over 在现有画布上绘制新图形 (App)
source-in 仅在新形状和目标画布重叠的地方绘制新形状，其他的都是透明的 (Leafer)
source-in 仅在新形状和目标画布重叠的地方绘制新形状，其他的都是透明的 (App)
source-out 在不与现有画布内容重叠的地方绘制新图形 (Leafer)
source-out 在不与现有画布内容重叠的地方绘制新图形 (App)
source-atop 只在与现有画布内容重叠的地方绘制新图形 (Leafer)
source-atop 只在与现有画布内容重叠的地方绘制新图形 (App)
destination-over 在现有画布内容的后面绘制新的图形 (Leafer)
destination-over 在现有画布内容的后面绘制新的图形 (App)
destination-in 仅保留现有画布内容和新形状重叠的部分,其他的都是透明的 (Leafer)
destination-in 仅保留现有画布内容和新形状重叠的部分,其他的都是透明的 (App)
destination-out 仅保留现有画布内容和新形状不重叠的部分 (Leafer)
destination-out 仅保留现有画布内容和新形状不重叠的部分 (App)
destination-atop 仅保留现有画布内容和新形状重叠的部分，新形状是在现有画布内容的后面绘制的 (Leafer)
destination-atop 仅保留现有画布内容和新形状重叠的部分，新形状是在现有画布内容的后面绘制的 (App)
xor 形状在重叠处变为透明，并在其他地方正常绘制 (Leafer)
xor 形状在重叠处变为透明，并在其他地方正常绘制 (App)
copy 只显示新图形 (Leafer)
copy 只显示新图形 (App)
🖱 Interaction
Interactivity
hittable
停用元素交互事件 (Leafer)
停用元素交互事件 (App)
hitChildren
停用子元素交互事件 (Leafer)
停用子元素交互事件 (App)
hitSelf
hitFill
交互功能
不可见的 fill 也能响应交互 (Leafer)
不可见的 fill 也能响应交互 (App)
hitStroke
交互功能
只有 stroke 能响应交互 (Leafer)
只有 stroke 能响应交互 (App)
Edit / Drag
editable
图形编辑器
editConfig
editOuter
editInner
editable
元素单独配置hover样式
draggable
Cursor Style
cursor
光标样式
覆盖系统光标 (Leafer)
设置光标 (Leafer)
设置光标 (App)
设置图片光标 (Leafer)
设置图片光标 (App)
Interaction State
state
自定义状态
切换状态 (Leafer)
切换状态 (App)
过渡效果
按钮交互 (Leafer)
按钮交互 (App)
hover
光标移入时的交互样式 (Leafer)
光标移入时的交互样式 (App)
press
光标按下时的交互样式 (Leafer)
光标按下时的交互样式 (App)
focus
聚焦状态 (Leafer)
聚焦状态 (App)
selected
选中状态 (Leafer)
选中状态 (App)
disabled
禁用状态 (Leafer)
禁用状态 (App)
Event Handling
on() / once()
监听事件
简洁模式
监听单个事件
监听多个事件
数组形式
字符串形式
只监听一次事件
off()
移除监听单个事件
移除监听多个事件
数组形式
字符串形式
emit()
派发自定义事件
模拟派发交互事件
Naming
自定义事件名称
Capture / Bubble
监听捕获事件
移除捕获事件
事件流
阻止事件流传递
立即阻止事件流传递
Simulate Interaction
模拟点击事件
模拟 drag 事件
模拟缩放事件
模拟平移事件
模拟旋转事件
🐆 Animation
Animation
animation
动画样式
入场和出场动画 (Leafer)
入场和出场动画 (App)
摇摆动画 (Leafer)
摇摆动画 (App)
颜色过渡 (Leafer)
颜色过渡 (App)
关键帧动画 (Leafer)
关键帧动画 (App)
虚线箭头动画
animate()
动画方法
摇摆动画 (Leafer)
摇摆动画 (App)
颜色过渡 (Leafer)
颜色过渡 (App)
关键帧动画 (Leafer)
关键帧动画 (App)
Transition
transition
过渡效果
按钮交互 (Leafer)
按钮交互 (App)
Motion Path
motionPath
运动路径
沿路径运动
motion
运动路径
自身描边动画
getMotionTotal()
画龙点睛
getMotionPoint()
画龙点睛
🌴 Advanced
Limit Drag Range
dragBounds
限制元素拖动范围
在 Frame 内拖动 (Leafer)
在 Frame 内拖动 (App)
Force Render
forceUpdate()
forceRender()
nextRender()
Find & Pick
find()
查找功能
通过 id 查找 (Leafer)
通过 id 查找 (App)
通过 innerId 查找 (Leafer)
通过 innerId 查找 (App)
通过 className 查找 (Leafer)
通过 className 查找 (App)
通过 tag 查找 (Leafer)
通过 tag 查找 (App)
通过 自定义函数 查找 (Leafer)
通过 自定义函数 查找 (App)
findOne()
查找单个元素
通过 id 查找 (Leafer)
通过 id 查找 (App)
通过 innerId 查找 (Leafer)
通过 innerId 查找 (App)
通过 className 查找 (Leafer)
通过 className 查找 (App)
通过 tag 查找 (Leafer)
通过 tag 查找 (App)
通过 自定义函数 查找 (Leafer)
通过 自定义函数 查找 (App)
pick()
通过 point 拾取元素 (Leafer)
通过 point 拾取元素 (App)
Custom Attributes
changeAttr()
修改元素属性
修改文本默认填充色为红色 (Leafer)
修改文本默认填充色为红色 (App)
修改文本默认填充色为可变颜色 (Leafer)
修改文本默认填充色为可变颜色 (App)
addAttr()
新增元素属性
为文本新增一个 float 属性 (Leafer)
为文本新增一个 float 属性 (App)
为文本新增一个可变 float 属性 (Leafer)
为文本新增一个可变 float 属性 (App)
为文本新增一个 dataType 类型的属性 (Leafer)
为文本新增一个 dataType 类型的属性 (App)
Common Features
🌲 Events
Interaction Events
PointerEvent
监听点击事件
多种点击事件同时只触发一个
同时派发多种点击事件
图形编辑器
右键菜单
DragEvent
监听拖拽事件
画笔工具示例
DropEvent
监听拖放事件
SwipeEvent
监听滑动事件
MoveEvent
监听平移交互事件
ZoomEvent
监听缩放交互事件
RotateEvent
监听旋转交互事件
KeyEvent
Element Events
ImageEvent
监听图片事件
加载成功
监听 fill 图片事件
加载成功
监听图片事件
加载失败
ChildEvent
监听 Child 事件
PropertyEvent
监听元素属性事件
BoundsEvent
监听 Bounds 事件
resize
Platform Events
LeaferEvent
监听 Leafer 事件
监听 Leafer 事件 - 缩放变化事件
ResizeEvent
请求渲染/动画帧
监听渲染事件
RenderEvent
请求渲染/动画帧
监听渲染事件
LayoutEvent
监听布局事件
WatchEvent
监听观察事件
Basic Events
Event
阻止事件流传递
立即阻止事件流传递
UIEvent
🌷 Utilities
Math
Point
Bounds
Matrix
List
LeafList
Resources
Resource
等待图片加载完，再添加到引擎中
图片 url
原始图片对象转 url
原始 canvas 对象转 url
跨平台 LeaferCanvas 对象转 url
添加一个自定义异步任务（导出图片时会等待此任务执行完再导出）
添加一个自定义队列任务（防止阻塞主线程渲染）
🛠 Development
Debug Mode
Develop Plugins
Plugins
🎨 Graphic Editor
Editor
图形编辑器
简洁创建
实现原理
editable
显示旋转控制点
显示中间控制点，并修改样式
添加底部固定按钮
选中元素事件
手动旋转元素
创建图形 - 进入绘制模式
背景为透明方格的画板
手势操作元素
Editor Properties
State
图形编辑器
创建图形 - 进入绘制模式
List
图形编辑器
选中的元素列表
Display Elements
图形编辑器
添加底部固定按钮
Editor Features
Select
图形编辑器
手动选择元素
Group
图形编辑器
手动编组元素
Inner Editing
图形编辑器
打开内部编辑器
Lock
图形编辑器
手动锁定元素
Z-Index
图形编辑器
变动层级 toTop()
Update
图形编辑器
更新编辑器
Transform
图形编辑器
手动旋转元素
Shortcuts
History
Editor Configuration
Base
图形编辑器
拖拽控制点修改字体大小，拖拽边框控制文本宽高
移动元素时隐藏编辑框
Events
图形编辑器
限制最小编辑尺寸 （resize 元素事件前置钩子函数）
限制最小编辑尺寸，且支持镜像操作 （resize 元素事件前置钩子函数）
按住alt键移动可复制元素
Style
图形编辑器
显示所有控制点
快速修改样式
自定义样式
显示旋转控制点
自定义 point 控制点功能类型
自定义 middlePoint 控制点功能类型
自定义 circle 控制点功能类型
拖拽控制点修改字体大小，拖拽边框控制文本宽高
突出显示，置顶渲染元素
App
突出显示并置顶渲染，淡化其他元素
App
突出主体、淡化其他元素
App
Button Group
图形编辑器
添加底部固定按钮
Cursor
Selection
Control
图形编辑器
按中心点缩放
固定比例缩放
Enable
图形编辑器
禁用旋转
禁用缩放
手势操作元素
Inner Editor
Editor Events
EditorEvent
图形编辑器
选中元素事件
EditorMoveEvent
图形编辑器
移动元素事件
EditorScaleEvent
图形编辑器
缩放元素事件（resize）
EditorRotateEvent
图形编辑器
旋转元素事件
EditorSkewEvent
图形编辑器
倾斜元素事件
EditorGroupEvent
图形编辑器
元素编组事件
InnerEditorEvent
图形编辑器
打开内部编辑器事件
Editing Tools
EditTool
Register
Control Points
Usage
图形编辑器
自定义编辑工具
Inner Editor
InnerEditor
Register
Control Points
Usage
图形编辑器
自定义内部编辑工具
🫧 Auto Layout
Flow
自动布局
自动布局 - 自动换行
沿 X 轴自动换行
自动布局 - 对齐内容
居中对齐
自动布局 - 子元素间距
固定数值的间距
自动布局 - 内边距
自动布局 - 子元素不加入自动布局
自动布局 - 自动宽度
自动宽度（填充剩余宽度）
自动布局 - 自动高度
自动高度（填充剩余高度）
自动布局
Layout Properties
Direction
自动布局 - 布局方向
沿 X 轴自动布局
沿 X 轴反向自动布局
沿 Y 轴自动布局
沿 Y 轴反向自动布局
Wrap
自动布局 - 自动换行
沿 X 轴自动换行
沿 X 轴自动换行（颠倒行顺序）
沿 Y 轴自动换行
沿 Y 轴自动换行（颠倒行顺序）
Alignment
自动布局 - 对齐内容
左上角对齐
顶部居中对齐
右上角对齐
左对齐
居中对齐
右对齐
左下角对齐
底部居中对齐
右下角对齐
居中对齐，且行内顶部对齐
居中对齐，且行内居中对齐
居中对齐，且行内底部对齐
Gap
自动布局 - 子元素间距
固定数值的间距
自动分配剩余空间为间距
自动分配剩余空间为间距（允许负值）
分别指定 X 轴和 Y 轴间距
自动分配 Y 轴剩余空间为间距
Padding
自动布局 - 内边距
Box Type
自动布局 - 盒类型
采用子元素的 box 盒类型布局
采用子元素的 stroke 盒类型布局（包含描边）
Child Properties
Include in Layout
自动布局 - 子元素不加入自动布局
Auto Width
自动布局 - 自动宽度
自动宽度（填充剩余宽度）
自动宽度和高度
Auto Height
自动布局 - 自动高度
自动高度（填充剩余高度）
自动布局 - 自动宽度
自动高度和宽度
Width Range
自动布局 - 自动宽度
限制宽度范围
Height Range
自动布局 - 自动高度
限制高度范围
Lock Ratio
自动布局 - 自动宽度
锁定宽高比例放大
🐆 Animation
Animate
创建动画实例
摇摆动画
创建动画实例
颜色过渡
关键帧动画
动画 - 通过 pause() 方法暂停动画
动画 - 通过 seek() 方法定位跳转动画
数值（秒数）
动画 - 通过 on() 监听动画事件
event（animate）
event（Animate）
Animation Options
Easing
动画 - 缓动方式
ease（animation）
ease（transition）
ease（set）
ease（animate）
ease（Animate）
linear（animation）
linear（transition）
linear（set）
linear（animate）
linear（Animate）
back-in（animation）
back-in（transition）
back-in（set）
back-in（animate）
back-in（Animate）
elastic-out（animation）
elastic-out（transition）
elastic-out（set）
elastic-out（animate）
elastic-out（Animate）
bounce-out（animation）
bounce-out（transition）
bounce-out（set）
bounce-out（animate）
bounce-out（Animate）
cubic-bezier（animation）
cubic-bezier（transition）
ease（set）
ease（animate）
ease（Animate）
steps（animation）
steps（transition）
steps（set）
steps（animate）
steps（Animate）
Delay
动画 - 延迟执行
delay（animation）
delay（transition）
delay（set）
delay（animate）
delay（Animate）
Duration
动画 - 时长
duration（animation）
duration（transition）
duration（set）
duration（animate）
duration（Animate）
Speed
动画 - 以5倍速播放动画
speed（animation）
speed（transition）
speed（set）
speed（animate）
speed（Animate）
Reverse
动画 - 反向
reverse（animation）
reverse（transition）
reverse（set）
reverse（animate）
reverse（Animate）
Loop
动画 - 循环执行
loop（animation）
loop（transition）
loop（animate）
loop（animate）
loop（Animate）
动画 - 循环 2 次
loop（animation）
loop（transition）
loop（animate）
loop（animate）
loop（Animate）
动画 - 循环间隔
loopDelay（animation）
loopDelay（transition）
loopDelay（animate）
loopDelay（animate）
loopDelay（Animate）
动画 - 摇摆循环
swing（animation）
swing（transition）
swing（animate）
swing（Animate）
Ending Style
动画 - 动画结束时回到起始状态
from（animation）
from（transition）
from（set）
from（animate）
from（Animate）
动画 - 动画结束时保持结束状态
to（animation）
to（transition）
to（animate）
to（animate）
to（Animate）
Join Keyframes
动画 - 加入动画前的元素状态作为 from 关键帧
join（animation）
join（animate）
join（Animate）
Autoplay
动画 - 不自动播放，监听点击 rect 再播放
autoplay（animate）
autoplay（Animate）
Transition Attributes
动画 - 只有 x 属性参与动画过渡
attrs（animation）
attrs（transition）
attrs（set）
attrs（animate）
attrs（Animate）
Events
动画 - 监听动画事件
event（animation）
event（transition）
event（set）
event（animate）
event（Animate）
动画 - 通过 on() 监听动画事件
event（animate）
event（Animate）
Animation Properties
State
动画 - 打印动画完成状态
Timing
动画 - 打印动画已经播放的时长
Style
动画 - 打印动画当前状态样式
Animation Features
Play
动画 - 通过 play() 方法播放动画
Pause
动画 - 通过 pause() 方法暂停动画
Stop
动画 - 通过 stop() 方法停止并完成动画
Seek
动画 - 通过 seek() 方法定位跳转动画
数值（秒数）
百分比
kill
动画 - 通过 kill() 方法完成并销毁动画
Destroy
动画 - 通过 destroy() 方法销毁动画
Animation Events
AnimateEvent
动画 - 通过 on() 监听动画事件
event（Animate）
event（animate）
🫐 Official Plugins
Viewport
View Control
视图控制
放大
缩小
指定缩放值
缩放到合适大小
让画布内容居中显示
聚焦到指定元素
聚焦到指定元素 - 不缩放画布，只进行位移
聚焦到指定区域
Scrollbar
滚动条
默认主题
暗黑主题
自定义样式
修改主题
设置画布 padding
Arrow
箭头样式
角度箭头
角度箭头 - 箭头变得更大一些
角度箭头 - strokeCap变的平滑
角度箭头 - strokeJoin变的平滑
角度箭头 - 箭头变得平滑
单边角度箭头
标准箭头
标准箭头 - 箭头都变得平滑
三角形箭头
反向三角形箭头
圆形箭头
圆形箭头（线性）
方形箭头
方形箭头（线性）
菱形箭头
菱形箭头（线性）
标注箭头
动画样式
虚线箭头动画
箭头样式
箭头大小放大2倍
箭头增量旋转30度
自定义箭头样式
HTML
HTML 文本
Text Editing
文本编辑器
Motion Path
运动路径
沿路径运动
Robot
创建 Robot 游戏元素
Interactive State
交互状态
按钮效果 (Leafer)
Find Elements
Export Elements
Filter
自定义滤镜
blur 滤镜
color
resize
Highlight Elements
scale-fixed
box Elements
创建 ImageBox
标准创建 (App)
创建 EllipseBox
标准创建 (Leafer)
标准创建 (App)
创建 PolygonBox
标准创建 (App)
创建 StarBox
标准创建 (App)
创建 PathBox
标准创建 (App)
Path Corner
App.ts
Live Preview
Clear
TS
JS