Bootstrap

@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
});
;