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

Question

链接:官方SVG参考

你好男人和女人,我在速记曲线(由路径数据中的S或s定义)bezier曲线定义为SVG路径时遇到了一些麻烦.具体来说,如何计算第一个控制点.

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

接下来是带有第一个控制点(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