editable
元素编辑属性, 需安装 图形编辑器插件 后使用。
关键属性
editable: boolean
是否允许编辑,默认为 false。
包含了 draggable 功能,不用重复设置。
locked: boolean
是否锁定元素,默认为 false。
锁定后不能移动、编辑,框选不了。
widthRange: IRangeSize
限制元素的宽度范围(目前只有编辑器单选元素时可以控制)。
ts
interface IRangeSize {
min?: number
max?: number
}
heightRange: IRangeSize
限制元素的高度范围(目前只有编辑器单选元素时可以控制)。
ts
interface IRangeSize {
min?: number
max?: number
}
lockRatio: boolean
是否锁定元素的宽高比例,默认为 false。
另可以通过编辑器进行 全局设置。
resize
resize 元素 / 容器
只读属性
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' }
})
归属
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)