MxGraph JavaScript中如何计算图内各边的长度

mxGraph 边的所有路径点（包含起止端点、中间拐点）都可以通过视图层API拿到绝对坐标，逐段计算两点间欧氏距离累加即可得到总长度，不需要手动拆分分段，适配任意拐点数量的折线边。

核心实现 #

直接替换你代码里的calcLength函数即可：

function calcLength(edge) {
  if (!edge || !edge.isEdge()) return 0;
  const view = graph.getView();
  const pointList = [];
  let total = 0;

  // 按路径顺序加入所有点：源端点 -> 中间拐点 -> 目标端点
  // 加入源端点绝对坐标
  pointList.push(view.getPoint(edge, true));
  // 加入边配置的所有中间拐点，自动转换为绝对坐标
  const geometry = edge.getGeometry();
  if (geometry?.points?.length) {
    geometry.points.forEach(relPoint => {
      pointList.push(view.getPoint(edge, false, relPoint.x, relPoint.y));
    });
  }
  // 加入目标端点绝对坐标
  pointList.push(view.getPoint(edge, false));

  // 逐段计算长度累加
  for (let i = 1; i < pointList.length; i++) {
    const prev = pointList[i - 1];
    const curr = pointList[i];
    if (!prev || !curr) continue;
    const dx = curr.x - prev.x;
    const dy = curr.y - prev.y;
    total += Math.hypot(dx, dy);
  }

  return total;
}

说明 #

• 用view.getPoint()做坐标转换，自动适配画布缩放、平移、父容器偏移，计算结果和边的视觉渲染长度完全一致，不会出现坐标偏差。
• 自动兼容无拐点的直边、多段折线边（包含三段式连接边场景），不需要额外处理分段逻辑。
• 做了空值兼容，遇到未配置源/目标的临时边不会报错，默认返回0。

你原有的遍历所有cell判断边的逻辑可以直接复用，不需要调整。

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