html5 – 贝塞尔曲线的长度始终相同

我正在开发 HTML5画布游戏.

我想在两点之间绘制一个S形的三次贝塞尔曲线,但我正在寻找一种计算控制点坐标的方法,这样无论这些点有多近,曲线本身总是相同的长度,直到它到达曲线变成直线的点.

解决方法

这可以用数字方法解决.我假设你有一个带有4个控制点的立方贝塞尔曲线.
在每个步骤中,您有第一个(P0)和最后一个(P3)点,并且您想要计算P1和P2,使得总长度是恒定的.

添加此约束会消除一个自由度,因此我们有1个左边(从4开始,确定终点(-2),而常量长度是另一个-1).所以你需要做出决定.

贝塞尔曲线是在0和1之间定义的多项式,需要积分在元素之和的平方根(2d?)上.对于一个三次贝塞尔曲线,这意味着一个6度多项式的sqrt,其中wolfram不知道如何解决.但是,如果已知所有其他控制点(或者已知某些其他约束的依赖关系),则可以为该约束设置一个预先计算值的保存表.

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码