实现SVG贝塞尔曲线拖拽点始终在路径上并更新曲线

你当前用Q命令直接绑定拖拽点坐标的方式，是把拖拽点当成了二次贝塞尔曲线的控制点——而控制点本身并不在曲线上，这就是问题所在。要让拖拽点始终贴合曲线并拉动曲线变形，需要通过曲线公式反推控制点的位置，确保曲线经过拖拽点。

二次贝塞尔曲线（Q命令）的解决方法 #

二次贝塞尔曲线的参数公式为：

B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂

其中：

• P₀是曲线起点，P₂是终点
• P₁是控制点
• t∈[0,1]是曲线参数，对应点在曲线上的位置

假设你希望拖拽点(draggable.x, draggable.y)对应曲线上固定的t值（比如t=0.5，即曲线中点），可以通过公式变形反推控制点P₁的坐标：
P₁ = [B(t) - (1-t)²P₀ - t²P₂] / [2(1-t)t]

示例代码 #

// 固定起点和终点
const start = { x: 10, y: 0 };
const end = { x: 400, y: 390 };
// 设定拖拽点在曲线上的参数位置，这里取中点t=0.5
const t = 0.5;

// 计算控制点坐标
const controlX = (draggable.x - Math.pow(1 - t, 2)*start.x - Math.pow(t, 2)*end.x) / (2*(1 - t)*t);
const controlY = (draggable.y - Math.pow(1 - t, 2)*start.y - Math.pow(t, 2)*end.y) / (2*(1 - t)*t);

// 生成路径d属性
const d = `M${start.x},${start.y} Q ${controlX} ${controlY} ${end.x},${end.y}`;

额外说明 #

• 如果不想固定t值，也可以在拖拽开始时通过求解二次方程，计算当前拖拽点对应的t值，但逻辑会更复杂。
• 若使用三次贝塞尔曲线（C/S命令），原理类似：需要根据拖拽点的位置反推两个控制点的坐标，通常可以添加约束（比如保持切线方向）来简化计算。

内容的提问来源于stack exchange，提问作者Wimal Weerawansa