mxGraph：拖动边的控制点时触发什么事件？如何捕获移动结束时机？

你问的这个问题刚好是mxGraph中调整边路径时的常见需求，我来给你梳理清楚：

一、拖动边控制点时触发的事件 #

当你拖动边的中间控制点（非端点）时，mxGraph会触发一系列相关事件，核心的几个是：

• mxEvent.START：拖动操作开始（鼠标按下时触发）
• mxEvent.MOVE：拖动过程中实时触发（每帧移动都会触发）
• mxEvent.CELL_CHANGED：当控制点拖动完成、边的geometry被修改后触发
• mxEvent.END_UPDATE：整个拖动操作完全结束（鼠标释放，模型更新完成）时触发

其中你需要的移动结束时刻，重点关注CELL_CHANGED和END_UPDATE这两个事件就够了。

二、捕获移动结束时刻并保存位置的具体实现 #

方案1：监听CELL_CHANGED事件 #

这个事件会在边的geometry属性（包括控制点数组）被修改后立即触发，适合直接获取最新的控制点位置：

// 假设你的mxGraph实例是graph
graph.addListener(mxEvent.CELL_CHANGED, (sender, evt) => {
  const cell = evt.getProperty('cell');
  // 先判断当前修改的是不是边
  if (cell.isEdge()) {
    const geometry = cell.getGeometry();
    // geometry.points就是边的所有中间控制点数组（不包含起点和终点）
    if (geometry.points?.length > 0) {
      // 这里写你的保存逻辑，比如存到后端、localStorage或者全局状态
      console.log('控制点最新位置：', geometry.points);
      // 示例：把points转成JSON字符串保存
      localStorage.setItem(`edge_${cell.id}_points`, JSON.stringify(geometry.points));
    }
  }
});

方案2：监听END_UPDATE事件 #

如果你需要确保整个拖动操作完全结束（比如避免中途多次触发），可以用这个事件，它会在所有模型更新完成后触发一次：

graph.addListener(mxEvent.END_UPDATE, (sender, evt) => {
  // 获取本次操作中所有的模型变更
  const changes = graph.getModel().getChanges();
  changes.forEach(change => {
    // 判断是不是边的geometry修改事件
    if (change instanceof mxGeometryChange && change.cell.isEdge()) {
      const cell = change.cell;
      const geometry = cell.getGeometry();
      if (geometry.points) {
        console.log('拖动完成，边的控制点最终位置：', geometry.points);
        // 执行你的保存逻辑
      }
    }
  });
});

补充说明 #

• 边的起点和终点不属于geometry.points，它们是边连接的两个顶点的位置，如果你需要监听端点移动，那是另一个场景（监听顶点移动事件）。
• geometry.points里的每个元素都是mxPoint对象，包含x和y属性，直接读取即可。

内容的提问来源于stack exchange，提问作者Eleanor