[Feat]: 使用二次贝塞尔曲线时，两个节点之间有两条线，有办法调整两线在节点交互处的间距吗

[XuLeiii]

Describe the feature / 功能描述

使用二次贝塞尔曲线时，两个节点之间有两条线，有办法调整两线在节点交互处的间距吗

Are you willing to contribute? / 是否愿意参与贡献？

❌ No / 否

[github-actions[bot]]

@XuLeiii 您好！以下是关于您问题的自动回复：

您好，感谢您的反馈与提问！

针对「使用二次贝塞尔曲线时，两个节点之间有两条线，有办法调整两线在节点交互处的间距吗」这个需求，您可以通过调整 G6 边的 curveOffset 或 controlPoints 属性，来控制曲线的弯曲程度和相互之间的间距。

---

方案一：调整 curveOffset 属性

curveOffset 控制贝塞尔曲线的偏移距离（即曲线弯曲的高度）。如果两条边的 curveOffset 设置为不同的正负值（如 +30 和 -30），它们在节点交互处会自然分开，间距增大。

示例代码：

const edges = [
  {
    id: 'edge1',
    source: 'nodeA',
    target: 'nodeB',
    style: {
      curveOffset: 30, // 向上偏移
      type: 'quadratic',
    },
  },
  {
    id: 'edge2',
    source: 'nodeA',
    target: 'nodeB',
    style: {
      curveOffset: -30, // 向下偏移
      type: 'quadratic',
    },
  },
]

方案二：自定义 controlPoints

如果需要更精细地控制曲线走向，可以直接设置每条边的 controlPoints 属性，指定控制点的坐标，使两条边在节点交互处间距更大。

示例代码：

{
  id: 'edge1',
  source: 'nodeA',
  target: 'nodeB',
  style: {
    controlPoints: [[x1, y1]], // 控制点坐标（需根据实际布局计算）
    type: 'quadratic',
  },
}

---

推荐做法

• 对于双向边或多条边连接同一对节点，建议分别设置 curveOffset 为正负不同值。
• 如果需要动态调整，可以通过交互或数据配置，让用户选择间距大小。

---

参考文档

• G6 Quadratic Edge 官方文档
• controlPoints & curveOffset 参数解释

---

如有进一步需求或遇到具体技术问题，欢迎补充详细场景和代码片段，我们会持续跟进并协助解决！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[yvonneyx]

暂时内部实现不支持