AntV G6移动端：如何实现与PC端相同的画布拖拽效果？
AntV G6 是一款功能强大的图可视化引擎，在 PC 端我们常常通过鼠标拖拽来平移画布，但在移动端必须面对触摸屏的差异。许多开发者会发现，直接将 PC 端的配置搬到移动设备上时，画布拖拽可能无法正常工作，或者会与页面滚动发生冲突。本文将深入解析如何在移动端实现与 PC 端一致的画布拖拽效果，涵盖 G6 的行为配置、触摸事件处理以及常见问题的解决方案。
画布拖拽在 G6 中的实现原理
G6 使用 模式（Mode） 管理不同的交互行为。每个模式是一组行为（Behavior）的集合，例如 'drag-canvas' 控制画布拖拽，'zoom-canvas' 控制画布缩放。这些行为监听底层的鼠标或触摸事件，并转换为平移或缩放操作。
在 PC 端，启用画布拖拽只需在实例化 Graph 时设置相应的模式即可：
const graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: ['drag-canvas', 'zoom-canvas']
}
});此时，按住鼠标左键在画布空白处拖动即可实现平移，这正是我们想要的交互效果。
移动端的挑战
移动端使用触摸事件（touchstart、touchmove、touchend）替代鼠标事件。虽然 G6 内部已经对这些事件做了适配，但实际应用中还会遇到以下问题：
- 手指滑动容易触发浏览器的默认滚动，导致画布连同页面一起移动。
- 手指放缩（双指张合）可能与画布缩放行为冲突。
- 节点拖拽行为（
'drag-node'）可能与画布拖拽同时生效，造成混乱。
为了让触摸环境的画布拖拽像 PC 端一样流畅，我们需要做针对性配置。
解决方案一：借助 G6 内置行为
最简单的办法是直接在默认模式中加入 'drag-canvas'，并指定其方向或触发方式。G6 的 'drag-canvas' 行为支持 direction 和 scalableRange 等参数，但不直接提供阻止页面滚动的选项。我们需要在容器上添加事件监听来阻止默认行为。
// 获取容器DOM
const container = document.getElementById('mountNode');
// 阻止触摸时页面滚动
container.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
const graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: ['drag-canvas']
// 如果还需要缩放，可加入 'zoom-canvas'，但需要注意双指手势冲突
}
});这段代码通过 addEventListener 为容器添加了 touchmove 监听，并调用 preventDefault() 阻止浏览器默认滑动。需要注意的是，{ passive: false } 选项必须设置，否则在部分浏览器中 preventDefault() 将无效。
如果希望保留页面滚动（例如当手指在画布边缘区域滑动时不拦截），可以通过判断触摸位置或使用更精细的事件代理来实现，但常规的全屏画布场景通常直接禁止页面滚动即可。
解决方案二：自定义触摸拖拽逻辑
如果内置的 'drag-canvas' 无法满足需求（例如需要单指拖拽、双指缩放同时存在且需精确控制），可以通过监听 G6 的原始触摸事件来实现。G6 提供了 canvas:touchstart、canvas:touchmove、canvas:touchend 等事件，允许开发者直接操作画布的平移变换。
以下是一个简单的自定义拖拽示例，仅使用单指触摸控制画布平移：
const graph = new G6.Graph({
container: 'mountNode',
width: window.innerWidth,
height: window.innerHeight,
modes: {
default: [] // 清空所有行为，完全自定义
}
});
// 记录触摸起始点
let lastX, lastY;
graph.on('canvas:touchstart', (e) => {
// 仅当单指触摸时处理拖拽
if (e.touches.length === 1) {
lastX = e.touches[0].x;
lastY = e.touches[0].y;
}
});
graph.on('canvas:touchmove', (e) => {
if (e.touches.length === 1) {
// 计算偏移量
const dx = e.touches[0].x - lastX;
const dy = e.touches[0].y - lastY;
// 调用 graph 的平移方法
graph.translate(dx, dy);
// 更新起点
lastX = e.touches[0].x;
lastY = e.touches[0].y;
// 阻止默认行为，避免页面滚动
e.preventDefault();
}
});
// 仍然需要在容器上拦截 touchmove 以防万一
const container = document.getElementById('mountNode');
container.addEventListener('touchmove', (e) => {
e.preventDefault();
}, { passive: false });这种方式将拖拽逻辑完全掌控在自己手中，可以轻松添加边界限制、惯性滑动等高级效果。但需要注意，双指缩放的冲突处理需要额外编写代码，或者将此逻辑与 G6 的 'zoom-canvas' 行为结合使用（依据触摸点数量区分）。
注意事项与常见问题
- 节点拖拽冲突：如果图中包含可拖拽的节点，需要将
'drag-node'放在另一个模式（如'edit'模式），用户通过切换模式来进行节点编辑，同时保持默认模式为画布拖拽。 - 双指缩放与单指拖拽共存：默认的
'zoom-canvas'行为会处理双指张合，而'drag-canvas'行为通常只在单指或鼠标下触发。若同时启用，移动端通常能自动区分。但如果出现冲突，可以覆盖模式配置，或者在自定义事件中根据e.touches.length判断。 - 性能与流畅度：阻止默认页面滚动后，画布拖拽会非常跟手。如果图元素过多导致平移卡顿，可以考虑在拖拽过程中启用 G6 的
graph.get('canvas').set('localRefresh', false)或降低渲染精度。 - 跨平台兼容：上述方法在 iOS 和 Android 的现代浏览器中均适用。对于微信小程序等非标准 WebView 环境，可使用 G6 的小程序版本，其交互行为已做底层适配。
结语
通过合理配置 G6 的交互模式并处理触摸事件，可以轻松实现移动端与 PC 端一致的画布拖拽体验。选择内置行为加事件拦截的方案最简单可靠，自定义事件则为复杂场景提供了最大灵活性。掌握这些技巧后，您就能够在各种终端上打造出流畅的图可视化应用。