视窗交互
应用默认自带基础的视窗交互功能，符合大多数图形编辑类产品的使用场景，如果你想取消默认交互方式，可以修改应用类型为draw，之后可以自由控制交互方式。
默认交互方式
平移视图
- 移动端: 双指滑动。
- 触摸板: 双指滑动。
- 鼠标: 滚轮（纵向平移），Shift + 滚轮（横向平移），鼠标中键 / 空格键 + 拖拽 (自由移动)。
- 拖拽: 拖拽元素到达视图边界时，会自动平移视图，以实现向外拖拽。
设置空白处拖拽平移视图请看 config.move。
缩放视图
- 移动端: 双指捏合。
- 触摸板: 双指捏合。
- 鼠标: Ctrl / Command + 滚轮。
启用鼠标滚动缩放请看 缩放优先模式。
交互配置
缩放优先
缩放优先模式下，鼠标滚动直接缩放，可按下鼠标中键进行平移视图， 详细了解 zoomMode。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({
view: window,
wheel: { zoomMode: true }
})
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)缩放范围
控制视图最小和最大缩放比例，默认为 0.02 ～ 256 。
ts
import { Leafer, Rect } from 'leafer-ui'
const leafer = new Leafer({
view: window,
zoom: { min: 0.02, max: 256 }
})
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(rect)指定缩放层(viewport 视口)
默认将 leafer 自身作为平移缩放层，你也可以单独指定一个 Group 作为平移缩放层。
ts
import { Leafer, Group, Rect } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const group = new Group()
leafer.add(group)
自定义交互方式
修改应用类型为draw后，可以通过监听 leafer 实例的 ZoomEvent 与 MoveEvent 事件进行视窗交互逻辑的自定义。
如需支持同时滚动画布外的页面请看 wheel.preventDefault。
ts
import { Leafer, Group, Rect, MoveEvent, ZoomEvent } from 'leafer-ui'
const leafer = new Leafer({
view: window,
type: 'draw'
})
const zoomLayer = new Group()
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(zoomLayer)
zoomLayer.add(rect)
leafer.on(MoveEvent.BEFORE_MOVE, function (e: MoveEvent) {
// custom ...
zoomLayer.moveWorld(e.moveX, e.moveY)
})