MoveEvent

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

1. 移动端/触摸板: 双指滑动。
2. 鼠标: 滚轮（纵向滚动），Shift + 滚轮（横向滚动）。

继承

MoveEvent  >  DragEvent  >  PointerEvent  >  UIEvent  >  Event

需安装 视口插件 才能使用， 或直接安装 leafer-editor（已集成此插件）。

事件名称

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 ( relative?: UI): IPointData

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

getLocalMove ( relative?: UI): IPointData

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

示例

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)
})