2D旋转矩形碰撞

Question

我试图测试两个矩形对象（其中一个被旋转）是否在JavaScript中发生碰撞。

这是我所关注的屏幕截图。

经过几个小时的在线研究，我仍然想知道什么是检测激光石灰物体是否与蓝色方块重叠的最佳方法（算法）。

我很感激任何建议。

Answer 1

您可以使用分离轴定理。基本上，如果2个凸多边形（例如矩形）不相交，那么应该至少有一条线（由一个多边形的边缘延伸到无穷大形成），其中一个多边形的所有角都在它的一边，而另一边的所有角都在另一边。

您可以使用点积测试点的哪一侧。一个向量应该是该行的法线，另一个向量应该是从行上的点到您正在测试的点的向量。

如果您指定具有恒定缠绕顺序的矩形拐角顶点（例如，始终顺时针或始终逆时针），那么当来自另一个矩形的点位于其旁边时，您将知道点积应该是的符号。对应于矩形外部的线。

伪码：

function hasSeparatingAxis(a, b)
{
    // test each side of a in turn:
    for(i = 0; i < a.side_count; i++)
    {
        normal_x = a.verts[(i+1)%a.side_count].y - a.verts[i].y;
        normal_y = a.verts[i].x - a.verts[(i+1)%a.side_count].x;

        for(j = 0; j < b.side_count; j++)
        {
            dot_product = ((b.vert[j].x - a.verts[i].x) * normal_x) +
                ((b.vert[j].y - a.verts[i].y) * normal_y);
            if(dot_product <= 0.0) // change sign of test based on winding order
                break;
            if(j == b.side_count-1)
                return true; // all dots were +ve, we found a separating axis
        }
   }
   return false;
}

function intersects(a, b)
{
    return !hasSeparatingAxis(a, b) && !hasSeparatingAxis(b, a);
}