【千题案例】TypeScript获取两点之间的距离 | 中点 | 补点 | 向量 | 角度

        我们在编写一些瞄准、绘制、擦除等功能函数时，经常会遇到计算两点之间的一些参数，那本篇文章就来讲一下两点之间的一系列参数计算。 

---

目录

1️⃣ 两点之间的距离

①实现原理

②代码实现及结果

2️⃣两点之间的中点

①实现原理

②代码实现及结果

3️⃣两点之间的补点

①实现原理

②代码实现及结果

4️⃣两点之间的向量

①实现原理

②代码实现及结果

5️⃣两点之间的角度

①实现原理

②代码实现及结果

---

1️⃣ 两点之间的距离

①实现原理

        两点之间的直线距离就是x轴距离的平方与y轴距离的平方之和的平方根。设两个点A、B以及坐标分别为 A(X1,Y1),B(X2,Y2)，则A和B两点之间的距离为：

②代码实现及结果

        *代码块

 /*** 计算两点之间的距离* @param startPoint 起点坐标* @param endPoint 终点坐标* @returns 返回距离*/getDistancetweenTwoPoint(startPoint, endPoint) {let lngDiff = endPoint.x - startPoint.x; //起点与终点的x差let latDiff = endPoint.y - startPoint.y; //起点与终点的y差return Math.sqrt(lngDiff * lngDiff + latDiff * latDiff);//返回根据公式计算的结果}

        *实现及结果

UseFunction() {let startPoint = cc.v2(0, 1);let endPoint = cc.v2(0, 3)let result = this.getDistancetweenTwoPoint(startPoint, endPoint)cc.log(result)}//结果：   2

2️⃣两点之间的中点

①实现原理

        有两点 A(x1, y1) B(x2, y2) 则它们的中点P的坐标为（(x1+x2)/2, (y1+y2)/2）

②代码实现及结果

        *代码块

  /*** 计算两点之间的中点* @param a 起点坐标* @param b 终点坐标* @returns 返回中点坐标*/getMidBetweenTwoPoint(a, b) {let Midx = (a.x + b.x) / 2;let Midy = (a.y + b.y) / 2;return cc.v2(Midx, Midy)}

        *实现及结果

 UseFunction() {let startPoint = cc.v2(0, 1);let endPoint = cc.v2(0, 3)let result = this.getMidBetweenTwoPoint(startPoint, endPoint)cc.log(result)}//结果：  （0，2） 

3️⃣两点之间的补点

①实现原理

        有两点 A(x1, y1) B(x2, y2) ，计算两点之间的距离根据距离除以步长(每多少米补一个点)计算出需要补点的总数，用B点的X2,Y2减去A点的X1，Y1得到X和Y的差，用X和Y的差除以补点的总数得到每步的X和Y差,循环补点的总数，每次在A点的X1，Y1的基础上加上经纬度差乘以总数。

②代码实现及结果

        *代码块

     /*** 计算两点之间的补点* @param startPoint 起点* @param endPoint 终点* @param distance 两点之间的距离* @param stepSize 每步的距离* @param containBoth 是否包含起点和终点* @returns 返回点的坐标数组*/getFillPoints(startPoint, endPoint, distance, stepSize, containBoth) {let lngDiff = endPoint.x - startPoint.x; //起点与终点的x差let latDiff = endPoint.y - startPoint.y; //起点与终点的y差let n = Math.ceil(distance / stepSize); //补点的总数let a = lngDiff / n; //每步的x差let b = latDiff / n; //每步的y差let pointsArr = []; //返回点的坐标数组//将补点放入坐标数组（不包含起点和终点）for (let i = 1; i < n; i++) {let x = startPoint.x + a * i;let y = startPoint.y + b * i;pointsArr.push(cc.v2(x, y));}//将起点和终点放入坐标数组if (containBoth) {pointsArr.unshift(startPoint); //添加起点pointsArr.push(endPoint); //添加终点}return pointsArr;}

        *实现及结果

  UseFunction() {//两点坐标let Pointa = cc.v2(0, 0)let Pointb = cc.v2(0, 5)let distance = Tools.getDistance(Pointa, Pointb); //两点的距离let stepSize = 1; //每步的距离let containBoth = true; //包含两端let allPoints = this.getFillPoints(Pointa, Pointb, distance, stepSize, containBoth);cc.log(allPoints)}
结果：（0，0）（0，1）（0，2）（0，3）（0，4）（0，5）

4️⃣两点之间的向量

①实现原理

        有两点 A(a1,b1),B(a2,b2,),则向量AB为B点坐标减A点坐标,即向量AB=(a2-a1,b2-b1)

②代码实现及结果

        *代码块

  /*** 计算两点之间的向量* @param a 坐标a* @param b 坐标b* @returns 返回向量*/getVectorBetweenTwoPoint(a, b) {let Midx = (b.x - a.x)let Midy = (b.y - a.y)return cc.v2(Midx, Midy)}

        *实现及结果

 UseFunction() {let startPoint = cc.v2(0, 1);let endPoint = cc.v2(0, 3)let result = this.getVectorBetweenTwoPoint(startPoint, endPoint)cc.log(result)}//结果：  （0，2） 

5️⃣两点之间的角度

①实现原理

        计算两点的正切值并获取角度：点一（X1,Y1），点二（X2,Y2）：  Math.Atan2((Y2 - Y1), (X2 - X2)) * 180 / Math.PI

注：Math.Atan2() 返回从原点 (0,0) 到 (x,y) 点的线段与 x 轴正方向之间的平面角度 (弧度值)，也就是 Math.atan2(y,x)

math.pi 返回一个浮点值 π， 一般指圆周率，圆周率 PI (3.1415...)

②代码实现及结果

        *代码块

  /*** 计算两点之间的角度* @param a 坐标a* @param b 坐标b* @returns 返回角度*/getAngleBetweenTwoPoint(a, b) {let result=Math.Atan2((b.y- a.y), (b.x - a.x)) * 180 / Math.PI;return result}

        *实现及结果

 UseFunction() {let startPoint = cc.v2(0, 0);let endPoint = cc.v2(1, 1)let result = this.getAngleBetweenTwoPoint(startPoint, endPoint)cc.log(result)}//结果：  45 

---

        在进行诸如此类的运算的时候，更多考验的是对数学公式和对Math类的的掌握，Math 类包含用于执行基本数学运算的方法，如初等指数、对数、平方根和三角函数等，多加练习就可以熟练运用了。