如何根据可拖动助手准确更改 svg 路径的控制点
How to change control point of svg path exactly according to draggable helper
我有一个 html5 svg 路径标签，如下图 1 所示。
现在我想借助可拖动助手（在上图中显示为小圆圈）重塑 SVG 路径。我可以使用开始和结束助手正确地完成它。但我无法使用中间助手。每当我在中间助手的帮助下尝试这样做时，中间助手就会开始远离曲线，如图 2 所示。我想避免这种情况，并保持曲线始终穿过中间助手，如图 1 所示。这是上图中出现的曲线的 svg 路径标记的 d 属性：
M 237 359 q 536 -54 208 -267
我只想在与上面相同的模式中使用 q 命令和 M 因为 svg 路径元素的开始和结束标记只有在 Q 和q 命令。所以我不想放弃这种行为。我在这里唯一想知道的是以这种方式计算 d 属性的逻辑，以便无论何时拖动中间辅助器，曲线总是仅像图像 1 和 [=28 中那样穿过中间辅助器=] 点保持在同一位置。我正在使用 Jquery-UI draggable 来拖动助手。
svg 路径中的 Q/q 命令描述了二次贝塞尔曲线，其中第二个控制点（即 q 命令的前两个坐标值）将始终不在曲线上。因此，您将必须计算二次贝塞尔曲线，对您拥有的 3 个点进行插值，如下所示：
1) 假设你有3个点A，B和C，其中A是起点，B是mid-point，C是终点。
2) 计算 t = |AB|/(|AB|+|BC|) 其中 |AB|是 A 点和 B 点之间的距离，|BC|是 B 点和 C 点之间的距离。
3) 计算二次贝塞尔曲线的中间控制点为
P1= (B - A(1-t)^2 - C*t^2)/(2*t*(1-t))
然后，您可以使用 svg 路径命令绘制此二次贝塞尔曲线
d="M Ax Ay Q P1x P1y Cx Cy"
其中Ax, At, P1x, P1y, Cx, Cy分别是A, P1, C点的x, y分量。这里使用Q命令（而不是q），这样我们就可以使用点坐标直接地。
我有一个 html5 svg 路径标签，如下图 1 所示。
现在我想借助可拖动助手（在上图中显示为小圆圈）重塑 SVG 路径。我可以使用开始和结束助手正确地完成它。但我无法使用中间助手。每当我在中间助手的帮助下尝试这样做时，中间助手就会开始远离曲线，如图 2 所示。我想避免这种情况，并保持曲线始终穿过中间助手，如图 1 所示。这是上图中出现的曲线的 svg 路径标记的 d 属性：
M 237 359 q 536 -54 208 -267
我只想在与上面相同的模式中使用 q 命令和 M 因为 svg 路径元素的开始和结束标记只有在 Q 和q 命令。所以我不想放弃这种行为。我在这里唯一想知道的是以这种方式计算 d 属性的逻辑，以便无论何时拖动中间辅助器，曲线总是仅像图像 1 和 [=28 中那样穿过中间辅助器=] 点保持在同一位置。我正在使用 Jquery-UI draggable 来拖动助手。
svg 路径中的 Q/q 命令描述了二次贝塞尔曲线，其中第二个控制点（即 q 命令的前两个坐标值）将始终不在曲线上。因此，您将必须计算二次贝塞尔曲线，对您拥有的 3 个点进行插值，如下所示：
1) 假设你有3个点A，B和C，其中A是起点，B是mid-point，C是终点。
2) 计算 t = |AB|/(|AB|+|BC|) 其中 |AB|是 A 点和 B 点之间的距离，|BC|是 B 点和 C 点之间的距离。
3) 计算二次贝塞尔曲线的中间控制点为
P1= (B - A(1-t)^2 - C*t^2)/(2*t*(1-t))
然后，您可以使用 svg 路径命令绘制此二次贝塞尔曲线
d="M Ax Ay Q P1x P1y Cx Cy"
其中Ax, At, P1x, P1y, Cx, Cy分别是A, P1, C点的x, y分量。这里使用Q命令（而不是q），这样我们就可以使用点坐标直接地。