如何限制贝塞尔曲线的控制点始终位于端点连线上-js教程-PHP中文网

如何限制贝塞尔曲线的控制点始终位于端点连线上

本文介绍如何通过数学计算动态调整二次贝塞尔曲线的控制点，使其严格约束在起点与终点的连线段上，从而实现“锚点贴线”效果，适用于交互式绘图、路径约束等场景。

本文介绍如何通过数学计算动态调整二次贝塞尔曲线的控制点，使其严格约束在起点与终点的连线段上，从而实现“锚点贴线”效果，适用于交互式绘图、路径约束等场景。

在 SVG 或 Canvas 中绘制二次贝塞尔曲线（Q 指令）时，控制点（control point）默认可自由放置，但有时需强制其始终位于起点（P₀）与终点（P₂）的线段上——即让控制点成为该线段上的一个插值点（如中点、1/3分点等），从而保证曲线形态可控、对称且不“溢出”直线区域。这在 UI 交互（如拖拽调节曲线弧度）、数据可视化路径约束或物理模拟中尤为实用。

核心原理：线性插值约束

设起点为 P₀ = (x₀, y₀)，终点为 P₂ = (x₂, y₂)，我们希望控制点 P₁ = (x₁, y₁) 始终落在线段 P₀→P₂ 上。根据向量插值公式：

P₁ = P₀ + t × (P₂ − P₀),  其中 t ∈ [0, 1]

当 t = 0 时，P₁ = P₀（退化为直线）；t = 0.5 时，P₁ 为中点；t = 1 时，P₁ = P₂。此时生成的贝塞尔曲线将完全“压扁”在线段上（t=0 或 t=1 时为直线；t∈(0,1) 时为轻微凸起的对称弧线）。

实现代码（含安全边界校验）

// 将控制点投影到 P0→P2 线段上，并支持 t 参数调节位置
function constrainControlPointOnLine(p0, p2, t = 0.5) {
  t = Math.max(0, Math.min(1, t)); // 确保 t 在 [0, 1] 范围内
  return {
    x: p0.x + t * (p2.x - p0.x),
    y: p0.y + t * (p2.y - p0.y)
  };
}

// 生成符合约束的 SVG path 数据（二次贝塞尔）
function getConstrainedQuadraticPath(p0, p2, t = 0.5) {
  const p1 = constrainControlPointOnLine(p0, p2, t);
  return `M${p0.x},${p0.y} Q${p1.x},${p1.y} ${p2.x},${p2.y}`;
}

// 示例用法：
const start = { x: 50, y: 100 };
const end   = { x: 300, y: 100 };
const path  = getConstrainedQuadraticPath(start, end, 0.7); 
// → "M50,100 Q225,100 300,100" （控制点在 70% 处，y 始终为 100）