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

Posted 肩匣与橘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了千题案例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 类包含用于执行基本数学运算的方法,如初等指数、对数、平方根和三角函数等,多加练习就可以熟练运用了。

获取画布中两点之间的距离

【中文标题】获取画布中两点之间的距离【英文标题】:Get distance between two points in canvas 【发布时间】:2014-01-21 21:47:48 【问题描述】:

我有画布绘图选项卡,并希望 lineWidth 基于两个最后一次 mousemove 坐标更新之间的距离。我会自己将距离转换为宽度,我只需要知道如何获得这些点之间的距离(我已经有了这些点的坐标)。

【问题讨论】:

【参考方案1】:

这是一个快速的单线查找(x1, y1)(x2, y2) 之间的距离

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1); 

这是一个简短的可运行演示:

const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1); 

var x1 = 1
var y1 = 5

var x2 = 4
var y2 = 5

var d = distance(x1, y1, x2, y2)

console.log(`The distance between ($x1, $y1) and ($x2, $y2) is $d`)

【讨论】:

【参考方案2】:

要求2点之间的距离,需要在一个宽高等于纵横距离的直角三角形中求斜边的长度:

Math.hypot(endX - startX, endY - startY)

【讨论】:

【参考方案3】:

http://en.wikipedia.org/wiki/Euclidean_distance

如果有坐标,用公式计算距离:

var dist = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) );

如果您的平台supports the ** operator,您可以改用它:

const dist = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);

【讨论】:

【参考方案4】:

你可以用毕达哥拉斯定理做到这一点

如果你有两个点 (x1, y1) 和 (x2, y2) 那么你可以计算出 x 和 y 的差,我们称它们为 a 和 b。

var a = x1 - x2;
var b = y1 - y2;

var c = Math.sqrt( a*a + b*b );

// c is the distance

【讨论】:

你可以缩短 var c = Math.sqrt( aa + bb ); to var c = Math.hypot(a,b); a^2 + b^2 = c^2 斜边方程 x1 - x2, y1 - y2或者x2 - x1, y2 - y1有区别吗? @RamzanChasygov 在这种情况下没有区别,因为每个值都是平方的!所以订单是7 - 5 = 2 还是5 - 7 = -2 都无关紧要。 -2 * -2 = 42 * 2 = 4【参考方案5】:

两个坐标x和y之间的距离! x1 和 y1 是第一个点/位置,x2 和 y2 是第二个点/位置!

function diff (num1, num2) 
  if (num1 > num2) 
    return (num1 - num2);
   else 
    return (num2 - num1);
  
;

function dist (x1, y1, x2, y2) 
  var deltaX = diff(x1, x2);
  var deltaY = diff(y1, y2);
  var dist = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
  return (dist);
;

【讨论】:

你应该使用Math.abs而不是diff 您不需要使用diff,因为对数字进行平方将始终得到正数。如果x1 - y1 是负数,(x1 - y1) ^ 2 仍然是正数。【参考方案6】:

请注意,Math.hypot 是 ES2015 标准的一部分。 MDN doc 上还有一个很好的 polyfill 用于此功能。

所以获取距离变得像Math.hypot(x2-x1, y2-y1) 一样简单。

【讨论】:

当性能很重要时,我不建议使用Math.hypot() 来计算距离。它慢了大约 100 倍。 这里解释了为什么 Math.hypot 更慢,主要是因为它会更准确。这对你来说可能很重要,也可能无关紧要。 ***.com/questions/3764978/…【参考方案7】:

我经常在我做的事情中使用这个计算,所以我喜欢将它添加到 Math 对象中:

Math.dist=function(x1,y1,x2,y2) 
  if(!x2) x2=0; 
  if(!y2) y2=0;
  return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)); 

Math.dist(0,0, 3,4); //the output will be 5
Math.dist(1,1, 4,5); //the output will be 5
Math.dist(3,4); //the output will be 5

更新:

当你最终遇到类似这样的情况时,这种方法尤其令人高兴(我经常这样做):

varName.dist=Math.sqrt( ( (varName.paramX-varX)/2-cx )*( (varName.paramX-varX)/2-cx ) + ( (varName.paramY-varY)/2-cy )*( (varName.paramY-varY)/2-cy ) );

这可怕的事情变得更容易管理:

varName.dist=Math.dist((varName.paramX-varX)/2, (varName.paramY-varY)/2, cx, cy);

【讨论】:

以上是关于千题案例TypeScript获取两点之间的距离 | 中点 | 补点 | 向量 | 角度的主要内容,如果未能解决你的问题,请参考以下文章

根据纬度/经度获取两点之间的距离

算法千题案例每日LeetCode打卡——98.字符的最短距离

算法千题案例每日LeetCode打卡——98.字符的最短距离

使用 Haversine_formula 获取两点之间的距离

百度地图 获取两点坐标之间的驾车距离(非直线距离) c#

JAVA通过经纬度获取两点之间的距离