LeaferJS

视窗交互

应用默认自带视窗交互功能。

缩放视图

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

触发 ZoomEvent 事件。

平移视图

  1. 移动端： 双指滑动
  2. 触摸板： 双指滑动
  3. 鼠标：滚轮（纵向平移），Shift + 滚轮（横向平移），鼠标中键 + 拖拽 (自由移动)
  4. 拖拽： 拖拽元素到达视图边界时，会自动平移视图，以实现向外拖拽

触发 MoveEvent 事件。

设置鼠标缩放平移的速度请看 config.wheel。

鼠标缩放模式

通过配置 wheel.zoomMode 来开启鼠标滚轮直接缩放视图的功能。

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

const leafer = new Leafer({
  view: window,
  wheel: {
    zoomMode: true,
  },
}) // 此时平移视图只能用：鼠标中键 / 空格键 + 拖拽 移动。

自定义视窗交互

自定义视窗交互前，需要先通过useMove:false关闭默认视窗交互，再进行相关事件处理。

import { Leafer, Group, MoveEvent, ZoomEvent, LeafHelper } from 'leafer-ui'

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

const moveLayer = new Group()
leafer.add(moveLayer)

const zoomLayer = new Group()
moveLayer.add(zoomLayer)

leafer.on(MoveEvent.MOVE, (e: MoveEvent) => {
  LeafHelper.moveOfWorld(moveLayer, e.moveX, e.moveY)
})

leafer.on(ZoomEvent.ZOOM, (e: ZoomEvent) => {
  LeafHelper.zoomOfWorld(zoomLayer, e.scale, e)
})