Skip to content

编辑器事件

EditorEvent

基础事件。

继承 Event 事件。

事件属性

editor: Editor

编辑器对象。

value:UI | UI[]

选中 / hover 元素

oldValue:UI | UI[]

旧的选中 / hover 元素

事件名称

EditorEvent.SELECT

选择元素事件。

选择和取消都会触发, 通过 editor.target 获取选中的元素。

editor.select

EditorEvent.HOVER

hover 元素事件。

选择和取消都会触发, 通过 editor.hoverTarget 获取选中的元素列表。

editor.hover

EditorMoveEvent

移动事件。

继承 EditorEvent 事件。

事件属性

moveX: number

X 轴移动距离(世界坐标)

moveY: number

Y 轴移动距离(世界坐标)

事件名称

EditorMoveEvent.MOVE

移动元素事件。

editor.move

EditorScaleEvent

缩放大小事件。

继承 EditorEvent 事件。

事件属性

worldOrigin: IPointData

围绕的中心点(世界坐标)。

scaleX: number

X 轴的缩放值

scaleY: number

Y 轴的缩放值

transform?: IMatrixData

变换属性,当选择多个元素进行缩放大小时,内部会通过 transform 操作元素进行变换。

事件名称

EditorScaleEvent.SCALE

缩放大小事件(调整元素大小)。

editor.scale

EditorRotateEvent

旋转事件。

继承 EditorEvent 事件。

事件属性

rotation: number

旋转角度。

transform?: IMatrixData

变换属性,当选择多个元素进行旋转时,内部会通过 transform 操作元素进行变换。

事件名称

EditorRotateEvent.ROTATE

旋转元素事件。

editor.rotate

EditorSkewEvent

倾斜事件。

继承 EditorEvent 事件。

事件属性

worldOrigin: IPointData

围绕的中心点(世界坐标)。

skewX: number

X 轴倾斜值。

skewY: number

Y 轴倾斜值。

transform?: IMatrixData

变换属性,当选择多个元素进行倾斜时,内部会通过 transform 操作元素进行变换。

事件名称

EditorSkewEvent.SKEW

倾斜元素事件。

editor.skew

示例

监听选择事件

ts
import { App, Rect } from 'leafer-ui'
import { EditorEvent } from '@leafer-in/editor'

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

app.tree.add(Rect.one({ fill: 'rgb(50,205,121)', editable: true }, 100, 100))
app.tree.add(Rect.one({ fill: 'rgb(50,205,121)', editable: true }, 300, 100))

app.editor.on(EditorEvent.SELECT, (e: EditorEvent) => { 
    console.log(e.editor.list)
})

Released under the MIT License.