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); 
}