JS判断点是否在线段上

本文利用向量的点积和叉积来判断点是否在线段上。
基础知识补充 从零开始的高中数学——向量向量的点积带你一次搞懂点积(内积)、叉积(外积)Unity游戏开发——向量运算(点乘和叉乘

说明

点积可以用来判断两个向量的夹角,如果这个夹角是0或者180度,说明这个点在直线上;
叉积可以用来判断一个点到一条直线的距离,如果这个距离是0,说明这个点在直线上。

假设有a、b、c三点,其中a和b是线段的两个端点,c是要判断的点:

  1. 计算向量ab和ac的点积,记为dot。
  • 如果dot小于0,说明c在ab的垂直平分线上;
  • 如果dot等于ab的模长的平方,说明c在ab的延长线上;
  • 如果dot在0和ab的模长的平方之间,说明c在ab的方向上,可能在ab线段上;
  • 如果dot小于0或者大于ab的模长的平方,说明c不在ab的直线上,也不在ab线段上。
  1. 计算向量ab和ac的叉积,记为cross。
  • 如果cross不等于0,说明c不在ab的直线上,也不在ab线段上;
  • 如果cross等于0,说明c在ab的直线上。
  1. 当判断出c在ab的直线上时,还需要判断c的x坐标或者y坐标是否在a和b的x坐标或者y坐标之间,才能确定c是否在ab的线段上。

综合上面两个条件,叉积和点积都可以用来判断一个点是否在一条直线上,但是叉积更简单一些,因为它需要的条件更少。

JS代码

/**
 * 判断点c是否在ab组成的线段上
 * @param {x,y} a 点
 * @param {x,y} b 点
 * @param {x,y} c 点
 * @returns boolean
 */
function isPointOnLinesegment(a,b,c) {
  // 计算向量ab和ac的叉积
  let crossproduct = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
  // 如果不等于0,说明不共线,直接返回false
  if (crossproduct !== 0) {
    return false;
  }
  // 否则,检查c点是否在ab线段的范围内
  return (
    Math.min(a.x,b.x) <= c.x &&
    c.x <= Math.max(a.x,b.x) &&
    Math.min(a.y,b.y) <= c.y &&
    c.y <= Math.max(a.y,b.y)
  );
}

// 测试
const a = {x:0,y:0}
const b = {x:0,y:1}
const c = {x:0,y:2}
const d = {x:1,y:1}
const e = {x:1,y:2}
const f = {x:2,y:2}

console.log(isPointOnLinesegment(a,c,b)); // true
console.log(isPointOnLinesegment(a,f,d)); // true
console.log(isPointOnLinesegment(c,e)); // true
console.log(isPointOnLinesegment(a,c)); // false
console.log(isPointOnLinesegment(a,f)); // false

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。

本文链接:https://www.f2er.com/3188590.html

大家都在看

  • 飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索

    本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。
    2023-11-16 博文
  • 如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法,所以大概会讲述下面这些点: Q1:我为什么会想使用 vuex 来管理数据状态交互? Q2:使用 vuex 框架有哪些缺点或者说副作用? Q3:我是如何在项目里使用 vuex 的? 初识 vuex 对于 vuex,有人喜欢,有人反感 喜欢的人觉
    2023-11-16 博文
  • 第三方组件及计算属性传参的问题解决方式

    1. 前言 唉,好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于fullName()(item),此处为函数柯里化。 &lt;el-table-
    2023-11-16 博文
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表……
    2023-11-16 博文
  • 用强数据类型保护你的表单数据-基于antd表单的类型约束

    接口数据类型与表单提交数据类型,在大多数情况下,大部分属性的类型是相同的,但很少能做到完全统一。我在之前的工作中经常为了方便,直接将接口数据类型复用为表单内数据类型,在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考,这种工作模式会引起各种隐藏bug,一定有更……
    2023-11-16 博文
  • pinia的使用

    前言 最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
    2023-11-16 博文
  • 记录--让我们来深入了解一下前端“三清”是什么

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前端“三清” 在前端开发中,我们经常听到关于“三清”的说法,即 window、document、Object。这三者分别代表了 BOM(浏览器对象模型)、DOM(文档对象模型)以及 JS 的顶层对象。在这个体系中,我们通过 JavaScr
    2023-11-16 博文
  • 记录--啊?Vue是有三种路由模式的?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 众所周知,vue路由模式常见的有 history 和 hash 模式,但其实还有一种方式-abstract模式(了解一哈~) 别急,本文我们将重点逐步了解: 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念
    2023-11-16 博文