Skip to content

视窗交互

应用默认自带基础的视窗交互功能,符合大多数图形编辑类产品的使用场景,如果你想取消默认交互方式,可以修改应用类型为draw,之后可以自由控制交互方式。

默认交互方式

平移视图

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

设置空白处拖拽平移视图请看 config.move

缩放视图

  1. 移动端: 双指捏合。
  2. 触摸板: 双指捏合。
  3. 鼠标: 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)

指定缩放层

默认将 leafer 自身作为平移缩放层,你也可以单独指定一个 Group 作为平移缩放层。

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

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

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

leafer.zoomLayer = group

// fixed layer
leafer.add(new Rect({ fill: '#FF4B4B', draggable: true }))

// zoom / move layer
group.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }))

自定义交互方式

修改应用类型为draw后,可以通过监听 leafer 实例的 ZoomEventMoveEvent 事件进行视窗交互逻辑的自定义。

如需支持同时滚动画布外的页面请看 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)
})

leafer.on(ZoomEvent.BEFORE_ZOOM, function (e: ZoomEvent) {
    // custom ...
    const center = { x: e.x, y: e.y }
    zoomLayer.scaleOfWorld(center, e.scale)
})

下一步

局部渲染

Released under the MIT License.