我有一个 html5 svg 路径标签，如下图 1 所示。
现在我想在可拖动助手的帮助下 reshape SVG 路径(在上图中显示为小圆圈)。我能够用开始和结束助手正确地完成它。但我无法使用中间助手来做到这一点。每当我尝试在中间助手的帮助下执行此操作时，中间助手就会开始远离曲线，如图 2 所示。我想避免这种情况并保持曲线始终穿过中间助手，如图 1 所示。这是上图中出现的曲线的 svg 路径标签的 d 属性:
M 237 359 q 536 -54 208 -267
我只想以与上面相同的模式使用带有 M 的 q 命令，因为 svg 路径元素的开始和结束标记只有在使用 时才能正确自动旋转>Q 和 q 命令。所以我不想失去这种行为。我在这里唯一想知道的是以这种方式计算 d 属性的逻辑，以便每当拖动中间助手时曲线总是只穿过中间助手，就像图 1 和起点/终点保持在同一位置。我正在使用 Jquery-UI Draggable 来拖动助手。
最佳答案
svg 路径中的 Q/q 命令描述了一条二次贝塞尔曲线，其中第二个控制点(即 q 命令的前两个坐标值)始终不在曲线上。因此，您必须计算一条二次贝塞尔曲线，对您拥有的 3 个点进行插值，如下所示:
1) 假设您有 3 个点:A、B、C，其中 A 为起点，B 为中点，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)，以便我们可以直接使用点坐标。
关于javascript - 如何根据可拖动助手精确更改 svg 路径的控制点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49202516/