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

标签 javascript canvas bezier

以 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] 之间的贝塞尔曲线轮廓,但这并没有提供一种从数学上重新计算终点和控制点的方法贝塞尔曲线制作子贝塞尔曲线...

提前致谢

最佳答案

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).

关于javascript - 我可以从全贝塞尔曲线制作半贝塞尔曲线吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25722680/

相关文章:

python - Tkinter - Canvas 并排问题

javascript - Canvas 未在 router.get 方法中更新

ios - lineWidth 未正确渲染贝塞尔曲线宽度

javascript - 更改选择元素?

javascript - 正则表达式不允许前导空格,但允许其他任何地方,并且要求至少一个大写字母和一个小写字母

javascript - Canvas onClick 添加到数组

ios - 创建一个带有圆形顶部边缘的 UIView

html - 在 HTML 5 2d Canvas 上下文中查找曲线上的点

javascript - 完成上一个函数后运行函数

javascript - 我怎样才能欺骗一个查看 JavaScript 对象 'navigator' 的网站,让其知道我不在 Windows 上?