editable
元素编辑属性， 结合 图形编辑器 使用。
关键属性
editable: boolean
是否允许编辑，默认为 false。
包含了 draggable 功能，不用重复设置。
locked: boolean
是否锁定元素，默认为 false。
锁定后不能移动、编辑，框选不了。
只读属性
editConfig： IEditorConfig
元素的独立编辑配置，可通过以下方式设置：
ts
import { Text, defineKey } from 'leafer-ui'
// 1. 设置类，所有 Text 元素生效（推荐）
Text.setEditConfig({
editSize: 'scale' // 使用对象
})
Text.setEditConfig(function (text: Text) {
return { // 使用函数返回对象，可增加业务逻辑分流
editSize: text.get('width') ? 'size' : 'scale'
}
})
// 2. 设置实例，单个元素生效 （不推荐）
const text = new Text({ text: 'hello', editable: true })
defineKey(text, 'editConfig', {
get() { return { moveable: false } }
})editOuter: string
元素的外形编辑工具，一般用于调整尺寸、形状， 默认为 'EditTool'。
Line 默认为 'LineEditTool'，可自定义 编辑工具，通过以下方式设置：
ts
import { Text, defineKey } from 'leafer-ui'
// 1. 设置类，所有 Text 元素生效（推荐）
Text.setEditOuter('TextEditTool')
Text.setEditOuter(function (text: Text) {
// 使用函数返回名称，可增加业务逻辑分流
return text.get('width') ? 'EditTool' : 'TextEditTool'
})
// 2. 设置实例，单个元素生效 （不推荐）
const text = new Text({ text: 'hello', editable: true })
defineKey(text, 'editOuter', {
get() { return 'TextEditTool' }
})editInner: string
元素的内部细节编辑器，一般用于编辑路径、文本， 默认为 'PathEditor'。
Text 默认为: 'TextEditor'，可自定义 内部编辑器，通过以下方式设置：
ts
import { Text, defineKey } from 'leafer-ui'
// 1. 设置类，所有 Text 元素生效（推荐）
Text.setEditInner('TextEditor')
Text.setEditInner(function (text: Text) {
// 使用函数返回名称，可增加业务逻辑分流
return text.get('width') ? 'PathEditor' : 'TextEditor'
})
// 2. 设置实例，单个元素生效 （不推荐）
const text = new Text({ text: 'hello', editable: true })
defineKey(text, 'editInner', {
get() { return 'TextEditor' }
})关键方法
scaleResize ( scaleX: number, scaleY = scaleX)
缩放操作转换为宽高值 增量操作。
其他 resize 方法
以下会影响缩放值的方法，可以在最后传入一个可选参数 resize: boolean。
将缩放转换为宽高操作。
归属
UI
示例
editable 元素才能被选中
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({ view: window, editor: {} })
const rect1 = Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100)
const rect2 = Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
app.tree.add(rect1)
app.tree.add(rect2)scaleOf 增加 resize 参数
ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'
const app = new App({ view: window, editor: {} })
const rect = Rect.one({ fill: '#32cd79' }, 0, 0, 100, 100)
app.tree.add(rect)
const resize = true