gojs禁止画布滚动

gojs生成画布后,鼠标滚动,画布的内容会上下移动,以下属性可解决此问题。

myDiagram = $(go.Diagram,"graph",
            {
                initialContentAlignment: go.Spot.Center, //启动视口中间的所有内容
                "toolManager.mouseWheelBehavior":go.ToolManager.WheelNone,//鼠标滚轮事件禁止
                layout: $(go.LayeredDigraphLayout,
                    { direction: 0, layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource }),
                "undoManager.isEnabled": true
            });

查看gojs源码发现ToolManager有6个值可选, WheelScroll、 WheelZoom 、WheelNone、GestureZoom 、GestureCancel、 GestureNone ,前3个是指鼠标滚动操作,后3个本人理解是手势操作,不过我放到手机上试了下,没看到效果。


(ps:gojs提供的api都是英文的,比较难阅读,但是提供了很多样例,建议在各个样例中找你到你想要的类似的属性,然后再在源码里找到属性的值,也许能较快的找到你想要的东西)

### 如何在 AntV X6 中实现画布滚动功能 在 AntV X6 中,通过配置 `scroller` 插件可以轻松实现画布滚动功能。以下是详细的说明以及注意事项。 #### 配置 Scroller 插件 为了启用画布滚动功能,可以在初始化 Graph 的时候引入并配置 `scroller` 插件。插件的核心参数包括但不限于以下几个: - **enabled**: 设置为 `true` 来启用滚动条。 - **paddings**: 定义画布边缘到视口的距离,通常用于防止节点靠近边界时被裁剪。 - **deceleration**: 控制惯性滚动的速度衰减因子。 - **minScale** 和 **maxScale**: 限定缩放范围,避免过度放大或缩小。 具体代码如下所示: ```javascript import { Graph } from '@antv/x6'; const graph = new Graph({ container: 'container', width: 800, height: 600, scroller: { enabled: true, // 启用滚动条 pannable: true, // 支持拖拽平移 pageVisible: true, // 显示分页指示器 pageBreak: false, // 不显示分页断点线 deceleration: 0.95, // 惯性滚动速度衰减 minScale: 0.2, // 缩放最小比例 maxScale: 3 // 缩放最大比例 }, }); ``` 上述代码片段展示了如何通过 `scroller` 属性来支持画布滚动[^2]。 #### 平移与滚动兼容问题 如果同时需要支持鼠标拖拽平移和滚动,则需要注意两者之间的冲突处理。例如,在某些场景下可能会发现节点被遮挡或者画布扩展异常等问题。针对这种情况,建议关闭全局的 `panning` 功能,而是在 `scroller` 内部单独开启平移选项 `pannable: true`[^3]。 此外,为了避免因自动调整大小 (`autoResize`) 或者其他因素引起的布局错乱,推荐固定画布宽高,并结合容器的实际尺寸动态更新这些值[^4]。 #### 自定义 MouseWheel 行为 对于更复杂的交互需求(比如精确控制滚轮操作下的行为),可以通过监听 `mousewheel` 事件来自定义逻辑。例如,利用 `deltaY` 属性计算滚动距离增量,并将其应用到当前视图位置上。 示例代码如下: ```javascript graph.on('mousewheel', (evt) => { const delta = evt.originEvent.deltaY; graph.translate(0, delta / 10); // 调整垂直方向上的偏移量 }); ``` 此方法允许开发者灵活定制用户体验,尤其是在默认机制无法满足特定业务需求时非常有用[^5]。 --- ### 注意事项总结 1. 如果仅需基本滚动能力,请优先考虑内置的 `scroller` 插件; 2. 当存在复杂交互时,应仔细权衡不同特性间的相互作用关系; 3. 确保画布及其父级 DOM 结构已完全加载后再执行初始化过程。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值