JavaScript中的光线/矩形相交问题

Question

4

我真的无法创建一个“点”（从特定点开始的带有角度的直线）矩形交叉点来查找交叉点（使用JS）。刚发现它被称为“光线”，所以我编辑了标题。

我阅读了很多关于线/线交点和线/矩形交点等的解决方案。

在我的情况下，我没有起点和终点的线，而是一个具有给定角度的点，需要有一条线直到交点。

以后，该线应仅在矩形内部可见，这就是我需要交点的原因。该矩形始终与轴对齐。

由于有许多情况（点在矩形中，点在矩形外，负值），我不知道如何获得交点。而且我从未使用过向量。

我创建了一张图片以使其更清晰:

有关如何获得交点的任何想法？

我可能需要开始测试矩形的每条线与我的直线相交。但我甚至不知道如何检查...

非常感谢您的帮助！

- Timo

1

我必须匆忙离开，所以我只能指出正确的方向：正弦、余弦和三角形。这是三角形的样子：https://i.stack.imgur.com/clv7Q.jpg - T.J. Crowder

根据您的图片，有一个快速的问题：矩形是否总是轴对齐的？ - Michael Beeson

更多关于正弦和余弦以及它们如何与此相关的信息，请访问：https://www.mathsisfun.com/sine-cosine-tangent.html - T.J. Crowder

@MichaelBeeson 是的，矩形始终是轴对齐的！ - Timo

1

由于你基本上是在处理线条（矩形是四条单独的线），因此可以使用三角函数为这些线条创建方程式（y = kx + b），然后在 Rect(x) - Line(x) === 0 处发生交点。 - Teemu

这个回答解决了你的问题吗？如何检查线段是否与矩形相交？ - codetiger

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1196549 · Answer 1

An algebraic solution:

假设窗口为[0, W]x[0, H]。我们将半线的方程写成

X = x + t.u
Y = y + t.v

其中 t ≥ 0。

现在假设 u, v ≥ 0。我们想要解决这些不等式

0 ≤ t
0 ≤ x + t.u ≤ W
0 ≤ y + t.v ≤ H

或者

    0 ≤ t.u.v
- x.v ≤ t.u.v ≤ (W - x).v
- y.u ≤ t.u.v ≤ (H - y).u

当且仅当存在解决方案时

t0 < t1

在哪里

t0= max(0, - x.v, - y.u)
t1= min((W - x).v, (H - y).u).

通过将t0 /（u.v），t1 /（u.v）的值插入半线方程中，可以获得交点。

您必须针对所有u，v的符号，包括0，重复该讨论。共有9种组合，但这是可管理的。