javascript - 我可以从全贝塞尔曲线制作半贝塞尔曲线吗？

Question

以 JavaScript 绘制典型的三次贝塞尔曲线(这个例子我用谷歌搜索...) http://jsfiddle.net/atsanche/K38kM/

具体来说，这两行:

context.moveTo(188, 130);
context.bezierCurveTo(170, 10, 350, 10, 388, 170);

我们有一个立方贝塞尔曲线，它开始于 188, 130，结束于 388, 170，控制点为 a:170, 10 和 b:350, 10

我的问题是是否可以通过数学方式调整终点和控制点以制作另一条曲线，该曲线只是原始曲线的一部分？

理想的结果是能够从一开始就采用贝塞尔曲线的百分比切片，其中 0.5 将仅绘制贝塞尔曲线的一半，0.75 将绘制大部分贝塞尔曲线(依此类推)

我已经开始使用 De Castelau 的一些实现，它们允许我追踪 [0...1] 之间的贝塞尔曲线轮廓，但这并没有提供一种从数学上重新计算终点和控制点的方法贝塞尔曲线制作子贝塞尔曲线...

提前致谢

Answer 1

De Casteljau 确实是要走的算法。对于由4个控制点P0、P1、P2、P3定义的三次贝塞尔曲线，子贝塞尔曲线(0,u)的控制点为P0、Q0、R0、S0，子贝塞尔曲线的控制点(u, 1) 是 S0、R1、Q2 和 P3，其中

Q0 = (1-u)*P0 + u*P1
Q1 = (1-u)*P1 + u*P2
Q2 = (1-u)*P2 + u*P3
R0 = (1-u)*Q0 + u*Q1
R1 = (1-u)*Q1 + u*Q2
S0 = (1-u)*R0 + u*R1

请注意，如果您想从原始贝塞尔曲线中“提取”一段 (u1, u2)，则必须应用 De Casteljau 两次。第一次将输入贝塞尔曲线 C(t) 拆分为参数 u1 处的 C1(t) 和 C2(t)，第二次您必须将曲线 C2(t) 拆分为调整后的参数 u2* = (u2 -u1)/(1-u1).