编辑器配置

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

启动功能配置，应用运行中可实时修改 app.editor.config 生效。

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

关键属性

moveable: boolean | 'move'

是否启用移动， 默认启用。

设为 move 可支持手机端双指移动手势。

resizeable: boolean | 'zoom'

是否启用编辑大小， 默认启用。

设为 zoom 可支持手机端缩放手势。

flipable: boolean

是否启用镜像/翻转元素功能， 默认启用

rotateable: boolean | 'rotate'

是否启用旋转， 默认启用。

设为 rotate 可支持手机端旋转手势。

skewable: boolean

是否启用倾斜， 默认启用。

示例

禁用旋转

// #图形编辑器 [禁用旋转]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)

const app = new App({
    view: window,
    editor: { rotateable: false }
})

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: { resizeable: false }
})

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

app.editor.target = rect