应用与引擎配置

基础     视口类型     画布     点按     多点     触屏     滚轮     平移视图     缩放视图

点按操作相关配置，引擎运行中修改 app.config.pointer 立即生效。

注意事项

App 结构 下只能设置在 App 的 config 上。

关键属性

pointer.type: 'mouse' | 'pointer' | 'touch'

采用哪种 原生事件类型 触发 PointeEvent 事件，默认为 'pointer'。

mouse 表示原生 MouseEvent 事件，touch 表示原生 TouchEvent 事件。

pointer.snap: boolean

是否将交互事件坐标取整，避免产生小数，默认为 true。

pointer.hitRadius: number

光标的碰撞半径， 默认为 5。

TIP

当光标距离元素在 hitRadius 范围内时，引擎可以拾取到元素，并进行了穿透检测，从多个碰撞到的元素中，优先拾取最符合碰撞条件的元素，防止误拾取。

pointer.through: boolean

点击事件是否获取穿透路径，通过穿透路径可以找到被当前元素遮挡的底部元素。

pointer.tapMore: boolean

tap、double_tap、long_tap 事件是否多个同时触发， 默认为 false (只触发其中之一)。

pointer.tapTime: number

双击事件中，每次单击和间隔的最大时长， 默认为 120ms。

必须在 120ms + 120ms 间隔 + 120ms 内 完成双击, 超过时长将不触发双击事件。

pointer.longPressTime: number

产生长按事件的最小时长，默认为 800ms。

pointer.transformTime: number

当缩放、滚动、旋转事件未继续触发，一段时间后，自动触发结束事件， 默认为 500ms。

由于鼠标滚轮、触摸板无法直接检测到结束事件，因此采用模拟方式触发。

pointer.hover: boolean

是否派发pointer.over、pointer.out、pointer.enter、pointer.leave事件, 默认为 true

手机端可设为 false。

pointer.dragHover: boolean

拖动过程中是否派发 pointer.over、pointer.out、pointer.enter、pointer.leave事件，默认为 true。

pointer.dragLimitAnimate: boolean | number

限制了 dragBounds 的元素是否在拖拽结束时进行动画归位，默认为 false (实时限制)。

可以设置动画速度 0.1 ～ 0.9，设为 true 的速度为 0.3。

pointer.dragDistance: number

超过一定的距离后，才能触发拖拽事件，防止误触，默认为 2。

pointer.swipeDistance: number

超过一定的距离后，才能触发滑动事件，默认为 20。

pointer.preventDefault: boolean

是否阻止浏览器默认事件， 默认为 false。

pointer.preventDefaultMenu: boolean

是否阻止浏览器默认菜单事件， 默认为 false.

示例

取消光标碰撞半径

Leafer

// #应用与引擎配置 - 取消光标碰撞半径 [Leafer]
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({
    view: window,
    pointer: { hitRadius: 0 }
})

leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

App

// #应用与引擎配置 - 取消光标碰撞半径 [App]
import { App, Rect } from 'leafer-ui'

const app = new App({
    view: window,
    tree: {},
    pointer: { hitRadius: 0 }
})

app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

获取穿透路径

Leafer

// #应用与引擎配置 - 获取穿透路径 [Leafer]
import { Leafer, Rect, PointerEvent } from 'leafer-ui'

const leafer = new Leafer({
    view: window,
    pointer: { through: true }
})

const data = { x: 100, y: 100, fill: '#32cd00' }

const bottomRect = new Rect(data)
leafer.add(bottomRect)

const rect = new Rect(data)
leafer.add(rect)

rect.on(PointerEvent.DOWN, (e: PointerEvent) => {
    console.log(e.throughPath) // { list: [bottomRect, rect, leafer] }
})

App

// #应用与引擎配置 - 获取穿透路径 [App]
import { App, Rect, PointerEvent } from 'leafer-ui'

const app = new App({
    view: window,
    tree: {},
    pointer: { through: true }
})

const data = { x: 100, y: 100, fill: '#32cd00' }

const bottomRect = new Rect(data)
app.tree.add(bottomRect)

const rect = new Rect(data)
app.tree.add(rect)

rect.on(PointerEvent.DOWN, (e: PointerEvent) => {
    console.log(e.throughPath) // { list: [bottomRect, rect, leafer] }
})