编辑器配置

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

事件相关配置，应用运行中可实时修改 app.editor.config 生效。

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

关键属性

keyEvent: boolean

是否接收键盘事件（如方向键移动），默认为 true。

beforeMove: IEditorBeforeMove

移动元素事件的前置钩子函数。

参数 data 为增量操作数据 { target, x, y }。

返回 false 时将忽略本次编辑操作，返回 { x, y } 时将修改移动操作数据。

beforeMove(data) {
    const { target, x, y } = data
    return true // return false | { x, y }
}

beforeScale: IEditorBeforeScale

resize 元素事件的前置钩子函数。

参数 data 为增量操作数据 { target, origin, scaleX, scaleY }。

返回 false 时将忽略本次编辑操作，返回 { scaleX, scaleY } 时将修改缩放操作数据。

另外元素可直接设置 widthRange、 heightRange 支持限制宽高范围。

beforeScale(data) {
    const { target, origin, scaleX, scaleY } = data
    return true // return false | { scaleX, scaleY }
}

beforeRotate: IEditorBeforeRotate

旋转元素事件的前置钩子函数。

参数 data 为增量操作数据 { target, origin, rotation }。

返回 false 时将忽略本次编辑操作，返回 rotation 数字时将修改旋转操作数据。

beforeRotate(data) {
    const { target, origin, rotation } = data
    return true // return false | rotation
}

beforeSkew: IEditorBeforeSkew

倾斜元素事件的前置钩子函数。

参数 data 为增量操作数据 { target, origin, skewX, skewY }。

返回 false 时将忽略本次编辑操作，返回 { skewX, skewY } 时将修改倾斜操作数据。

beforeSkew(data) {
    const { target, origin, skewX, skewY } = data
    return true // return false | { skewX, skewY }
}

示例

限制最小编辑尺寸

通过 resize 元素事件的前置钩子函数实现。

最小尺寸

// #图形编辑器 [限制最小编辑尺寸 （resize 元素事件前置钩子函数）]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: {
        lockRatio: true,
        beforeScale({ target, scaleX, scaleY }) {
            if (target.width * scaleX < 20 || target.height * scaleY < 20) {
                const scale = Math.min(20 / target.width, 20 / target.height)
                return { scaleX: scale, scaleY: scale }
            }
            return true
        }
    }
})

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

app.editor.select(rect)

可镜像操作

// #图形编辑器 [限制最小编辑尺寸，且支持镜像操作 （resize 元素事件前置钩子函数）]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: {
        lockRatio: true,
        beforeScale({ target, scaleX, scaleY }) {
            if (target.width * Math.abs(scaleX) < 20 || target.height * Math.abs(scaleY) < 20) {
                const scale = Math.min(20 / target.width, 20 / target.height)
                return { scaleX: scaleX < 0 ? -scale : scale, scaleY: scaleY < 0 ? -scale : scale }
            }
            return true
        }
    }
})

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

app.editor.select(rect)