javascript - JS中的射线/矩形相交

Question

我真的无法创建一个“点”(直 Angular 从特定点开始)矩形交叉点来找到相交点(使用 JS)。刚刚发现它叫做“ray”，所以我编辑了标题。
我阅读了很多关于它的内容，并找到了许多用于线/线相交和线/矩形相交等的解决方案。
在我的例子中，我没有一 strip 有起点和终点的线，而是一个具有给定 Angular 点，从该点需要有一条线直到交点。
稍后，这条线应该只在矩形的内部 auf 中可见，这就是我需要交集的原因。矩形始终与轴对齐。
由于许多情况(矩形中的点，矩形外的点，负值)，我不知道如何获得该交点。我从来没有使用过向量。
我创建了一个图像以使其更清晰:

关于如何获得交点的任何想法？
可能我必须开始针对我的直线测试矩形的每一行。但我什至不知道如何检查...
非常感谢你的帮助!

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

有一个解决方案 iff

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 种组合，但这是可以管理的。