当控制点少于3个时，会适配使用原生的API接口。当控制点多于2个后，由我们自己实现的函数进行描点绘制。
核心原理
绘制贝塞尔曲线
绘制贝塞尔曲线的核心点在于贝塞尔公式的运用：
这个公式中的P0-Pn代表了从起点到各个控制点再到终点的各点与占比t的各种幂运算。
| BezierMaker.prototype.bezier = function(t) { //贝塞尔公式调用 var x = 0, y = 0, bezierCtrlNodesArr = this.bezierCtrlNodesArr, //控制点数组 n = bezierCtrlNodesArr.length - 1, self = this bezierCtrlNodesArr.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 += self.factorial(n) / self.factorial(index) / self.factorial(n - index) * item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) } }) return { x: x, y: y } } |
对所有点进行遍历同时根据当前占比t的值(0<=t<=1)，计算出当前在贝塞尔曲线上的点坐标x,y。t的取值作者分成了1000份，即每次运算t+=0.01。此时算出的x,y即所求的贝塞尔曲线分成了1000份之后的某一点。当t值从0~1遍历1000次后生成1000个x,y对应坐标，依次描点画线即可模拟出高阶贝塞尔曲线。
对于贝塞尔公式的推导作者会在之后的文章中专门说明，现在你只需要知道我们通过贝塞尔公式计算出实际贝塞尔曲线被等分成了1000份的各点，用直线连接各点后即可模拟出类曲线。
对于模拟场贝塞尔曲线生成动画的实现
这个部分相关代码可以参考这里
整体思路是用递归的方式来将每个一层控制点当做1阶贝塞尔函数来计算下一层控制点并对应连线。具体逻辑作者会留到深入讲解贝塞尔曲线公式原理的时候一起梳理一下试验场的动画生成原理~
小结
作者一直想开源一些东西（但是菜，也没啥能写的），然而平时会用到的都被人写了，再造轮子也没别人写得好。这次也算是发现了一个貌似空白一些的区域。所以非常郑重的决定开源。贝塞尔的高级运用在gayhub中大多是安卓的实现，前端领域中还有很多地方可以更多的展开，欢迎讨论~ 多多批评！
最后
项目地址：这里✨✨
试验场地址：一定进来玩✨✨✨
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
