Skip to content

DragEvent

拖动事件。

script 标签引入 需用别名 MyDragEvent 代替。

事件名称

DragEvent.START

开始拖动事件

drag.start

DragEvent.DRAG

拖动事件中

drag

DragEvent.END

结束拖动事件

drag.end

状态事件

拖动中途径的元素触发,可配合 DropEvent 实现 drop 前的 移入移出效果。

DragEvent.OVER

拖动元素 over。

drag.over

DragEvent.OUT

拖动元素 out。

drag.out

DragEvent.ENTER

拖动元素进入。

drag.enter

DragEvent.LEAVE

拖动元素离开。

drag.leave

关键属性

moveX: number

拖动事件偏移的 X 轴距离(世界坐标)

moveY: number

拖动事件偏移的 Y 轴距离(世界坐标)

totalX: number

本轮拖动事件偏移的 X 轴总距离(世界坐标)

totalY: number

本轮拖动事件偏移的 Y 轴总距离(世界坐标)

坐标转换方法

移动距离

moveX, moveY 属性的坐标转换。

getPageMove ( ): IPointData

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

getInnerMove ( relative?: UI): IPointData

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

getLocalMove ( relative: UI): IPointData

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

移动总距离

totalX, totalY 属性的坐标转换。

getPageTotal ( ): IPointData

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

getInnerTotal ( relative?: UI): IPointData

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

getLocalTotal ( relative: UI): IPointData

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

拖拽区域

getPageBounds ( ): IBoundsData

获取在 page 坐标系中形成的拖拽区域,可用于快速 创建图形

静态方法

DragEvent.setList ( list: ILeaf |ILeaf[] | ILeafList )

另外设置拖拽的对象列表(会跟随鼠标移动),drop 事件触发后自动重置。

DragEvent.setData ( data: IObject )

设置拖拽数据,drop 事件触发后自动重置。

继承事件

PointerEvent

示例

手动拖拽元素

默认 drggable 为 true 或 DragEvent.setList() 的元素会自动拖拽。

ts
import { Leafer, Rect, DragEvent } from 'leafer-ui'

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

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

leafer.rotation = 30
leafer.add(rect)

rect.on(DragEvent.DRAG, function (e: DragEvent) {
    e.current.moveWorld(e.moveX, e.moveY)
})
js
import { Leafer, Rect, DragEvent } from 'leafer-ui'

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

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

leafer.rotation = 30
leafer.add(rect)

rect.on(DragEvent.DRAG, function (e) {
    e.current.moveWorld(e.moveX, e.moveY)
})

检查元素是否正在被拖拽

ts
leafer.interaction.isDrag(leaf)

画笔工具

按下鼠标拖动开始画线, 可以缩放平移画面

ts
import { Leafer, DragEvent, Pen } from 'leafer-ui'

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

const pen = new Pen()
leafer.add(pen)

leafer.on(DragEvent.START, (e: DragEvent) => {
    const inner = e.getInnerPoint(pen)
    pen.setStyle({ stroke: 'black', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(inner.x, inner.y)
})

leafer.on(DragEvent.DRAG, (e: DragEvent) => {
    const inner = e.getInnerPoint(pen)
    pen.lineTo(inner.x, inner.y)
})
js
import { Leafer, DragEvent, Pen } from 'leafer-ui'

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

const pen = new Pen()
leafer.add(pen)

leafer.on(DragEvent.START, (e) => {
    const inner = e.getInnerPoint(pen)
    pen.setStyle({ stroke: 'black', strokeWidth: 10, strokeCap: 'round', strokeJoin: 'round' })
    pen.moveTo(inner.x, inner.y)
})

leafer.on(DragEvent.DRAG, (e) => {
    const inner = e.getInnerPoint(pen)
    pen.lineTo(inner.x, inner.y)
})

Released under the MIT License.