本文介绍在JavaScript中判断一个点是否位于给定线段上的算法。通过计算向量叉积判断点是否在直线延长线上，利用点积判断点是否在线段范围内。文章提供完整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的对应坐标之间，以此最终确定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判断点是否在线段上内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！