计算速记/平滑SVG路径贝塞尔曲线的控制点

Question

链接：Official SVG Reference

[男女您好，我在定义为SVG路径的速记（由path数据中的S或s定义）时遇到一些麻烦。具体来说，如何计算第一个控制点。

说我们有一个带有控制点(X1, Y1)和(X2, Y2)，端点(X3, Y3)和起点(X0, Y0)的curveto命令。

接下来是带有第一控制点(X4, Y4)和第二控制点(X5, Y5)的速记/平滑曲线命令。为了简单起见，假设所有内容都在绝对坐标中。

如何从其他已知点计算未知的第一个控制点(X4, Y4)？

Answer 1

您的第一个点是上一条曲线的最后一个点。在这种情况下，它将是（x3，y3）。然后，速记中的第二个点是速记所代表的曲线长度的终点。

如果我们将您的路径翻译成两个完整版本，我们将拥有：

M X0, Y0 C X1, Y1 X2, Y2 X3, Y3 
M X3, Y3 C XR, YR X4, Y4 X5, Y5 

其中XR，YR是前一条曲线的最后一个控制点围绕当前曲线的第一点的反射。

XR，YR只是​​P2关于P3的反映，所以：

XR = 2*X3 - X2 and 
YR = 2*Y3 - Y2

Answer 2

您可以将最后一条曲线的最后一个控制点和最后一条曲线的终点（这是新曲线中的第一个点）视为一条直线，并且镜像的控制点应位于该直线上等距离到最后一个控制点到最后一个终点的距离

Answer 3

我找到了this。我可以引用的最短答案是：

我们用一条线连接围绕起点和终点的锚点（我们将其称为opposed-lines：]

为了使线条平滑，每个控制点的位置必须相对于其opposed-line：

• 控制点在平行于opposed-line的线上，并且与当前锚点相切。
• 在此切线上，从锚点到控制点的距离取决于opposed-line的长度和任意的smoothing比。
• 开始控制点与opposed-line的方向相同，而结束控制点向后的方向。

// When 'current' is the first or last point of the array
// 'previous' or 'next' don't exist.
// Replace with 'current'
const p = previous || current
const n = next || current

---

我的解释：

• 计算每对“锚点”（实际曲线）点的2个控制点。
• 如果正在计算点1（start / end - 1）和2（start + 1 / end）：
  • 第一个控制点从点1（start）平行于{从点0（start - 1）到点2（start + 1）的线}。
  • 第二个控制点从点2（end）向后平行于{从点1（end - 1）到点3（end + 1）的线}。
• 从点1或2到相应控制点的距离是曲线的所需平滑度变量（0.0-1.0）与平行线长度的比率。 （您可以使用基本触发，即角度使用cos（）和sin（）。]
• 对于端点（端点之前/之后没有端点），将start - 1替换为start或将end + 1替换为end。