Code
Both
Preview
官方 社区 征集
场景
🎨 图形编辑
画笔工具
拖拽创建
添加到 tree 层
添加到 Frame 中
右键菜单
🎮️ 小游戏
心花怒放
画龙点睛
快速入门
🧬 基础
创建 Leafer 引擎
创建固定宽高的 Leafer
window
div
canvas
id
创建自适应布局的 Leafer
full
padding-left
padding
创建自动生长的 Leafer
grow
grow-width
grow-height
创建元素
创建元素
标准创建
简洁创建
使用 tag
使用 JSON
创建 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)
设置样式
初始化元素样式
修改样式
标准修改
简洁修改
重置样式
修改对象
修改数据
使用 JSON
线性渐变填充
默认方向
线性渐变描边
默认方向
描边样式
外阴影
drop-shadow
内阴影
遮罩功能
将圆环设为遮罩
擦除功能
将圆环设为橡皮擦
隐藏元素
设置不透明度
原点
围绕原点旋转 45 度
around 属性
围绕坐标(50,50) 为中心旋转 45 度
事件处理
监听事件
通过 on 方法监听
通过 event 对象监听
移除元素
移除元素
标准移除
条件移除
销毁移除
清空元素
销毁引擎
导出元素
导出图片
导出文件
导出高清图
导出 Base64 编码数据
同步导出 Base64 编码数据
导出二进制数据
绘制水印
画面截图
导出 JSON
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
实现原理
转换坐标
画笔工具示例
拖拽创建图形
添加到 tree
添加到 Frame
获取包围盒
图形编辑器
创建图形
元素包围盒
检测 rect2 是否与 rect1 碰撞
局部渲染
应用与引擎配置 - 关闭局部渲染
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
元素参考
🍉 应用与引擎
App
App结构 - 图形编辑器
editor
简化
实现原理
Leafer
应用与引擎配置 - 手动启动应用
Leafer
创建固定宽高的 Leafer
window
div
canvas
id
创建自适应布局的 Leafer
full
padding-left
padding
创建自动生长的 Leafer
grow
grow-width
grow-height
单独指定缩放层
Leafer
App
监听浏览器 unload 事件自动销毁
🥥 组元素
Group
创建 Group
通过 add 方法添加 (Leafer)
通过 add 方法添加 (App)
通过 children 属性添加 (Leafer)
通过 children 属性添加 (App)
创建元素
使用 tag
移除元素
条件移除
Box
创建 Box
标准创建 (Leafer)
标准创建 (App)
隐藏超出宽高的内容 (Leafer)
隐藏超出宽高的内容 (App)
自适应文本 (Leafer)
自适应文本 (App)
Frame
创建 Frame
标准创建 (Leafer)
标准创建 (App)
🍊 元素
Rect
创建 Rect
绘制矩形 (Leafer)
绘制矩形 (App)
绘制圆角矩形 (Leafer)
绘制圆角矩形 (App)
绘制不同圆角的矩形 (Leafer)
绘制不同圆角的矩形 (App)
Ellipse
创建 Ellipse
绘制圆 (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 绘制
使用路径数据
Pen
创建 Pen
画出不同颜色的形状 (Leafer)
画出不同颜色的形状 (App)
画曲线 (Leafer)
画曲线 (App)
结合图形组件 (Leafer)
结合图形组件 (App)
结合图片 (Leafer)
结合图片 (App)
结合文字 (Leafer)
结合文字 (App)
Image
使用 Rect 代替 Image (Leafer)
使用 Rect 代替 Image (App)
创建Image
使用默认宽高 (Leafer)
使用默认宽高 (App)
固定宽度，自适应高度 (Leafer)
固定宽度，自适应高度 (App)
固定高度，自适应宽度 (Leafer)
固定高度，自适应宽度 (App)
图片占位符 (Leafer)
图片占位符 (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动画
打字机动画
删除文本动画
UI
🥝 自定义元素
基础
注册元素
自定义元素
注册元素
注册数据
自定义元素
定义数据
添加属性
自定义元素
添加属性
添加方法
自定义元素
添加方法
高级
继承元素
自定义元素
继承 Rect
继承 Pen
继承 Group
绘制路径
自定义元素
自定义线条
自定义图形
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 编码数据
导出二进制数据
同步导出 Base64 编码数据
导出二进制数据
绘制水印
导出画布
裁剪元素
画面截图
添加一个自定义异步任务（导出图片时会等待此任务执行完再导出）
toJSON()
导出 JSON
创建元素
使用 JSON
Leafer 导入 JSON
修改数据
使用 JSON
移除 / 销毁
remove()
移除元素
标准移除
条件移除
destroy()
移除元素
销毁移除
清空元素
销毁引擎
📐 布局
位置 / 缩放 / 旋转
position
通过 move() 移动元素
无动画过渡
有动画过渡
size
创建 Rect
绘制矩形 (Leafer)
调整 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
元素包围盒
检测 rect2 是否与 rect1 碰撞
transform
转换坐标
转换坐标
坐标转换
世界坐标转内部坐标
内部坐标转世界坐标
世界坐标中的移动距离 转 内部坐标移动距离
拖拽创建图形
添加到 tree
添加到 Frame
快速转换
快速坐标转换
世界坐标转本地坐标
世界坐标中的移动距离 转 本地坐标移动距离
层叠 / 放置
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
内阴影
淡化 / 突出
dim
突出主体、淡化其他元素（半透明）[leafer]
突出主体、淡化其他元素（半透明）[App]
裁剪 / 擦除
clip
创建 Box
隐藏超出宽高的内容 (Leafer)
图案填充
clip 裁剪模式
mask
遮罩功能
将圆环设为遮罩
将半透明的圆环设为遮罩
将圆形组设为遮罩
将路径设为遮罩
快速设置遮罩
eraser
擦除功能
将圆环设为橡皮擦
将半透明的圆环设为橡皮擦
将圆形组设为橡皮擦
将路径设为橡皮擦
混合模式
blendMode
混合模式
multiply 正片叠底
darken 变暗
color-burn 颜色加深
lighten 变亮
color-dodge 颜色减淡
screen 只显示新图形
overlay 叠加
hard-light 强光
soft-light 柔光
difference 差集
exclusion 排除
hue 色相
saturation 饱和度
color 颜色
luminosity 明度
source-over 在现有画布上绘制新图形
source-in 仅在新形状和目标画布重叠的地方绘制新形状，其他的都是透明的
source-out 在不与现有画布内容重叠的地方绘制新图形
source-atop 只在与现有画布内容重叠的地方绘制新图形
destination-over 在现有画布内容的后面绘制新的图形
destination-in 仅保留现有画布内容和新形状重叠的部分,其他的都是透明的
destination-out 仅保留现有画布内容和新形状不重叠的部分
destination-atop 仅保留现有画布内容和新形状重叠的部分，新形状是在现有画布内容的后面绘制的
xor 形状在重叠处变为透明，并在其他地方正常绘制
copy 只显示新图形
🖱 交互
可交互性
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 属性
为文本新增一个可变 float 属性
为文本新增一个 dataType 类型的属性
常用功能
🌲 事件
交互事件
PointerEvent
监听点击事件
多种点击事件同时只触发一个
同时派发多种点击事件
图形编辑器
右键菜单
DragEvent
监听拖拽事件
画笔工具示例
DropEvent
监听拖放事件
SwipeEvent
监听滑动事件
MoveEvent
监听平移交互事件
ZoomEvent
监听缩放交互事件
RotateEvent
监听旋转交互事件
KeyEvent
元素事件
ImageEvent
监听图片事件
加载成功
监听 fill 图片事件
加载成功
监听图片事件
加载失败
ChildEvent
监听 Child 事件
PropertyEvent
监听元素属性事件
BoundsEvent
监听 Bounds 事件
resize
平台事件
LeaferEvent
监听 Leafer 事件
ResizeEvent
监听 Resize 事件
RenderEvent
请求渲染/动画帧
监听渲染事件
LayoutEvent
监听布局事件
WatchEvent
监听观察事件
基础事件
Event
阻止事件流传递
立即阻止事件流传递
UIEvent
🌷 实用
数学
Point
Bounds
Matrix
列表
LeafList
资源
Resource
等待图片加载完，再添加到引擎中
图片 url
原始图片对象转 url
原始 canvas 对象转 url
跨平台 LeaferCanvas 对象转 url
添加一个自定义异步任务（导出图片时会等待此任务执行完再导出）
🛠 开发
调试模式
开发插件
插件
🎨 图形编辑器
Editor
图形编辑器
简洁创建
实现原理
editable
显示旋转控制点
显示中间控制点，并修改样式
添加底部固定按钮
选中元素事件
手动旋转元素
创建图形
编辑器属性
状态
图形编辑器
创建图形
列表
图形编辑器
选中的元素列表
显示元素
图形编辑器
添加底部固定按钮
编辑器功能
选择
图形编辑器
手动选择元素
编组
图形编辑器
手动编组元素
内部编辑
图形编辑器
打开内部编辑器
锁定
图形编辑器
手动锁定元素
层级
图形编辑器
变动层级 toTop()
更新
图形编辑器
更新编辑器
变换
图形编辑器
手动旋转元素
快捷键
历史记录
编辑器配置
基础
图形编辑器
拖拽控制点修改字体大小，拖拽边框控制文本宽高
移动元素时隐藏编辑框
事件
图形编辑器
限制最小编辑尺寸 （resize 元素事件前置钩子函数）
限制最小编辑尺寸，且支持镜像操作 （resize 元素事件前置钩子函数）
样式
图形编辑器
显示所有控制点
快速修改样式
自定义样式
显示旋转控制点
自定义 point 控制点功能类型
自定义 middlePoint 控制点功能类型
自定义 circle 控制点功能类型
拖拽控制点修改字体大小，拖拽边框控制文本宽高
按钮组
图形编辑器
添加底部固定按钮
光标
选择
控制
图形编辑器
按中心点缩放
固定比例缩放
启用
图形编辑器
禁用旋转
禁用缩放
内部编辑器
编辑器事件
EditorEvent
图形编辑器
选中元素事件
EditorMoveEvent
图形编辑器
移动元素事件
EditorScaleEvent
图形编辑器
缩放元素事件（resize）
EditorRotateEvent
图形编辑器
旋转元素事件
EditorSkewEvent
图形编辑器
倾斜元素事件
EditorGroupEvent
图形编辑器
元素编组事件
InnerEditorEvent
图形编辑器
打开内部编辑器事件
编辑工具
EditTool
注册
控制点
使用
图形编辑器
自定义编辑工具
内部编辑器
InnerEditor
注册
控制点
使用
图形编辑器
自定义内部编辑工具
🫧 自动布局
Flow
自动布局
自动布局 - 自动换行
沿 X 轴自动换行
自动布局 - 对齐内容
居中对齐
自动布局 - 子元素间距
固定数值的间距
自动布局 - 内边距
自动布局 - 子元素不加入自动布局
自动布局 - 自动宽度
自动宽度（填充剩余宽度）
自动布局 - 自动高度
自动高度（填充剩余高度）
自动布局
布局属性
布局方向
自动布局 - 布局方向
沿 X 轴自动布局
沿 X 轴反向自动布局
沿 Y 轴自动布局
沿 Y 轴反向自动布局
自动换行
自动布局 - 自动换行
沿 X 轴自动换行
沿 X 轴自动换行（颠倒行顺序）
沿 Y 轴自动换行
沿 Y 轴自动换行（颠倒行顺序）
对齐
自动布局 - 对齐内容
左上角对齐
顶部居中对齐
右上角对齐
左对齐
居中对齐
右对齐
左下角对齐
底部居中对齐
右下角对齐
居中对齐，且行内顶部对齐
居中对齐，且行内居中对齐
居中对齐，且行内底部对齐
间距
自动布局 - 子元素间距
固定数值的间距
自动分配剩余空间为间距
自动分配剩余空间为间距（允许负值）
分别指定 X 轴和 Y 轴间距
自动分配 Y 轴剩余空间为间距
内边距
自动布局 - 内边距
盒类型
自动布局 - 盒类型
采用子元素的 box 盒类型布局
采用子元素的 stroke 盒类型布局（包含描边）
子元素属性
加入布局
自动布局 - 子元素不加入自动布局
自动宽度
自动布局 - 自动宽度
自动宽度（填充剩余宽度）
自动宽度和高度
自动高度
自动布局 - 自动高度
自动高度（填充剩余高度）
自动布局 - 自动宽度
自动高度和宽度
限制宽度
自动布局 - 自动宽度
限制宽度范围
限制高度
自动布局 - 自动高度
限制高度范围
锁定比例
自动布局 - 自动宽度
锁定宽高比例放大
🐆 动画
Animate
创建动画实例
摇摆动画
创建动画实例
颜色过渡
关键帧动画
动画 - 通过 pause() 方法暂停动画
动画 - 通过 seek() 方法定位跳转动画
数值（秒数）
动画 - 通过 on() 监听动画事件
event（animate）
event（Animate）
动画选项
缓动方式
动画 - 缓动方式
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（animation）
delay（transition）
delay（set）
delay（animate）
delay（Animate）
时长
动画 - 时长
duration（animation）
duration（transition）
duration（set）
duration（animate）
duration（Animate）
速度
动画 - 以5倍速播放动画
speed（animation）
speed（transition）
speed（set）
speed（animate）
speed（Animate）
反向
动画 - 反向
reverse（animation）
reverse（transition）
reverse（set）
reverse（animate）
reverse（Animate）
循环
动画 - 循环执行
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）
swing（Animate）
结束样式
动画 - 动画结束时回到起始状态
from（animation）
from（transition）
from（set）
from（animate）
from（Animate）
动画 - 动画结束时保持结束状态
to（animation）
to（transition）
to（animate）
to（animate）
to（Animate）
加入关键帧
动画 - 加入动画前的元素状态作为 from 关键帧
join（animation）
join（animate）
join（Animate）
自动播放
动画 - 不自动播放，监听点击 rect 再播放
autoplay（animate）
autoplay（Animate）
过渡属性
动画 - 只有 x 属性参与动画过渡
attrs（animation）
attrs（transition）
attrs（set）
attrs（animate）
attrs（Animate）
事件
动画 - 监听动画事件
event（animation）
event（transition）
event（set）
event（animate）
event（Animate）
动画 - 通过 on() 监听动画事件
event（animate）
event（Animate）
动画属性
状态
动画 - 打印动画完成状态
计时
动画 - 打印动画已经播放的时长
样式
动画 - 打印动画当前状态样式
动画功能
播放
动画 - 通过 play() 方法播放动画
暂停
动画 - 通过 pause() 方法暂停动画
停止
动画 - 通过 stop() 方法停止并完成动画
定位
动画 - 通过 seek() 方法定位跳转动画
数值（秒数）
百分比
kill
动画 - 通过 kill() 方法完成并销毁动画
销毁
动画 - 通过 destroy() 方法销毁动画
动画事件
AnimateEvent
动画 - 通过 on() 监听动画事件
event（Animate）
event（animate）
🫐 官方插件
视口
视图控制
视图控制
放大
缩小
指定缩放值
缩放到合适大小
让画布内容居中显示
聚焦到指定元素
聚焦到指定元素 - 不缩放画布，只进行位移
聚焦到指定区域
滚动条
滚动条
默认主题
暗黑主题
自定义样式
修改主题
设置画布 padding
箭头
箭头样式
角度箭头
角度箭头 - 箭头变得更大一些
角度箭头 - strokeCap变的平滑
角度箭头 - strokeJoin变的平滑
角度箭头 - 箭头变得平滑
单边角度箭头
标准箭头
标准箭头 - 箭头都变得平滑
三角形箭头
反向三角形箭头
圆形箭头
圆形箭头（线性）
方形箭头
方形箭头（线性）
菱形箭头
菱形箭头（线性）
标注箭头
动画样式
虚线箭头动画
HTML
HTML 文本
文本编辑
文本编辑器
运动路径
运动路径
沿路径运动
Robot
创建 Robot 游戏元素
交互状态
交互状态
按钮效果
查找元素
导出元素
滤镜
自定义滤镜
blur 滤镜
color
resize
App.ts
实时预览
TS
JS