Skip to content

editable

元素编辑属性, 需安装 图形编辑器插件 后使用。

关键属性

editable: boolean

是否允许编辑,默认为 false。

包含了 draggable 功能,不用重复设置。

locked: boolean

是否锁定元素,默认为 false。

锁定后不能移动、编辑,框选不了。

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)

Released under the MIT License.