[Bug]: behaviors: ['drag-canvas', 'zoom-canvas']demo 无法正常运行

[zyc329]

Describe the bug / 问题描述

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  layout: {
    type: 'grid',
  },
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node1', target: 'node3' },
      { source: 'node1', target: 'node4' },
      { source: 'node2', target: 'node3' },
      { source: 'node3', target: 'node4' },
      { source: 'node4', target: 'node5' },
    ],
  },
  behaviors: ['drag-canvas','zoom-canvas'],
});

graph.render();

官网例子加一个;zoom-canvas 就可以了

Reproduction link / 复现链接

https://g6.antv.antgroup.com/examples/behavior/canvas/#drag

Steps to Reproduce the Bug or Issue / 重现步骤

进入页面滚轮缩放生效，拖拽过画布后，滚轮缩放就失效了

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@zyc329 您好！以下是关于您问题的自动回复：

您好，感谢反馈 G6 5.x 在 behaviors 配置 drag-canvas 与 zoom-canvas 后的交互冲突问题。
根据您的描述：拖动画布后，滚轮缩放失效，这是典型的行为冲突。

---

⚠️ 问题分析

• G6 5.x 的 drag-canvas 与 zoom-canvas 属于画布级别交互。
• 当两者同时启用时，部分情况下 drag-canvas 会"抢占"事件，导致 zoom-canvas（滚轮缩放）失灵。
• 官方 FAQ 已指出可通过配置 enable 参数（支持函数），动态控制行为可用性，防止冲突。

---

✅ 推荐解决方案

1. 使用对象配置 behaviors，动态控制行为启用

您可以将 behaviors 改为对象数组，并通过 enable 方法区分事件来源，让 drag-canvas 与 zoom-canvas 互不干扰：

const graph = new Graph({
  container: 'container',
  layout: { type: 'grid' },
  data: { /* ... */ },
  behaviors: [
    {
      type: 'drag-canvas',
      enable: (event) => {
        // 仅鼠标左键拖拽时启用
        return event.type === 'pointerdown' && event.button === 0;
      },
    },
    {
      type: 'zoom-canvas',
      enable: (event) => {
        // 仅滚轮事件时启用
        return event.type === 'wheel';
      },
    },
  ],
});
graph.render();

核心思路：通过 enable 函数，区分事件类型，保证 drag-canvas 不拦截 wheel 事件。

---

2. 事件监听辅助调试

建议监听关键事件，确认交互链路：

import { CanvasEvent } from '@antv/g6';

graph.on(CanvasEvent.DRAG, (evt) => {
  console.log('正在拖动画布');
});
graph.on(CanvasEvent.WHEEL, (evt) => {
  console.log('正在缩放画布');
});

---

🏷️ 参考文档

• G6 行为配置文档（enable 支持函数）
• 画布事件 API
• 官方 behaviors 交互示例

---

🎯 总结

• 请将 behaviors 配置为对象数组，并用 enable 函数区分事件类型，避免 drag-canvas 影响 zoom-canvas。
• 若仍有问题，请告知您的 G6 具体版本号及复现代码，并附浏览器控制台报错信息，便于进一步定位。

感谢您的反馈！如有新问题欢迎随时补充。

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[yvonneyx]

没复现相关问题，鼠标还是触控板操作？浏览器环境都可以提供一下，方便排查

[zyc329]

没复现相关问题，鼠标还是触控板操作？浏览器环境都可以提供一下，方便排查

macOs26.0.1
edge 最新版
官网demo页面测试也一样
今早又调试了一下，windows系统正常，mac不正常

[zyc329]

没复现相关问题，鼠标还是触控板操作？浏览器环境都可以提供一下，方便排查

macOs26.0.1 edge 最新版 官网demo页面测试也一样 今早又调试了一下，windows系统正常，mac不正常

我又找了台mac测试，这次是macOs16.x ，效果正常…..