JS判斷點是否在線段上的代碼
更新時間:2023年11月17日 09:38:15 作者:唯之為之
這篇文章主要介紹了JS判斷點是否在線段上的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
說明
點積可以用來判斷兩個向量的夾角,如果這個夾角是0或者180度,說明這個點在直線上;叉積可以用來判斷一個點到一條直線的距離,如果這個距離是0,說明這個點在直線上。
假設(shè)有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的直線上。
- 當(dāng)判斷出c在ab的直線上時,還需要判斷c的x坐標(biāo)或者y坐標(biāo)是否在a和b的x坐標(biāo)或者y坐標(biāo)之間,才能確定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線段的范圍內(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) ); } // 測試 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判斷點是否在線段上的文章就介紹到這了,更多相關(guān)JS判斷點是否在線段上內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
將json當(dāng)數(shù)據(jù)庫一樣操作的javascript lib
使用javascript操作JSON的類庫TAFFY DB,具體介紹了:查詢數(shù)據(jù)、添加數(shù)據(jù)、刪除數(shù)據(jù)、修改數(shù)據(jù)。2013-10-10javascript事件函數(shù)中獲得事件源的兩種不錯方法
許多情況我們需要獲得事件源對象來對其屬性進行更改,在事件響應(yīng)函數(shù)中獲得事件源的方法有如下兩種2014-03-03