快捷導(dǎo)航

JS判斷點(diǎn)是否在線(xiàn)段上的代碼

更新時(shí)間：2023年11月17日 09:38:15 作者：唯之為之

這篇文章主要介紹了JS判斷點(diǎn)是否在線(xiàn)段上的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

說(shuō)明

點(diǎn)積可以用來(lái)判斷兩個(gè)向量的夾角，如果這個(gè)夾角是0或者180度，說(shuō)明這個(gè)點(diǎn)在直線(xiàn)上；叉積可以用來(lái)判斷一個(gè)點(diǎn)到一條直線(xiàn)的距離，如果這個(gè)距離是0，說(shuō)明這個(gè)點(diǎn)在直線(xiàn)上。

假設(shè)有a、b、c三點(diǎn)，其中a和b是線(xiàn)段的兩個(gè)端點(diǎn)，c是要判斷的點(diǎn)：

計(jì)算向量ab和ac的點(diǎn)積，記為dot。

如果dot小于0，說(shuō)明c在ab的垂直平分線(xiàn)上；
如果dot等于ab的模長(zhǎng)的平方，說(shuō)明c在ab的延長(zhǎng)線(xiàn)上；
如果dot在0和ab的模長(zhǎng)的平方之間，說(shuō)明c在ab的方向上，可能在ab線(xiàn)段上；
如果dot小于0或者大于ab的模長(zhǎng)的平方，說(shuō)明c不在ab的直線(xiàn)上，也不在ab線(xiàn)段上。

計(jì)算向量ab和ac的叉積，記為cross。

如果cross不等于0，說(shuō)明c不在ab的直線(xiàn)上，也不在ab線(xiàn)段上；
如果cross等于0，說(shuō)明c在ab的直線(xiàn)上。

當(dāng)判斷出c在ab的直線(xiàn)上時(shí)，還需要判斷c的x坐標(biāo)或者y坐標(biāo)是否在a和b的x坐標(biāo)或者y坐標(biāo)之間，才能確定c是否在ab的線(xiàn)段上。

綜合上面兩個(gè)條件，叉積和點(diǎn)積都可以用來(lái)判斷一個(gè)點(diǎn)是否在一條直線(xiàn)上，但是叉積更簡(jiǎn)單一些，因?yàn)樗枰臈l件更少。

JS代碼

/**
 * 判斷點(diǎn)c是否在ab組成的線(xiàn)段上
 * @param {x,y} a 點(diǎn)
 * @param {x,y} b 點(diǎn)
 * @param {x,y} c 點(diǎn)
 * @returns boolean
 */
function isPointOnLineSegment(a, b, c) {
  // 計(jì)算向量ab和ac的叉積
  let crossProduct = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
  // 如果不等于0，說(shuō)明不共線(xiàn)，直接返回false
  if (crossProduct !== 0) {
    return false;
  }
  // 否則，檢查c點(diǎn)是否在ab線(xiàn)段的范圍內(nèi)
  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)
  );
}

// 測(cè)試
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

到此這篇關(guān)于JS判斷點(diǎn)是否在線(xiàn)段上的文章就介紹到這了,更多相關(guān)JS判斷點(diǎn)是否在線(xiàn)段上內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: