RotateEvent

旋转事件，一般用于 视口交互 中旋转 视图 或 元素。

1. 移动端: 双指旋转
2. 触摸板: 双指旋转（仅 Safari 支持）

继承

RotateEvent  >  PointerEvent  >  UIEvent  >  Event

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

事件名称

RotateEvent.START

开始旋转事件。

rotate.start

RotateEvent.ROTATE

旋转事件。

rotate

RotateEvent.END

结束旋转事件。

rotate.end

关键属性

rotation: number

此次旋转事件改变的角度。

totalRotation: number

本轮旋转事件改变的总角度。

multiTouch: boolean

是否为多点触屏派发。

继承事件

RotateEvent  >  PointerEvent  >  UIEvent  >  Event

示例

simple.ts

// #监听旋转交互事件
import { Leafer, Rect, RotateEvent, LeafHelper } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件

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

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

leafer.add(rect)

leafer.on(RotateEvent.ROTATE, function (e: RotateEvent) {
    const center = { x: e.x, y: e.y }
    LeafHelper.rotateOfWorld(leafer, center, e.rotation)
})

simple.js

// #监听旋转交互事件
import { Leafer, Rect, RotateEvent, LeafHelper } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件

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

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

leafer.add(rect)

leafer.on(RotateEvent.ROTATE, function (e) {
    const center = { x: e.x, y: e.y }
    LeafHelper.rotateOfWorld(leafer, center, e.rotation)
})