设置样式
初始化样式
创建一个带边框样式的矩形。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const rect = new Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
stroke: 'black',
strokeWidth: 2,
dashPattern: [6, 6] // 绘制虚线
})
leafer.add(rect)修改样式
注意事项
元素只能检测到 第一层级属性 的变化，如：修改 rect.fill.url = url 是不会渲染更新的。
ts
rect.stroke = 'blue'
rect.strokeWidth = 4简洁修改
ts
rect.set({
stroke: 'blue',
strokeWidth: 4
})重置样式
ts
rect.reset() // 完全重置
rect.reset({ // 重置为新样式
stroke: 'blue',
strokeWidth: 4
})使用 JSON
ts
import { Group, Leafer } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const group = new Group()
leafer.add(group)
const json = { "x": 20, "y": 20, "children": [{ "tag": "Rect", "x": 100, "y": 100, "width": 200, "height": 200, "fill": "#32cd79", "draggable": true }] }
了解元素通用属性
| 名称 | 描述 |
|---|---|
| id | 元素的唯一 id |
| tag | 元素标签名（即元素的类名） |
| name | 元素的名称 |
| className | 分类名称，暂时只支持设置 1 个 |
| innerId | 运行时创建的临时 id（递增），不能用于远程存储 |
| innerName | 运行时创建的临时名称，用于快速识别元素 |
| x | x 轴位置 |
| y | y 轴位置 |
| width | 宽度 |
| height | 高度 |
| lockRatio | 是否锁定元素的宽高比例，需安装 resize 插件 |
| scaleX | x 轴缩放比例， 为负数时表示镜像 X 轴 |
| scaleY | y 轴缩放比例，为负数时表示镜像 Y 轴 |
| scale | 快速设置 / 获取 scaleX, scaleY |
| rotation | 旋转角度 |
| skewX | x 轴倾斜角度 |
| skewY | y 轴倾斜角度 |
| offsetX | x 轴偏移量 |
| offsetY | y 轴偏移量 |
| origin | 围绕原点旋转、缩放元素，同 CSS 的 transform-origin |
| around | 围绕 around 点绘制元素，类似于游戏引擎中的 anchor 锚点功能 |
| boxBounds | 元素在 内部坐标系 中的基础边界（OBB 包围盒） |
| renderBounds | 元素在 内部坐标系 中的渲染边界（AABB 包围盒） |
| worldBoxBounds | 元素在 世界坐标系 中的基础边界（AABB 包围盒） |
| worldRenderBounds | 元素在 世界坐标系 中的渲染边界（AABB 包围盒） |
| worldTransform | 相对于世界坐标的变换矩阵, 包含 scaleX、scaleY 属性 |
| localTransform | 相对于父元素的变换矩阵 |
| zIndex | 在父元素中的层叠顺序 |
| opacity | 不透明度 |
| worldOpacity | 元素在全局视图中的不透明度（会受父元素影响） |
| visible | 元素的可见性，可用于隐藏元素 |
| fill | 填充，类似于 HTML5 中的 background-color，或文字的 color，支持 纯色、 线性渐变、径向渐变、角度渐变、图案填充 等类型， 支持多个填充同时叠加 |
| stroke | 描边，类似于 HTML5 中的 border-color，支持 纯色、 线性渐变、径向渐变、角度渐变、图案 等类型， 支持多个描边同时叠加 |
| strokeAlign | 描边的对齐方式 |
| strokeWidth | 描边的宽度 |
| strokeWidthFixed | 是否固定线宽（不受视图放大影响） |
| strokeCap | 描边的端点形状 |
| strokeJoin | 描边的拐角处理 |
| dashPattern | 虚线描边 |
| dashOffset | 虚线描边的起点偏移值 |
| shadow | 外阴影， 支持多个阴影叠加、boxShadow 效果 |
| innerShadow | 内阴影， 支持多个内阴影叠加 |
| mask | 设为遮罩 |
| eraser | 设为橡皮擦 |
| blendMode | 混合模式 |
| hittable | 元素是否响应鼠标、触摸或其他指针设备的交互事件，类似 CSS 的 pointer-events 属性 |
| hitChildren | 进一步定义元素子级的可交互性 |
| hitSelf | 进一步定义自身（不含子元素）的可交互性 |
| hitFill | 进一步定义元素 fill 的可交互性，设置 pixel 可以进行 PNG / SVG 图片的像素级检测，过滤掉透明像素 |
| hitStroke | 进一步定义元素 stroke 的可交互性 |
| editable | 是否允许编辑，需安装 图形编辑器插件 |
| draggable | 是否允许拖拽 |
| dragBounds | 限制元素的拖动范围 |
| cursor | hover 到元素上时，显示的光标样式，支持所有 CSS 的光标名称 |
| states | 状态列表，可预设复杂多样的元素、游戏状态，用于随时切换， 支持添加 过渡效果，需安装 交互状态插件 |
| state | 当前状态，需安装 交互状态插件 |
| button | 设为按钮，子元素将自动同步交互状态，如 state、hover、press...，需安装 交互状态插件 |
| hoverStyle | 光标移入时的交互样式， 移出后自动还原，需安装 交互状态插件 |
| pressStyle | 光标按下时的交互样式， 抬起后自动还原，需安装 交互状态插件 |
| focusStyle | 元素 focus() 时的聚焦样式， 失去焦点后自动还原，需安装 交互状态插件 |
| selected | 是否选中，需安装 交互状态插件 |
| selectedStyle | 元素 selected 设为 true 时的选中样式， selected 设为 false 后自动还原，需安装 交互状态插件 |
| disabled | 是否禁用，需安装 交互状态插件 |
| disabledStyle | 元素 disabled 设为 true 时的禁用样式， disabled 设为 false 后自动还原，需安装 交互状态插件 |
| animation | 动画属性，支持延时、循环和 seek，可制作过渡动画、摇摆动画、关键帧动画、路径动画，需安装 动画插件 |
| transition | 状态过渡 / 进入状态过渡效果，需安装 动画插件 |
| transitionOut | 退出状态时的过渡效果，未设置时使用 transition，需安装 动画插件 |
| motionPath | 设为运动路径，需安装 运动路径插件 |
| motionPrecision | 设置运动路径的精度值，用于控制提取运动路径上指定点的精度，需安装 运动路径插件 |
| motion | 定位元素在 运动路径 上的位置，可使用百分比类型，需安装 运动路径插件 |
| motionRotation | 在 运动路径 产生的自动角度上偏移一个角度，需安装 运动路径插件 |
| parent | 父元素 |
| leafer | 元素所在的 Leafer 实例 |
| app | 元素所在的 App 实例（根应用），非 App 结构时为 Leafer |
| isLeafer | 元素是否为 Leafer 实例 |
| leaferIsCreated | Leafer 实例及子元素 创建完成（完成首次创建） |
| leaferIsReady | Leafer 实例是否 准备就绪（完成首次布局） |
| zoomLayer | Leafer 实例的 缩放平移视图层 |
| data | 预留给用户的自定义数据对象，我们永远不会占用， 默认为空对象 {} |
| __ | 内部数据处理实例（两个下划线的变量） |
| proxyData | 让元素在 Vue / React 等前端框架 中支持响应式数据 |
| path | 路径数据，支持 SVG 与 Cavnas 绘图命令 （元素可进入路径优先模式） |
了解元素通用方法
| 名称 | 描述 |
|---|---|
| move() | 位移元素 增量操作，可选 动画 过渡 |
| moveInner() | 在 内部坐标系 中位移元素 增量操作，可选 动画 过渡 |
| moveWorld() | 在 世界坐标系 中位移元素 增量操作，可选 动画 过渡 |
| resizeWidth() | resize 元素/组元素的包围盒宽度，需安装 resize 插件 |
| resizeHeight() | resize 元素/组元素的包围盒高度，需安装 resize 插件 |
| scaleResize() | 缩放操作转换为宽高值 增量操作，需安装 resize 插件 |
| scaleOf() | 围绕原点 origin（ box 坐标 ）缩放元素 增量操作 |
| scaleOfWorld() | 围绕原点 worldOrigin（ 世界坐标 ）缩放元素 增量操作 |
| flip() | 在 世界坐标系 中， 按轴方向 镜像/翻转元素 |
| rotateOf() | 围绕原点 origin（ box 坐标 ）旋转元素 增量操作 |
| rotateOfWorld() | 围绕原点 worldOrigin（ 世界坐标 ）旋转元素 增量操作 |
| skewOf() | 围绕原点 origin（ box 坐标 ）倾斜元素 增量操作 |
| skewOfWorld() | 围绕原点 worldOrigin（ 世界坐标 ）倾斜元素 增量操作 |
| getBounds() | 获取 AABB 包围盒（边界） |
| getLayoutBounds() | 获取 OBB 包围盒（边界），含缩放、旋转等布局属性 |
| getLayoutPoints() | 获取 OBB 包围盒（边界）的四个坐标点） |
| setTransform() | 设置本地变换矩阵，会自动分解为元素的布局属性 |
| getTransform() | 获取变换矩阵, 支持获取相对任意父元素 relative 的相对矩阵 |
| transform() | 变换操作，会自动分解为布局属性 增量操作 |
| transformWorld() | transform() 在 世界坐标系 中操作 |
| getPagePoint() | 获取 page 坐标（ 世界坐标 转 page 坐标 ），支持转换移动距离 |
| getLocalPoint() | 获取本地坐标（ 世界坐标 转 本地坐标 ），支持转换移动距离 |
| getInnerPoint() | 获取内部坐标（ 世界坐标 转 内部坐标 ），支持转换移动距离 |
| getBoxPoint() | 获取 box 坐标（ 世界坐标 转 box 坐标 ），支持转换移动距离 |
| getWorldPointByPage() | 获取世界坐标（ page 坐标 转 世界坐标 ），支持转换移动距离 |
| getWorldPointByLocal() | 获取世界坐标（ 本地坐标 转 世界坐标 ），支持转换移动距离 |
| getInnerPointByLocal() | 获取内部坐标（ 本地坐标 转 内部坐标 ），支持转换移动距离 |
| getWorldPoint() | 获取世界坐标（ 内部坐标 转 世界坐标 ），支持转换移动距离 |
| getLocalPointByInner() | 获取本地坐标（ 内部坐标 转 本地坐标 ），支持转换移动距离 |
| getBoxPointByInner() | 获取 box 坐标（ 内部坐标 转 box 坐标 ），支持转换移动距离 |
| getWorldPointByBox() | 获取世界坐标（ box 坐标 转 世界坐标 ），支持转换移动距离 |
| getInnerPointByBox() | 获取内部坐标（ box 坐标 转 内部坐标 ），支持转换移动距离 |
| dropTo() | 将元素拖拽放置到另一个父容器中 |
| focus() | 聚焦元素操作，单个 App 只能同时有一个元素聚焦，当一个元素聚焦时，之前元素会失焦，需安装 交互状态插件 |
| animate() | 执行动画方法，并返回 动画实例，需安装 动画插件 |
| getMotionTotal() | 获取运动路径的总长度，需安装 运动路径插件 |
| getMotionPoint() | 获取运动路径上指定位置的 坐标点, 返回一个包含 rotation 的 坐标点，需安装 运动路径插件 |
| on() | 侦听事件 |
| on_() | 侦听事件，支持传入 bind 作为 listener 的 this 对象，并返回事件 id，与 off_() 配套使用 |
| once() | 只侦听一次事件 |
| off() | 移除事件 |
| off_() | 移除事件， 与 on_() 配套使用 |
| emit() | 手动派发事件 |
| emitEvent() | 手动派发事件，参数必须为 IEvent 对象 |
| forceUpdate() | 强制更新元素（异步），默认会更新元素的布局与渲染 |
| updateLayout() | 请求更新布局，若布局无变化，则会忽略更新 |
| forceRender() | 强制渲染元素（异步），只会重新渲染，不会更新布局 |
| nextRender() | 等待下一次渲染帧执行函数 |
| removeNextRender() | 移除 nextRender() 监听的函数 |
| find() | 通过 id、innerId、className、tag、函数条件查找元素，返回一个数组，需安装 查找插件 |
| findTag() | 查找 tag，支持通过数组查找多个 tag，返回一个数组，需安装 查找插件 |
| findOne() | 通过 id、innerId、className、tag、函数条件查找元素，只返回一个元素，需安装 查找插件 |
| findId() | 查找 id, 支持查找数字类型的 id（必须原始 id 类型为数字），需安装 查找插件 |
| pick() | 通过坐标点（相对世界坐标）拾取元素，支持获取穿透路径，返回拾取到的目标元素和路径 |
| waitParent() | 等待元素有 parent 属性时执行 |
| waitLeafer() | 等待元素有 leafer 属性时执行 |
| set() | 设置元素样式，可选 动画 过渡 |
| reset() | 重置元素样式, 支持传入一个新的样式 |
| get() | 获取设置过的属性数据 |
| setAttr() | 设置属性值 |
| getAttr() | 获取属性值 |
| getComputedAttr() | 获取计算属性值 |
| clone() | 克隆当前元素， 可以增加新样式 |
| getPath() | 获取元素的数字路径（Canvas 绘图命令） |
| getPathString() | 获取元素的字符串路径（Canvas 绘图命令，包含非 SVG 绘图命令） |
| export() | 导出元素为图片、json、画布，支持截图、切片，可直接下载，需安装 导出插件 |
| toJSON() | 导出 JSON 对象 |
| toString() | 导出 JSON 字符串 |
| remove() | 移除当前元素 |
| destroy() | 销毁当前元素 |