html - 贝塞尔曲线总是相同的长度

标签 html canvas bezier

我正在使用 HTML5 canvas 开发游戏。

我想要在两点之间绘制一条 S 形三次贝塞尔曲线,但我正在寻找一种方法来计算控制点的坐标,以便曲线本身始终具有相同的长度,无论这些点有多接近是,直到它到达曲线变成直线的点。

最佳答案

这可以通过数值求解。我假设您有一个带有 4 个控制点的立方贝塞尔曲线。 在每一步中,您都有第一个 (P0) 和最后一个 (P3) 点,并且您希望计算 P1 和 P2 以使总长度保持不变。

添加此约束会删除一个自由度,因此我们还剩下 1 个自由度(从 4 开始,确定终点 (-2) 并且恒定长度是另一个 -1)。所以你需要对此做出决定。

贝塞尔曲线是定义在 0 和 1 之间的多项式,您需要在元素总和(2d?)的平方根上积分。对于三次贝塞尔曲线,这意味着 6 次多项式的 sqrt,wolfram 不知道如何求解。但是,如果您知道所有其他控制点(或知道对某些其他约束的依赖性),您可以拥有该约束的预先计算值的保存表。

关于html - 贝塞尔曲线总是相同的长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8233850/

相关文章:

c++ - 填充闭合二维曲线的算法

html - 倾斜文本在 Chrome 中变得模糊

html - Text-align 在两个相同的 div 上的工作方式不同?

javascript - 我在 Canvas 中的自定义工具提示必须显示一次而不是循环显示

math - 计算三次贝塞尔曲线的边界框

vb.net - 连接两条贝塞尔曲线

jquery - 一个大的html表格是不是不可能装进一个小空间?

javascript - 下拉菜单类似于xenForo?

javascript - 在 vue.js 应用程序中使用外部 js 库

javascript - 通过 CSS 与 HTML5 Canvas 在网页上移动图像的性能