Skip to content

修改鼠标滚轮的行为

鼠标滚轮的行为支持放大缩小画布和上下移动画布,可以在实例化时通过配置指定:

js
new MindMap({
    // ...
    mousewheelAction: 'move'// zoom(放大缩小)、move(上下移动)
    // 当mousewheelAction设为move时,可以通过该属性控制鼠标滚动一下视图移动的步长,单位px
    mousewheelMoveStep: 100,
    // 鼠标缩放是否以鼠标当前位置为中心点,否则以画布中心点
    mouseScaleCenterUseMousePosition: true,
    // 当mousewheelAction设为zoom时,或者按住Ctrl键时,默认向前滚动是缩小,向后滚动是放大,如果该属性设为true,那么会反过来
    mousewheelZoomActionReverse: true,
    // 禁止鼠标滚轮缩放,你仍旧可以使用api进行缩放
    disableMouseWheelZoom: false,
})

如果需要动态的切换行为可以使用updateConfig方法:

js
mindMap.updateConfig({
    mousewheelAction: 'zoom'
})

此外也支持让你自行处理鼠标滚轮事件:

js
new MindMap({
    // ...
    customHandleMousewheel: (e) => {
        // 你的自定义逻辑
    }
})

当传了customHandleMousewheel选项,mousewheelAction选项将不生效。

完整示例

MIT License.