如何计算二次贝塞尔曲线的控制点

已知曲线起点、终点和曲线上某一点（如顶点）及其对应参数 t，可通过解析贝塞尔公式反推唯一控制点坐标，本文提供完整推导、可直接调用的函数及使用注意事项。

在图形渲染与图布局（如力导向图、节点链接图）中，常需用二次贝塞尔曲线实现平滑避让效果——例如当连接线经过某节点区域时，让曲线“拱起”绕开该节点。此时，你已知：

• 起点 $ P_0 = (s_x, s_y) $（链路起点）
• 终点 $ P_2 = (e_x, e_y) $（链路终点）
• 曲线上某一关键点 $ B(t) = (t_x, t_y) $（如你计算出的“顶部避让点”）
• 对应参数 $ t \in (0,1) $（非端点，通常取 0.5 可得中点，但你已通过距离比例精确计算）

二次贝塞尔曲线的标准参数方程为：
$$ B(t) = (1-t)^2 P_0 + 2t(1-t) P_1 + t^2 P_2 $$
其中 $ P_1 = (x, y) $ 即待求控制点。将上式按坐标分量展开并整理，解出 $ P_1 $：

$$ t_x = (1-t)^2 s_x + 2t(1-t) x + t^2 e_x \ \Rightarrow x = \frac{t_x - (1-t)^2 s_x - t^2 e_x}{2t(1-t)} $$

同理对 y 坐标。因此得到稳定、无歧义的解析解（前提是 $ t \neq 0 $ 且 $ t \neq 1 $）：

export function findControlPoint(
  s_x: number, s_y: number,   // 起点
  t_x: number, t_y: number,   // 曲线上已知点（如顶点）
  e_x: number, e_y: number,   // 终点
  t: number                   // 该点对应的参数值，0 < t < 1
): { x: number; y: number } {
  const inv = 1 - t;
  const denominator = 2 * inv * t;

  // 防止除零（t 接近 0 或 1 时数值不稳定）
  if (Math.abs(denominator) < 1e-8) {
    throw new Error(`Invalid t value: ${t}. Must be strictly between 0 and 1.`);
  }

  return {
    x: (t_x - inv * inv * s_x - t * t * e_x) / denominator,
    y: (t_y - inv * inv * s_y - t * t * e_y) / denominator,
  };
}

✅ 使用示例（配合你的避让逻辑）：

const start = { x: link.from.x, y: link.from.y };
const end   = { x: link.to.x,   y: link.to.y };
const top   = { 
  x: node.x + node.radius * Math.sin(angle) + 10 * Math.sign(Math.sin(angle)),
  y: node.y + node.radius * Math.cos(angle) + 10 * Math.sign(Math.cos(angle))
};
const t = /* 你已计算的距离比值 */;

const control = findControlPoint(
  start.x, start.y,
  top.x, top.y,
  end.x, end.y,
  t
);

// 绘制二次贝塞尔曲线： moveTo(start) → quadraticCurveTo(control, end)

⚠️ 关键注意事项：

• t 必须严格介于 0 和 1 之间：若 t=0 或 t=1，分母为零，且此时已知点即为端点，无法唯一确定控制点；
• 几何合理性校验：所得控制点可能使曲线“反向弯曲”，建议在可视化前检查曲率方向（例如通过叉积判断 $ (P_1 - P_0) \times (P_2 - P_1) $ 符号）；
• 性能优化：该函数为纯数学计算，无副作用，可放心用于高频图更新场景（如拖拽节点时实时重算）；
• 扩展性提示：若需更高自由度（如强制水平/垂直切线），可在控制点基础上施加约束投影，但本解已满足绝大多数避让需求。

掌握此方法后，你不仅能精准生成绕开节点的平滑链接，还可将其泛化至动态路径规划、动画轨迹插值等场景——核心思想始终是：从参数化定义出发，逆向求解自

由变量。