PointerEvent
鼠标、手写笔、触摸屏点击事件。
当原生 PointerEvent 事件不存在时,使用其他原生事件替代的优先级:
PointerEvent > TouchEvent > MouseEvent
新特性
多种点击事件同时只触发一个
tap
、double_tap
、long_tap
事件同时监听,根据实际情况默认只触发最匹配的一个, 也可以 配置 同时触发。
事件配对触发
元素 pointer.down
事件触发后,保证元素一定会触发 pointer.up
事件, 不用担心因为拖拽、事件取消等原因导致配对中断。
新增属性
事件名称
基础事件
PointerEvent.DOWN
按下事件。
pointer.down
PointerEvent.MOVE
光标移动事件。
pointer.move
PointerEvent.UP
抬起事件。
pointer.up
PointerEvent.OVER
over 事件。
pointer.over
PointerEvent.OUT
out 事件。
pointer.out
PointerEvent.ENTER
进入事件。
pointer.enter
PointerEvent.LEAVE
离开事件。
pointer.leave
复合事件
PointerEvent.TAP
快速点击事件。
tap
PointerEvent.DOUBLE_TAP
快速双击事件。
double_tap
PointerEvent.LONG_PRESS
长按事件,长按中触发。
long_press
PointerEvent.LONG_TAP
长按抬起事件,长按 UP 后马上触发。
long_tap
关键属性
x: number
相对于应用视图的 x 轴世界坐标。
y: number
相对于应用视图的 y 轴世界坐标。
width: number
接触面的宽度。
height: number
接触面的高度。
pointerType: string
触发事件的设备类型(鼠标,手写笔,触摸屏等):
- "mouse"
- "pen"
- "touch"
pressure: number
按压的压力值,取值范围: 0 ~ 1.
tangentialPressure?: number
pen(手写笔) 按压的切向压力值,取值范围: -1 ~ 1.
当 pointerType 为 'pen' 时才存在此属性.
tiltX?: number
pen 与 y 轴构成的平面,和 y-z 平面之间的夹角, 取值范围: -90, 90.
tiltY?: number
pen 与 x 轴构成的平面,和 x-z 平面之间的夹角, 取值范围: -90, 90.
twist?: number
pen 围绕自身主轴顺时针旋转的角度,取值范围是 [0, 359] 度。
示例
多种点击事件同时只触发一个
同时监听 tap
、double_tap
、long_tap
事件, 默认只会触发其中之一。
import { Leafer, Rect, PointerEvent } from 'leafer-ui'
const leafer = new Leafer({
view: window
})
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)
rect.on(PointerEvent.TAP, () => {
console.log('tap')
})
rect.on(PointerEvent.DOUBLE_TAP, () => {
console.log('double_tap')
})
rect.on(PointerEvent.LONG_TAP, () => {
console.log('long_tap')
})
rect.on(PointerEvent.LONG_PRESS, () => {
console.log('long_press')
})
同时派发多种点击事件
配置应用的 pointer.tapMulti
为 true, tap
、double_tap
、long_tap
事件会同时触发。
import { Leafer, Rect, PointerEvent } from 'leafer-ui'
const leafer = new Leafer({
view: window,
pointer: {
tapMulti: false
}
})
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)
rect.on(PointerEvent.TAP, () => {
console.log('tap')
})
rect.on(PointerEvent.DOUBLE_TAP, () => {
console.log('double_tap')
})
rect.on(PointerEvent.LONG_TAP, () => {
console.log('long_tap')
})
rect.on(PointerEvent.LONG_PRESS, () => {
console.log('long_press')
})