Skip to content

事件处理

监听事件

为矩形添加鼠标进入/离开事件效果。

ts
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79', // 背景色
    stroke: 'black', // 边框
    strokeWidth: 2, // 边框粗细
    draggable: true
})

leafer.add(rect)


function onEnter(e: PointerEvent) { 
    (e.current as Rect).fill = '#42dd89'
}

function onLeave(e: PointerEvent) {
    (e.current as Rect).fill = '#32cd79'
}

rect.on(PointerEvent.ENTER, onEnter)
rect.on(PointerEvent.LEAVE, onLeave)

使用字符串

了解事件类型的字符串命名规则

ts
rect.on('pointer.enter', onEnter)
rect.on('pointer.leave', onLeave)

移除事件

ts
rect.off('pointer.enter', onEnter)
rect.off('pointer.leave', onLeave)

派发事件

ts
rect.emit('pointer.enter', { current: rect })

下一步

恭喜 🎉,你已完成基础知识的学习,接下来将带你了解点不一样的进阶知识:

视窗交互

Released under the MIT License.