编辑器配置

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

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

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

关键属性

editSize: 'size' | 'scale' | 'font-size'

调整元素大小的方式，默认为 size。

size： 修改元素的 宽高、路径 达到调整大小的目的。

font-size： 修改文本的 fontSize 达到调整大小的目的。

scale： 修改元素的 缩放属性 达到调整大小的目的。

不同元素可 单独设置 editSize 。

隐藏

hideOnMove: boolean

是否在移动元素时隐藏编辑框， 默认为否。

hideOnSmall: boolean | number

是否在元素很小的时候隐藏编辑器控制点，默认为 true。

可以设置一个最小的 size, 默认最小的 size 为 10 (表示 10 x 10 的大小)。

示例

拖拽控制点修改字体大小，拖拽边框控制文本宽高

// #图形编辑器 [拖拽控制点修改字体大小，拖拽边框控制文本宽高]
import { App, Text } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/text-editor' // 导入文本编辑插件 (可选)
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({
    view: window,
    editor: {
        editSize: 'size', // 默认修改元素宽高
        point: {
            editConfig: { editSize: 'font-size' } // 拖拽控制点修改字体大小
        }
    }
})

const text = Text.one({
    text: 'Action is the proper fruit of knowledge.',
    editable: true, fill: '#FFE04B', fontSize: 16,
}, 100, 100, 100)

app.tree.add(text)

app.editor.select(text)

移动元素时隐藏编辑框

// #图形编辑器 [移动元素时隐藏编辑框]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件 //
import '@leafer-in/viewport' // 导入视口插件 (可选)

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

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

app.editor.select(rect)