ZoomEvent

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

1. 移动端/触摸板: 双指捏合。
2. 鼠标: Ctrl / Command + 滚轮。

继承

ZoomEvent  >  UIEvent  >  Event

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

事件名称

ZoomEvent.START

开始缩放事件

zoom.start

ZoomEvent.ZOOM

缩放事件

zoom

ZoomEvent.END

结束缩放事件

zoom.end

关键属性

scale: number

此次缩放事件改变的 scale 大小

示例

simple.ts

// #监听缩放交互事件
import { Leafer, Rect, ZoomEvent, 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(ZoomEvent.ZOOM, function (e: ZoomEvent) {
    const center = { x: e.x, y: e.y }
    LeafHelper.zoomOfWorld(leafer, center, e.scale)
})

simple.js

// #监听缩放交互事件
import { Leafer, Rect, ZoomEvent, 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(ZoomEvent.ZOOM, function (e) {
    const center = { x: e.x, y: e.y }
    LeafHelper.zoomOfWorld(leafer, center, e.scale)
})