JS判断点是否在线段上的代码

 更新时间:2023年11月17日 09:38:15   作者:唯之为之  
这篇文章主要介绍了JS判断点是否在线段上的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

说明

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

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

  • 计算向量ab和ac的点积,记为dot。
  • 如果dot小于0,说明c在ab的垂直平分线上;
  • 如果dot等于ab的模长的平方,说明c在ab的延长线上;
  • 如果dot在0和ab的模长的平方之间,说明c在ab的方向上,可能在ab线段上;
  • 如果dot小于0或者大于ab的模长的平方,说明c不在ab的直线上,也不在ab线段上。
  • 计算向量ab和ac的叉积,记为cross。
  • 如果cross不等于0,说明c不在ab的直线上,也不在ab线段上;
  • 如果cross等于0,说明c在ab的直线上。
  • 当判断出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, f, e)); // true
console.log(isPointOnLineSegment(a, b, c)); // false
console.log(isPointOnLineSegment(a, f, c)); // false
console.log(isPointOnLineSegment(a, c, f)); // false

到此这篇关于JS判断点是否在线段上的文章就介绍到这了,更多相关JS判断点是否在线段上内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript Prototype对象

    JavaScript Prototype对象

    从JavaScript 1.1开始,它就有了一个内置对象叫Prototype。通过它,可以扩展JavaScript,在对象上编写自定义的属性和方法。
    2009-01-01
  • 使用JavaScript判断图片加载状态的几种方法

    使用JavaScript判断图片加载状态的几种方法

    在网页开发中,判断图片是否加载完成是一个常见的需求,无论是为了预加载资源、实现懒加载还是进行性能监控,本文将详细介绍几种使用JavaScript判断图片加载状态的方法,需要的朋友可以参考下
    2025-08-08
  • javascript中拼接HTML字符串的最快、最好的方法

    javascript中拼接HTML字符串的最快、最好的方法

    这篇文章主要介绍了javascript中拼接HTML字符串的最快、最好的方法,本文共计介绍了3种方法,并对3个各自做了浏览器速度测试,需要的朋友可以参考下
    2014-06-06
  • 使用js获取地址栏中传递的值

    使用js获取地址栏中传递的值

    本篇文章是对使用js获取地址栏中传递的值实现代码进行了详细的分析介绍,需要的朋友参考下
    2013-07-07
  • next.js初始化参数设置getServerSideProps应用学习

    next.js初始化参数设置getServerSideProps应用学习

    这篇文章主要为大家介绍了next.js初始化参数设置getServerSideProps的应用示例学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 微信小程序中做用户登录与登录态维护的实现详解

    微信小程序中做用户登录与登录态维护的实现详解

    微信小程序的运行环境不是在浏览器下运行的。所以不能以cookie来维护登录态。下面这篇文章主要给大家介绍了微信小程序中如何做用户登录与登录态维护的相关资料,文中介绍的非常详细,需要的朋友可以参考学习。
    2017-05-05
  • layui下拉框获取下拉值(select)的例子

    layui下拉框获取下拉值(select)的例子

    今天小编就为大家分享一篇layui下拉框获取下拉值(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS设置cookie、读取cookie

    JS设置cookie、读取cookie

    js设置cookie有很多种方法,包括JS设置cookie、读取cookie,工作中常会用到!下面是详细代码,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • PHP抓取HTTPS内容和错误处理的方法

    PHP抓取HTTPS内容和错误处理的方法

    这篇文章主要介绍了PHP抓取HTTPS内容的实现方法,以及在抓取的时候遇到的一个HTTPS问题的处理办法,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • Bootstrap表格使用方法详解

    Bootstrap表格使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap表格使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论