事件处理

拥有同 HTML 一样完善的事件处理机制，支持 捕获/冒泡 阶段，并支持 模拟交互。

监听事件

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

hover.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)

hover.js

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) {
    e.current.fill = '#42dd89'
}

function onLeave(e) {
    e.current.fill = '#32cd79'
}

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

初始化事件

支持初始化传入 event 对象（不能导出为 JSON），用于快速监听事件：

event.ts

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

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

const rect = Rect.one({
    fill: '#32cd79',
    draggable: true,
    event: {
        [PointerEvent.ENTER]: function (e: PointerEvent) {
            (e.current as Rect).fill = '#42dd89'
        },
        [PointerEvent.LEAVE]: function (e: PointerEvent) {
            (e.current as Rect).fill = '#32cd79'
        }
    }
}, 100, 100, 200, 200)

leafer.add(rect)

event.js

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

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

const rect = Rect.one({
    fill: '#32cd79',
    draggable: true,
    event: {
        [PointerEvent.ENTER]: function (e) {
            e.current.fill = '#42dd89'
        },
        [PointerEvent.LEAVE]: function (e) {
            e.current.fill = '#32cd79'
        }
    }
}, 100, 100, 200, 200)

leafer.add(rect)

使用字符串

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

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

移除事件

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

派发事件

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

了解元素交互属性

名称	描述
hittable	元素是否响应鼠标、触摸或其他指针设备的交互事件，类似 CSS 的 pointer-events 属性
hitChildren	进一步定义元素子级的可交互性
hitSelf	进一步定义自身（不含子元素）的可交互性
hitFill	进一步定义元素 fill 的可交互性，设置 pixel 可以进行 PNG / SVG 图片的像素级检测，过滤掉透明像素
hitStroke	进一步定义元素 stroke 的可交互性
editable	是否允许编辑，需安装 图形编辑器插件
draggable	是否允许拖拽
dragBounds	限制元素的拖动范围
cursor	hover 到元素上时，显示的光标样式，支持所有 CSS 的光标名称
states	状态列表，可预设复杂多样的元素、游戏状态，用于随时切换， 支持添加 过渡效果，需安装 交互状态插件
state	当前状态，需安装 交互状态插件
button	设为按钮，子元素将自动同步交互状态，如 state、hover、press...，需安装 交互状态插件
hoverStyle	光标移入时的交互样式， 移出后自动还原，需安装 交互状态插件
pressStyle	光标按下时的交互样式， 抬起后自动还原，需安装 交互状态插件
focusStyle	元素 focus() 时的聚焦样式， 失去焦点后自动还原，需安装 交互状态插件
selected	是否选中，需安装 交互状态插件
selectedStyle	元素 selected 设为 true 时的选中样式， selected 设为 false 后自动还原，需安装 交互状态插件
disabled	是否禁用，需安装 交互状态插件
disabledStyle	元素 disabled 设为 true 时的禁用样式， disabled 设为 false 后自动还原，需安装 交互状态插件

了解元素事件方法

名称	描述
on()	侦听事件
on_()	侦听事件，支持传入 bind 作为 listener 的 this 对象，并返回事件 id，与 off_() 配套使用
once()	只侦听一次事件
off()	移除事件
off_()	移除事件， 与 on_() 配套使用
emit()	手动派发事件
emitEvent()	手动派发事件，参数必须为 IEvent 对象

事件相关

命名规则     捕获/冒泡     模拟交互

常用事件

PointerEvent     DragEvent     DropEvent     SwipeEvent

MoveEvent     ZoomEvent     RotateEvent

LeaferEvent     ResizeEvent     KeyEvent

RenderEvent     LayoutEvent     WatchEvent    

下一步

移除内容