如何找到 JavaScript 中两条线段相交的点？

Question

我的数学不是很好，所以虽然在其他问题中可以找到通用算法，但我很难弄清楚如何在 JS 中实现它们。

有 JS 的问题，答案解释了如何检查线段是否发生碰撞，例如：

var lineSegmentsIntersect = (x1, y1, x2, y2, x3, y3, x4, y4)=> {
    var a_dx = x2 - x1;
    var a_dy = y2 - y1;
    var b_dx = x4 - x3;
    var b_dy = y4 - y3;
    var s = (-a_dy * (x1 - x3) + a_dx * (y1 - y3)) / (-b_dx * a_dy + a_dx * b_dy);
    var t = (+b_dx * (y1 - y3) - b_dy * (x1 - x3)) / (-b_dx * a_dy + a_dx * b_dy);
    return (s >= 0 && s <= 1 && t >= 0 && t <= 1);
}

但是由于我对数学的理解不是很好，所以我很难弄清楚如何更改此函数以同时显示交叉点所在的坐标。

谁能解释一下如何检测两条线段之间的准确碰撞点？

Answer 1

您可以通过[x1 + t * a_dx, y1 + t * a_dy]计算交点。

修改给定函数的 return 语句然后产生：

// Returns intersection point if exists or false:
var lineSegmentsIntersect = (x1, y1, x2, y2, x3, y3, x4, y4)=> {
    var a_dx = x2 - x1;
    var a_dy = y2 - y1;
    var b_dx = x4 - x3;
    var b_dy = y4 - y3;
    var s = (-a_dy * (x1 - x3) + a_dx * (y1 - y3)) / (-b_dx * a_dy + a_dx * b_dy);
    var t = (+b_dx * (y1 - y3) - b_dy * (x1 - x3)) / (-b_dx * a_dy + a_dx * b_dy);
    return (s >= 0 && s <= 1 && t >= 0 && t <= 1) ? [x1 + t * a_dx, y1 + t * a_dy] : false;
}

// Example:
console.log(lineSegmentsIntersect(0,0, 1,1, 0,1, 1,0)); // [0.5, 0.5]
console.log(lineSegmentsIntersect(0,0, 1,1, 2,2, 2,0)); // false

如何找到 JavaScript 中两条线段相交的点？

How do I find the point at which two line segments are intersecting in JavaScript?

javascript

collision-detection