vector - 如何将 BezierCurve 转换为 B 样条曲线？

Question

我正在尝试使用 HTML5 Canvas 创建复杂路径的动画。我将路径划分为一些贝塞尔曲线，并使用 cubic bezier curves formula 绘制每一条曲线。和 JavaScript 函数 lineTo()。问题在于曲线相互连接的点。他们的连接并不顺利。我意识到，如果我使用 B 样条曲线而不是贝塞尔曲线，这个问题就会得到解决。所以，我想知道是否有任何方法可以将贝塞尔曲线转换为b样条曲线？

Answer 1

理论上，贝塞尔曲线可以被视为单段 B 样条曲线。所以，实际上不存在“将贝塞尔曲线转换为 B 样条曲线”这样的事情。如果你能根据维基百科页面的信息实现三次贝塞尔曲线评估函数，那么根据De Boor algorithm实现B样条曲线应该不难。 。

如果您不想实现 B 样条曲线的额外长度，那么您可以做的是局部修改贝塞尔曲线的控制点，使它们平滑地连接在一起。假设您有两条三次贝塞尔曲线 C1(t)，由 P0、P1、P2 和 P3 定义，C2(t) 由 Q0、Q1、Q2 和 Q3 定义，其中 P3=Q0。通过将 P2 和 Q1 投影到经过公共(public)点 P3 的直线上，可以使 C1(t) 和 C2(t) 平滑地连接。如何选择线路的方向取决于您。