@xyflow/react 路径生成函数

1、getBezierPath

• 生成三次贝塞尔曲线
• 最平滑的曲线效果
• 适合需要优雅流畅连接的场景

2、getSimpleBezierPath

• 生成简单的贝塞尔曲线
• 比 getBezierPath 更简单的曲线效果
• 计算量较小

3、getStraightPath

• 生成直线路径
• 最简单的连接方式
• 适合简单的点对点连接

4、getSmoothStepPath

• 生成平滑的阶梯状路径
• 支持圆角
• 适合流程图和正交布局
• 可以通过 borderRadius 参数控制拐角圆滑度

5、getEdgeCenter

• 计算边的中心点
• 通常用于在边上添加标签或装饰

基本用法

// 贝塞尔曲线
const [path] = getBezierPath({
  sourceX,
  sourceY,
  targetX,
  targetY
});

// 直线
const [path] = getStraightPath({
  sourceX,
  sourceY,
  targetX,
  targetY
});

// 平滑阶梯
const [path] = getSmoothStepPath({
  sourceX,
  sourceY,
  targetX,
  targetY,
  borderRadius: 5 // 可选参数，控制拐角圆滑度
});

// 获取边的中心点
const center = getEdgeCenter({
  sourceX,
  sourceY,
  targetX,
  targetY
});