mxGraph中手动设置边的路由点：自定义弯折位置方法求助

针对你遇到的多条边重叠、平行边功能无效的问题，我整理了几个可行的自定义弯折点的方法，帮你让边清晰区分开：

1. 手动设置边的路径点（Waypoints） #

mxGraph的边支持通过自定义路径点（waypoints）来控制弯折轨迹，这是最直接的方式。你可以根据起点和终点的坐标，计算出带偏移的弯折点，然后赋值给边的几何属性。

代码示例： #

// 获取当前选中的边（你可以根据需求批量处理多条边）
const edge = graph.getSelectionCell();
const model = graph.getModel();
const view = graph.getView();

// 获取边的起点和终点的中心坐标
const sourceState = view.getState(edge.getTerminal(true));
const targetState = view.getState(edge.getTerminal(false));
const sourceCenter = sourceState.getCenterPoint();
const targetCenter = targetState.getCenterPoint();

// 生成随机偏移量（你也可以按固定值分配，比如-100、0、100给三条边）
const offset = Math.random() * 120 - 60; // 范围：-60 到 60

// 定义自定义路径点：起点 → 向外偏移 → 中间高度弯折 → 终点方向中间点 → 终点
const waypoints = [
  new mxPoint(sourceCenter.x, sourceCenter.y),
  new mxPoint(sourceCenter.x + offset, sourceCenter.y),
  new mxPoint(sourceCenter.x + offset, (sourceCenter.y + targetCenter.y) / 2),
  new mxPoint(targetCenter.x, (sourceCenter.y + targetCenter.y) / 2),
  new mxPoint(targetCenter.x, targetCenter.y)
];

// 更新边的几何属性
const geo = model.getGeometry(edge);
geo.setWaypoints(waypoints);
model.setGeometry(edge, geo);

如果是批量处理三条边，你可以给每条边设置固定的偏移值（比如-80、0、80），这样三条边会分别向左、居中、向右偏移，不会重叠。

2. 修复routingCenterX不生效的问题 #

你尝试的routingCenterX参数需要配合特定的边样式才能生效，必须将边的edgeStyle设置为elbowConnector，否则这个参数不会起作用。

代码示例： #

// 设置边样式：启用elbowConnector路由，并设置水平偏移
const style = graph.getStylesheet().getDefaultEdgeStyle();
style.edgeStyle = 'elbowConnector';
style.routingCenterX = 50; // 水平方向偏移50像素

// 应用样式到目标边
graph.setCellStyle(style, [edge]);

这个方法适合需要统一风格的弯折边，但如果要每条边有不同偏移，还是手动设置waypoints更灵活。

3. 自定义路由算法（批量处理推荐） #

如果需要自动给所有重叠的边添加偏移，你可以自定义一个路由函数，注册到mxGraph的样式系统中，让所有符合条件的边自动应用带偏移的弯折逻辑。

代码示例： #

// 注册自定义路由函数
mxEdgeStyleRegistry.register('customOffsetRouting', function(edge, source, target, points, result) {
  const sourceCenter = source.getCenterPoint();
  const targetCenter = target.getCenterPoint();
  
  // 给每条边分配唯一的偏移量（可以根据边的ID或者索引计算）
  const edgeIndex = graph.getModel().getChildIndex(edge.getParent(), edge);
  const offset = (edgeIndex - 1) * 80; // 三条边分别偏移-80、0、80
  
  // 构建路径点
  result.push(new mxPoint(sourceCenter.x, sourceCenter.y));
  result.push(new mxPoint(sourceCenter.x + offset, sourceCenter.y));
  result.push(new mxPoint(sourceCenter.x + offset, (sourceCenter.y + targetCenter.y)/2));
  result.push(new mxPoint(targetCenter.x, (sourceCenter.y + targetCenter.y)/2));
  result.push(new mxPoint(targetCenter.x, targetCenter.y));
  
  return result;
});

// 应用自定义路由到边
graph.setCellStyle('edgeStyle=customOffsetRouting;', [edge1, edge2, edge3]);

关于平行边无效的小提示 #

如果之前平行边功能没生效，你可以检查是否开启了允许平行边的配置：

graph.setAllowParallelEdges(true);

另外，平行边需要确保边的起点和终点是相同的顶点，mxGraph才会自动生成平行的路径。如果还是无效，那用上面的自定义弯折点方法确实是更可靠的方案。

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