【千题案例】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 类包含用于执行基本数学运算的方法,如初等指数、对数、平方根和三角函数等,多加练习就可以熟练运用了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/2923.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

当下的网络安全行业前景到底怎么样?还能否入行?

前言网络安全现在是朝阳行业&#xff0c;缺口是很大。不过网络安全行业就是需要技术很多的人达不到企业要求才导致人才缺口大常听到很多人不知道学习网络安全能做什么&#xff0c;发展前景好吗&#xff1f;今天我就在这里给大家介绍一下。网络安全作为目前比较火的朝阳行业&…

给程序加个进度条吧,1行Python代码,快速添加~

大家好&#xff0c;这里是程序员晚枫。 你在写代码的过程中&#xff0c;有没有遇到过以下问题&#xff1f; 已经写好的程序&#xff0c;想看看程序执行的进度&#xff1f; 在写代码批量处理文件的时候&#xff0c;如何显示现在处理到第几个文件了&#xff1f; &#x1f446…

真要被00后职场整顿了?老员工纷纷表示真的干不过.......

最近聊到软件测试的行业内卷&#xff0c;越来越多的转行和大学生进入测试行业。想要获得更好的待遇和机会&#xff0c;不断提升自己的技能栈成了测试老人迫在眉睫的问题。 不论是面试哪个级别的测试工程师&#xff0c;面试官都会问一句“会编程吗&#xff1f;有没有自动化测试…

dfs和bfs能解决的问题

一.理解暴力穷举之dfs和bfs暴力穷举暴力穷举是在解决问题中最常用的手段&#xff0c;而dfs和bfs算法则是这个手段的两个非常重要的工具。其实&#xff0c;最简单的穷举法是直接遍历&#xff0c;如数列求和&#xff0c;遍历一个数组即可求得所问答案&#xff0c;这与我在前两篇博…

【lwIP(第二章)】以太网DMA

目录一、以太网DMA描述符简介二、以太网DMA描述符结构三、如何追踪描述符总结一、以太网DMA描述符简介 发送&#xff1a;不需要CPU的参与下&#xff0c;把描述符指向的缓冲区数据传输到Tx FIFO当中 接收&#xff1a;不需要CPU的参与下&#xff0c;将Rx FIFO中的数据传输到描述符…

3 天交付新需求?极狐GitLab APP 「极限编程 XP」实践

近日&#xff0c;中移物联网有限公司、北京青云科技股份有限公司联合举办的 “2023 云原生重庆站技术分享会” 如期召开。会上&#xff0c;极狐(GitLab) 高级解决方案架构师刘剑桥带来《云原生极限编程 101》主题分享。本文整理自演讲内容&#xff0c;你可以阅读到&#xff1a;…

java调用chatgpt接口,实现专属于自己的人工智能助手

文章目录前言导包基本说明请求参数响应参数创建请求和响应的VO类代码编写使用最后说明前言 今天突然突发奇想&#xff0c;就想要用java来调用chatget的接口&#xff0c;实现自己的聊天机器人&#xff0c;但是网上找文章&#xff0c;属实是少的可怜(可能是不让发吧)。找到了一些…

【数据结构与算法】什么是双向链表?并用代码手动实现一个双向链表

文章目录一、什么是双向链表二、双向链表的简单实现一、什么是双向链表 我们来看一下这个例子&#xff1a; 在一个教室里&#xff0c;所有的课桌排成一列&#xff0c;如图 相信在你们的读书生涯中&#xff0c;老师肯定有要求你们记住自己的前后桌是谁。所以该例子中&#x…

J 砍竹子

砍竹子 【问题描述】 这天&#xff0c;小明在砍竹子&#xff0c;他面前有 n 棵竹子排成一排&#xff0c;一开始第 i 棵竹子的高度为 hi . 他觉得一棵一棵砍太慢了&#xff0c;决定使用魔法来砍竹子。魔法可以对连续的一段相同高度的竹子使用&#xff0c;假设这一段竹子的高度…

菜鸟刷题Day5

⭐作者&#xff1a;别动我的饭 ⭐专栏&#xff1a;菜鸟刷题 ⭐标语&#xff1a;悟已往之不谏&#xff0c;知来者之可追 一.一维数组的动态和&#xff1a;1480. 一维数组的动态和 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个数组 nums 。数组「动态和」的计算公式…

为了之后找工作不被虐,每天刷3道《剑指offer》Day-1

本文已收录于专栏&#x1f33b;《刷题笔记》文章目录前言&#x1f496; 1、二维数组中的查找题目描述思路&#x1f496; 2、替换空格题目描述思路&#x1f496; 3、从尾到头打印链表题目描述思路一&#xff08;反转函数&#xff09;思路二&#xff08;递归&#xff09;思路二&a…

Celery使用:优秀的python异步任务框架

目录Celery 简介介绍安装基本使用Flask使用Celery异步任务定时任务Celery使用Flask上下文进阶使用参考停止Worker后台运行Celery 简介 介绍 Celery 是一个简单、灵活且可靠的&#xff0c;处理大量消息的分布式系统&#xff0c;并且提供维护这样一个系统的必需工具。 它是一个…

文心一言 vs GPT-4 —— 全面横向比较

文心一言 vs GPT-4 —— 全面横向比较 3月15日凌晨&#xff0c;OpenAI发布“迄今为止功能最强大的模型”——GPT-4。我第一时间为大家奉上了体验报告《OpenAI 发布GPT-4——全网抢先体验》。 时隔一日&#xff0c;3月16日下午百度发布大语言模型——文心一言。发布会上&#…

4万字企业数字化转型大数据湖项目建设和运营综合解决方案WORD

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除。部分资料内容&#xff1a; 3.1.4沙盒管理 利用Docker, 基于kubernetes主打的容器技术与微服务应用基础平台&#xff0c;HDFS和YARN均可依此建模&#xff0c;为上层应用提供微服…

不愧是2023年就业最难的一年,还好有车企顶着~

就业龙卷风已经来临&#xff0c;以前都说找不到好的工作就去送外卖&#xff0c;但如今外卖骑手行业都已经接近饱和状态了&#xff0c;而且骑手们的学历也不低&#xff0c;本科学历都快达到了30%了&#xff0c;今年可以说是最难找到工作的一年。 像Android 开发行业原本就属于在…

学习 Python 之 Pygame 开发魂斗罗(十)

学习 Python 之 Pygame 开发魂斗罗&#xff08;十&#xff09;继续编写魂斗罗1. 解决敌人不开火的问题2. 创建爆炸效果类3. 为敌人跳入河中增加爆炸效果4. 玩家击中敌人继续编写魂斗罗 在上次的博客学习 Python 之 Pygame 开发魂斗罗&#xff08;九&#xff09;中&#xff0c;…

深度长文 | 数据安全共享技术发展综述及在能源电力领域应用研究

开放隐私计算 编者按数据要素的流通共享与协同应用是数字时代中数据要素市场培育的核心内容&#xff0c;数据安全共享技术能够有效实现数据的安全共享&#xff0c;避免“数据孤岛”现象、隐私泄露事件等.本文对国内外数据安全共享技术研究成果及进展进行了全面综述.首先&#x…

[前端笔记037]vue2之vuex

前言 本笔记参考视频&#xff0c;尚硅谷:BV1Zy4y1K7SH p105 - p116 vuex简介和基本使用 概念&#xff1a;专门在 Vue 中实现集中式状态&#xff08;数据&#xff09;管理的一个 Vue 插件&#xff0c;对 vue 应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&…

CVPR 2023 | 旷视研究院入选论文亮点解读

近日&#xff0c;CVPR 2023 论文接收结果出炉。近年来&#xff0c;CVPR 的投稿数量持续增加&#xff0c;今年收到有效投稿 9155 篇&#xff0c;和 CVPR 2022 相比增加 12%&#xff0c;创历史新高。最终&#xff0c;大会收录论文 2360 篇&#xff0c;接收率为 25.78 %。本次&…

烤鱼界头牌半天妖发文致歉,背后暴露了哪些问题?

3月24日&#xff0c;半天妖烤鱼官方针对“两家门店食品安全问题”&#xff0c;发表致歉声明&#xff0c;并宣布将两家涉事门店永久关停。半天妖烤鱼爆出的食品安全问题再次提醒我们&#xff0c;加强门店监管和管理工作&#xff0c;保障消费者的健康和安全&#xff0c;成为了行业…