如何让mxGraph中的边避开顶点？

嘿，这个问题我之前在做mxGraph项目时也踩过坑，咱们来一步步解决它！

启用自动避障路由 #

mxGraph其实自带了让边自动避开顶点的配置，你只需要开启edgesAvoidCells属性，再调整下间距就能让OrthoConnect风格的边自动绕开路径上的顶点，不用再手动挪边或者改层级了。

试试这段代码：

// 开启边避开顶点的功能
graph.setEdgesAvoidCells(true);
// 调整边和顶点之间的最小间距（单位：像素，按需修改）
graph.edgeSpacing = 15;

开启后，mxGraph会自动重新计算边的路由路径，避开所有挡路的顶点，箭头指向也会保持OrthoConnect的正确样式。

手动添加路由点（精细控制） #

如果自动路由的效果没达到你的预期，比如想让边在特定位置转弯，那可以手动给边添加路由点（waypoints），强制控制边的走向。

举个例子，假设你想让边在某个位置向下分支绕开顶点，代码可以这么写：

// 获取你要调整的那条边
const targetEdge = graph.getSelectionCell();
// 定义路由点数组：起点 → 转弯点 → 终点
const waypoints = [
  new mxPoint(100, 50),  // 边的起点坐标
  new mxPoint(100, 150), // 向下转弯的点，避开中间的顶点
  new mxPoint(300, 150)  // 边的终点坐标
];
// 更新边的几何信息
graph.model.setGeometry(targetEdge, new mxGeometry(null, null, null, waypoints));
// 刷新图形生效
graph.refresh();

你可以根据自己的画布坐标，调整转弯点的位置，精准控制边的走向。

自定义边缘样式（进阶方案） #

如果默认的OrthoConnect和自动路由还是满足不了需求，你可以自定义一个边缘样式，在计算路由时加入自定义的避障逻辑。比如继承mxOrthogonalEdgeStyle，重写路由计算方法，加入碰撞检测，让边自动绕开指定的顶点。

大概的思路是这样：

function customOrthoEdgeStyle(state, source, target, points, result) {
  // 先调用默认的OrthoConnect样式逻辑
  mxOrthogonalEdgeStyle.apply(this, arguments);
  
  // 这里加入自定义碰撞检测：遍历画布上的顶点，检查当前边的路径是否穿过它们
  // 如果检测到碰撞，就修改result里的路由点，添加转弯绕开
  // （具体的碰撞检测逻辑可以根据顶点的矩形边界来实现）
}
// 把自定义样式设为默认边缘样式
graph.setDefaultEdgeStyle(customOrthoEdgeStyle);

这样就能完全掌控边的路由逻辑，实现你想要的绕开效果啦！

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