使用二阶贝塞尔曲线画出两点之间的连线

使用二阶贝塞尔曲线画出两点之间的连线

游戏中需要手动生成多个点来连接两个关卡，以达到更加可视化的目的。
最终效果如图：

二阶贝塞尔曲线公式

B(t) = (1-t)²P₀ + 2t(1-t)P₁+t²P₂， t∈[0,1]

二阶贝塞尔动图展示

要得到贝塞尔曲线，必须知道三个点的坐标，及P₀起点，控制点P₁，终点P₂。
P₀（x₁,y₁）， P₁（c_x,c_y） ，P₂（x₂,y₂）
然后得到x，y随 t（时间）变化的公式：
x = (1-t)² * x₁ + 2t(1-t)c_x + t²x₂ ;
y = (1-t)² * y₁ + 2t(1-t)*c_y + t²*y₂ ;

具体代码如下

  /**
   * 
   * @param {返回的点的数组长度} num 
   * @param {起点} point1 
   * @param {控制点} point2 
   * @param {中点} point3 
   */
  getBezierPoints(num, point1, point2, point3) {
      let pointList = [];
      let x1 = point1.x, y1 = point1.y;
      let x2 = point3.x, y2 = point3.y;
      let cx = point2.x, cy = point2.y;
      let t = 0;
      for (let i = 1; i < num + 1; i++) {
      //用i当作t，算出点坐标，放入数组
          t = i / num;
          let x = Math.pow(1 - t, 2) * x1 + 2 * t * (1 - t) * cx + Math.pow(t, 2) * x2;
          let y = Math.pow(1 - t, 2) * y1 + 2 * t * (1 - t) * cy + Math.pow(t, 2) * y2;
          pointList.push(cc.v2(x, y))
      }
      return pointList;
  }

通过此方法，得到贝塞尔曲线路径中的点，然后在点的位置生成小圆点图片即可，
由于两个关卡之间的长度不同，也需要改变生成点数（num）的多少，

let distance = Math.sqrt(Math.pow(endPoint.sub(startPoint).x, 2) + Math.pow(endPoint.sub(startPoint).y, 2)); 

然后通过具体的distance来生成想要的点的数组长度。

控制点的位置

贝塞尔曲线的控制点是个非常重要的参数，设置好控制点的位置，才能达到想要的效果，比如说想要将贝塞尔路径上的点是左右两边平均分布，就需要将控制点设置在起点和终点连线的垂直线上。
如图：
最后，cocoscreator提供有贝塞尔运动的api，cc.bezierBy和cc.bezierTo，但是这个api是变速运动的，给大家分享一个匀速运动的文章

友情链接: 匀速贝塞尔曲线（二阶、三阶，可以在线演示，github可以下载工程）.