ant X6 连线绕过节点

Ant Design Pro X6 是一个基于 React 和 Ant Design 的企业级中后台前端/设计解决方案，它结合了 Ant Design 设计体系和 X6 图形库的能力，提供了一套面向企业级产品设计和开发的完整工作流。

在使用 Ant Design Pro X6 进行流程图设计时，连线绕过节点通常是指在绘制连线时，希望连线能够自动避开某些图形节点，避免它们之间的视觉干扰。这种功能可以提高图表的可读性和美观性。在 X6 中，可以通过设置连线的路由方式（router）来实现连线绕过节点的效果。

X6 提供了几种路由方式，比如直角路由（manhattan）、直线路由（orthogonal）等，其中直角路由可以使得连线在遇到节点时自动进行转向，从而绕过节点。你可以通过设置连线的 router 属性来控制这一行为。

例如，你可以在连线的配置中这样设置：

const edge = new Edge({
  source: { x: 40, y: 40 },
  target: { x: 300, y: 200 },
  router: {
    name: 'manhattan',    // 使用直角路由
  },
});

以上代码会创建一条连线，当连线遇到其他节点时会自动使用直角的方式绕过它们。

相关问题

ant X6 er图连线时候如何自动绕过中间阻挡的node节点

Ant Design X6 的 ER 图连接线（Edge）如果需要自动绕过中间的 Node 节点，可以利用其提供的 `bendpoints` 和 `autoBend` 属性来控制路径弯曲。

在创建 Edge 时，你可以设置 `bendpoints` 数组，这个数组包含了两个坐标，表示线段的起始和结束位置，X6 会尝试在这两点之间寻找最优路径。如果你希望路径自动避开某个 Node，那么在计算路径时，你可以将 Node 的位置考虑进去，使得路径尽量远离它。

例如：

const edge = {
  id: 'edge-1',
  source: 'node-1',
  target: 'node-3', // 目标节点
  bendpoints: [ // 自动弯曲路径
    // 起始点坐标
    { x: start.x, y: start.y },
    // 结束点坐标
    { x: end.x, y: end.y },
    // 中间绕过的 Node 的坐标，比如
    { x: node.x - offset, y: node.y + offset }, // 避开 Node
  ],
  autoBend: true, // 开启自动弯曲模式
};

在这里，`offset` 是一个变量，用于调整避开 Node 的距离。注意，`autoBend` 属性启用后，X6 将自动优化路径布局，避免硬编码弯点可能导致的问题。