MoveEvent

移动事件，一般用于窗口交互中平移视图。

1. 移动端: 双指滑动
2. 触摸板: 双指滑动
3. 鼠标: 滚轮（纵向平移），Shift + 滚轮（横向平移），鼠标中键 + 拖拽 (自由移动)
4. 拖拽: 拖拽元素到达视图边界时，会自动平移视图，以实现向外拖拽

事件名称

MoveEvent.START

开始移动事件

move.start

MoveEvent.MOVE

移动事件

move

MoveEvent.END

结束移动事件

move.end

关键属性

moveType: 'move' | 'drag'

移动视图的类型，drag 表示通过拖拽事件移动，move 表示通过滚轮、双指滑动事件移动

moveX: number

此次移动事件偏移的 X 轴距离（世界坐标）

moveY: number

此次移动事件偏移的 Y 轴距离（世界坐标）

坐标转换方法

moveX, moveY 属性的坐标转换。

getPageMove ( ): IPointData

获取在 page 坐标系中的偏移距离。

getInnerMove ( target?: UI): IPointData

获取相对于 target 内部坐标 的偏移距离，target 不存在时为当前侦听元素。

getLocalMove ( relative?: UI): IPointData

获取相对于 target 本地坐标 的偏移距离，target 不存在时为当前侦听元素。

继承事件

DragEvent

示例

simple.ts

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

const leafer = new Leafer({
    view: window,
    type: 'draw'
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

leafer.on(MoveEvent.MOVE, function (e: MoveEvent) {
    leafer.moveWorld(e.moveX, e.moveY)
})

simple.js

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

const leafer = new Leafer({
    view: window,
    type: 'draw'
})

const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })

leafer.add(rect)

leafer.on(MoveEvent.MOVE, function (e) {
    leafer.moveWorld(e.moveX, e.moveY)
})