AntV X6 实现鼠标右键框选

项目中,鼠标左键是用来移动项目,使用鼠标框选只能用中键和右键了,X6中的选择插件是支持鼠标中键框选的,奈何项目经理要求用鼠标右键进行框选,才有了本篇博客记录。

实现的具体方式还是使用@antv/x6-plugin-selection插件中的方法startRubberband就可以了,因为X6提供的监听鼠标移动事件中获取不到右键事件(或许我没找到),我就直接监听画布容器上的mousedown事件

  const container = graph.container;

  // 定义事件处理器
  const handleMouseDown = (e: MouseEvent) => {
    if (e.button === 2) {
      e.preventDefault(); // 阻止默认右键菜单
      const selectionPlugin = graph.getPlugin<Selection>('selection');
      if (selectionPlugin) {
        selectionPlugin.enableRubberband();
        selectionPlugin.startRubberband(e as MouseEvent);
      }
    }
  };

  const handleMouseUp = (e: MouseEvent) => {
    if (e.button === 2) {
      e.preventDefault();
      graph.getPlugin<Selection>('selection')?.disableRubberband();
    }
  };

  // 添加事件监听器
  container.addEventListener('mousedown', handleMouseDown);
  container.addEventListener('mouseup', handleMouseUp);

posted @ 2025-11-14 14:13  cola-tian  阅读(0)  评论(0)    收藏  举报