Skip to content

editable

元素编辑属性, 结合 图形编辑器 使用。

关键属性

editable: boolean

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

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

editSize: 'size' | 'scale'

调整尺寸大小的方式, 默认为 size

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

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

locked: boolean

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

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

关键方法

scaleResize ( scaleX: number, scaleY = scaleX)

缩放操作转换为宽高值 增量操作

其他 resize 方法

以下会影响缩放值的方法,可以在最后传入一个可选参数 resize: boolean

setTransform ()

transform ()

scaleOf ()

skewOf ()

dropTo ()

将缩放转换为宽高操作。

归属

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 

rect.scaleOf({ x: 0, y: 0 }, 2, 2, resize) // scale值将转为宽高

console.log(rect.scaleX, rect.scaleY, rect.width, rect.height)  // 1, 1, 200, 200

Released under the MIT License.