编辑器配置

基础     事件     样式     按钮组     光标     选择     控制     启用     内部编辑器

限制配置，应用运行中可实时修改 app.editor.config 生效。

同时元素拥有 独立的编辑配置 属性，可实时覆盖主配置。

关键属性

around: Around

指定旋转、缩放、倾斜的中心点， 默认为无。

设置 'center' 表示正中心点 {x:0.5, y: 0.5}, 设置 {x:1, y:1} 表示右下角，相对编辑框宽高比例。

rotateAround: Around

单独指定旋转的中心点，比 around 优先级更高 默认为无。

lockRatio: boolean | 'corner'

锁定宽高比例, 默认为 false。

设置 'corner' 表示只固定 4 个角的缩放比例，中间点可自由调整。

rotateGap: number

旋转吸附间隔，当靠近间隔点时，慢慢旋转会被吸附到间隔点上，默认为每 45 度。

dragLimitAnimate: boolean | number

限制了 dragBounds 的元素是否在拖拽结束时进行动画归位，默认为 false (实时限制)。

可以设置动画速度 0.1 ～ 0.9，设为 true 的速度为 0.3。

此配置会覆盖 Leafer 的 pointer.dragLimitAnimate 配置。

示例

按中心点缩放

// #图形编辑器 [按中心点缩放]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: { around: 'center' }
})

const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)

app.editor.select(rect)

固定比例缩放

// #图形编辑器 [固定比例缩放]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: { lockRatio: true }
})

const rect = Rect.one({ editable: true, fill: '#32cd79', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)

app.editor.select(rect)