编辑器配置

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

启动功能配置，应用运行中可实时修改 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.select(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.select(rect)

移动端手势操作元素

// #图形编辑器 [手势操作元素]
import { App, Rect, Frame } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件

const app = new App({
    view: window,
    fill: '#333',
    mobile: true, // 适配移动端
    // multiTouch: {  singleGesture: true }, // 可配置锁定单一手势操作
    editor: { moveable: 'gesture', resizeable: 'gesture', rotateable: 'gesture' }  //  编辑元素支持手势操作 //
})

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', dragBounds: 'parent', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))