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