编辑器配置

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

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

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

关键属性

around: Around

指定中心点旋转、缩放大小， 默认为无。

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

lockRatio: boolean | 'corner'

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

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

rotateGap: number

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

示例

按中心点缩放

// #图形编辑器 [按中心点缩放]
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.target = 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.target = rect