JS中的射线/矩形交点

问题描述

我真的无法创建“点”（从特定点开始以一定角度成直角）矩形相交以找到相交点（使用JS）。 只是发现它叫“ ray”，所以我编辑了标题。

我了解了很多，发现了很多关于线/线相交和线/矩形相交的解决方案。

在我的情况下，我没有一条带有起点和终点的线，而是一条具有给定角度的点，从该点开始直到相交点都需要一条线。

稍后，该线仅应在矩形的内部auf中可见，这就是为什么我需要相交的原因。矩形始终是轴对齐的。

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

我创建了一个图像使其更清晰：

关于如何获取相交点的任何想法？

可能我必须开始针对我的直线测试矩形的每一行。但是我什至不知道该怎么检查...

非常感谢您的帮助！

解决方法

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