视窗交互
应用默认自带基础的视窗交互功能，符合大多数图形编辑类产品的使用场景，如果你想取消默认交互方式，可以修改应用类型为user，之后可以自由控制交互方式。
默认交互方式
平移视图
- 移动端: 双指滑动。
- 触摸板: 双指滑动。
- 鼠标: 滚轮（纵向平移），Shift + 滚轮（横向平移），鼠标中键 + 拖拽 (自由移动)。
- 拖拽: 拖拽元素到达视图边界时，会自动平移视图，以实现向外拖拽。
缩放视图
- 移动端: 双指捏合。
- 触摸板: 双指捏合。
- 鼠标: Ctrl / Command + 滚轮。
设置鼠标缩放平移的速度请看 config.wheel。
自定义交互方式
修改应用类型为user后，可以通过监听 leafer 实例的 ZoomEvent 与 MoveEvent 事件进行视窗交互逻辑的自定义。
ts
import { Leafer, Group, Rect, MoveEvent, ZoomEvent, LeafHelper } from 'leafer-ui'
const leafer = new Leafer({
view: window,
type: 'user'
})
const moveLayer = new Group()
const zoomLayer = new Group()
const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
leafer.add(moveLayer)
moveLayer.add(zoomLayer)
zoomLayer.add(rect)
leafer.on(MoveEvent.MOVE, function (e: MoveEvent) {
// user custom ...
LeafHelper.move(moveLayer, e.moveX, e.moveY)
})
leafer.on(ZoomEvent.ZOOM, function (e: ZoomEvent) {
// user custom ...
const center = { x: e.x, y: e.y }
LeafHelper.zoomOf(zoomLayer, center, e.scale)
})