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

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

游戏中需要手动生成多个点来连接两个关卡,以达到更加可视化的目的。
最终效果如图:在这里插入图片描述

二阶贝塞尔曲线公式

B(t) = (1-t)2P0 + 2t(1-t)P1+t2P2, t∈[0,1]

二阶贝塞尔动图展示
在这里插入图片描述

要得到贝塞尔曲线,必须知道三个点的坐标,及P0起点,控制点P1,终点P2
P0(x1,y1), P1(cx,cy) ,P2(x2,y2
然后得到x,y随 t(时间)变化的公式:
x = (1-t)2 * x1 + 2t(1-t)cx + t2x2 ;
y = (1-t)2 * y1 + 2
t
(1-t)*cy + t2*y2 ;

具体代码如下

  /**
   * 
   * @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可以下载工程).

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值