canvas贝塞尔曲线运动,贝塞尔曲线生成算法
写在最前
由于原生画布最高只支持三阶贝塞尔曲线，想添加多个控制点怎么办？(即使大部分复杂曲线都可以用三阶贝塞尔来模拟)同时，我们很难直观地知道设置了多少个控制点才能形成我们想要的曲线。为了解决以上两个痛点，社区里似乎还没有N阶的解决方案(js版)，所以这一次作者很认真的开放了bezierMaker.js！
BezierMaker.js理论上支持n阶贝塞尔曲线的生成，同时为开发者提供了一个添加和拖动控制点生成一组绘制动画的测试场。对于开发者来说，知道不同位置的控制点对应不同的生成曲线是非常直观的。
如果你喜欢这个作品，欢迎星。毕竟明星来之不易。
项目地址：这里
为什么需要一个试验场？
在绘制复杂的高次贝塞尔曲线时，你无法知道你需要的曲线的控制点的确切位置。通过在测试场模拟，可以实时获得控制点的坐标值，将获得的点坐标转换成对象数组，传入BezierMaker类，生成目标曲线。
翻译
功能
[x]可以在测试点添加任意数量的控制点[x]测试点支持曲线绘制的动画[x]可以自由拖动控制点[x]可以显示贝塞尔曲线形成过程的切线[x]。3阶及以下贝塞尔曲线的绘制采用原生API引入。
脚本src=。/bezier maker . js /script绘制
上面的效果图显示了试验场地的使用情况。通过测试站点得到控制点的准确坐标后，可以调用bezierMaker.js直接绘制曲线。
/* * * canvas canvas * bezierctrnodesarr控制点数组的dom对象，包含x，Coordinate * color curve color */var canvas=document . getelementbyid( canvas )//在3阶之前，采用native方法实现var ARR0=[{x: 70，y: 25}，{x: 24，y: 51}] var ARR1=[{x: 233，y y:279}，{x:240，y:51 }]var arr 2=[{ x:25 }画贝塞尔()贝塞尔1。画贝塞尔()贝塞尔2。画贝塞尔()贝塞尔3。画贝塞尔()贝塞尔4。画
当控制点少于三个时，将使用本机API接口。当有两个以上的控制点时，我们可以通过自己的函数来绘制。
核心原理
绘制贝塞尔曲线
绘制贝塞尔曲线的关键在于贝塞尔公式的应用；
这个公式中的P0-Pn表示从起点到各控制点再到终点各点的各种幂运算和t的比例。
贝塞尔制作器。原型。贝塞尔=函数(t){//贝塞尔公式调用var x=0，y=0，beziertrlnodesarr=this。beziertrlnodesarr，//控制点数组n=bezierctrnodesarr . length-1，self=this bezierctrnodesarr . foreach(function(item，index) {if(！index) { x=item.x * Math.pow(( 1 - t)，n - index) * Math.pow(t，index) y=item.y * Math.pow(( 1 - t)，n - index) * Math.pow(t，Index)} else {//factorial为阶乘函数x=self . factorial(N)/self . factorial(Index)/self . factorial(N-Index)* item . x * math . pow((1-t))，n - index) * Math.pow(t，Index)y=1 index)})return { x:x，y: y}}遍历所有点，根据当前比例t (0=t=1)的值计算当前点在贝塞尔曲线上的坐标x，y。 作者将t的值分为1000份，即每次操作t=0.01。此时计算出的x，y是贝塞尔曲线分成1000份后的一个点。当t的值从0到1遍历1000次，就产生了x和y的1000个对应坐标，然后通过依次追踪点和线就可以模拟出高次贝塞尔曲线。
对于贝塞尔公式的推导，笔者将在下文中具体讲解。现在你只需要知道，我们通过贝塞尔公式计算出实际贝塞尔曲线分成1000份的点，然后用直线连接这些点就可以模拟出相似的曲线。
模拟场地贝塞尔曲线动画生成的实现
这部分相关代码可以在这里参考。
整体思路是用递归的方法，把第一层的每个控制点当作一阶贝塞尔函数来计算下一层的控制点，并据此连接。具体的逻辑作者就留给贝塞尔曲线公式原理的深入讲解来一起梳理考点动画生成原理吧~
小结
作者一直想开源一些东西(但是蔬菜没什么好写的)，但是平时用的东西都写了，轮子的重建还不如别人的。这一次，我们发现了一个看似空白的区域。所以我非常郑重的决定开源。贝塞尔在gayhub的高级应用多是Android的实现，前端领域还有很多地方可以拓展的更多。欢迎讨论~多多批评！
最后
项目地址：这里
考点地址：一定要进来玩。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。