线条触摸或矩形或圆形

Question

我想知道一条线（与x1，y1，x2和y2）是否碰撞一个对象（如果线的任何部分触及或在该对象内）。对象可以是矩形（带有x，y，宽度和高度）或圆形（带有x，y和半径）。

我想要两个JavaScript代码示例，每个函数，一个用于线矩形碰撞(lineX1,lineY1,lineX2,lineY2,rectangleX,rectangleY,rectangeWidth,rectangleHeight)，另一个用于线圈碰撞(lineX1,lineY1,lineX2,lineY2,circleX,circleY,circleRadius)。

这样做的最有效的方法将不胜感激。

Answer 1

的线段有参数方程

X = X0 + t (X1 - X0) 
Y = Y0 + t (Y1 - Y0) 

和一个圆有隐式

(X - Xc)² + (Y - Yc)² = R² 

代在最后一节的第一个表达式为您提供了t具有

一元二次方程

• 没有根，那就没有路口了;
• 一个或两个根，它给你一个圈内的区间t;您需要检查此间隔与[0, 1]的交集，以查看该段是否有内部部分。

为了针对一个轴对齐矩形的线段，可以编写不等式的系统

Xa <= X0 + t (X1 - X0) <= Xb 
Ya <= Y0 + t (Y1 - Y0) <= Yb 

如果t系数为负时，您可以交换X0 < =>X1和Xa < = >Xb（与Y相同）以使其为正值。

然后不等式成为

(Xa - X0)/(X1 - X0) <= t <= (Xb - X0)/(X1 - X0) 
(Ya - Y0)/(Y1 - Y0) <= t <= (Yb - Y0)/(Y1 - Y0) 

向其中添加段

0 <= t <= 1. 

这是一件容易的事，以检查是否这些bracketings是兼容的限制。

对于圆形和矩形，您都可以从一个直线边界框测试开始。