javascript - 如何在 JavaScript 中找到两条线段的交点?

标签 javascript collision-detection

我不太擅长数学,所以虽然可以在其他问题中找到通用算法,但我很难弄清楚如何在 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);
}

但是由于我对数学并没有很好的理解,所以我很难弄清楚如何改变这个函数来显示相交处的坐标。

有人可以解释如何检测两条线段之间的确切碰撞点吗?

最佳答案

您可以通过 [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 - 如何在 JavaScript 中找到两条线段的交点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42892862/

相关文章:

java - 如何在Translate Transition(JavaFX中)中实现碰撞检测?

javascript - 在 Karate DSL 中,调用 javascript 文件返回 java.lang.RuntimeException

javascript - 将动态构建的表单元素附加到我的表单

javascript - 如何在现有 GraphQL 服务器上添加根和查看器查询以支持中继

ios - 边缘检测 --> CGPath --> SpriteKite 碰撞

objective-c - Cocoa iOS 通过碰撞将矩形变成圆形

算法帮助 - 小对象的 HitTest

javascript - 具有奇怪行为的文本重叠检测

javascript - 解决数组推送的 promise - javascript

android - Unity 2D 与预制件的碰撞无法在手机上运行