应用配置

基础     视口类型     画布     点按     多点     触屏     滚轮     平移视图     缩放视图

滚轮操作相关配置, 应用运行中修改 app.config.wheel 立即生效。

注意事项

App 结构 下只能设置在 App 的 config 上。

关键属性

wheel.disabled: boolean

是否禁用 wheel 事件，默认为 false。

wheel.zoomMode: boolean ｜ 'mouse'

是否开启鼠标滚动直接缩放视图， 默认为 false。

当使用缩放模式时，可按下鼠标中键进行平移视图操作。

'mouse'

程序为了同时兼容触摸板的操作，可能会出现某些鼠标设备判断不精准的情况，设置为 'mouse' 可以实现准确的缩放（需要确认用户使用的是鼠标，而不是触摸板）。

wheel.zoomSpeed: number

缩放的速度， 用于自定义适配不同浏览器的速度。

取值范围 0 ～ 1, 默认 0.5。

wheel.moveSpeed: number

滚动的速度， 用于自定义适配不同浏览器的速度。

取值范围 0 ～ 1, 默认 0.5。

wheel.rotateSpeed: number

旋转的速度， 用于自定义适配不同浏览器的速度。

取值范围 0 ～ 1, 默认 0.5。

wheel.preventDefault: boolean

是否阻止浏览器默认滚动页面事件，默认为 false。

示例

鼠标滚动直接缩放视图

缩放优先模式下，鼠标滚动直接缩放，可按下鼠标中键进行平移视图。

App

// #应用配置 - 鼠标滚动直接缩放视图 [App]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件

const app = new App({
    view: window,
    tree: { type: 'viewport' },
    wheel: { zoomMode: true }
})

app.tree.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }))

Leafer

// #应用配置 - 鼠标滚动直接缩放视图 [Leafer]
import { Leafer, Rect } from 'leafer-ui'
import '@leafer-in/viewport' // 导入视口插件

const leafer = new Leafer({
    view: window,
    type: 'viewport',
    wheel: { zoomMode: true }
})

leafer.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }))