算法 - 旋转矩形内的矩形命中检测

时间:2017-09-14 21:50:47

标签: javascript algorithm geometry collision-detection coordinate

screenshot of cropbox inside rotated image

我正在开发一个图像编辑器项目,您可以在其中旋转和裁剪图像。

我目前面临的问题是,一旦我旋转了图像,我希望能够将裁剪框拖动到旋转图像边界内的任何位置。到目前为止,我一直在研究Liang-BarskyCohen-Sutherland行裁剪算法以及Separating Axis Theorem,但我很难看到如何为我的用例实现这些算法。< / p>

有人能指出我正确的方向吗?我吠叫错了树吗?

2 个答案:

答案 0 :(得分:2)

使用Alain的评论。要检查角的内部,只需反转图像以使其边缘轴对齐即可。然后你有一个简单的点对齐盒问题。

enter image description here

(我并不是说你真的必须旋转图像,只是旋转几何体。)

答案 1 :(得分:0)

如果用户尝试进行的移动是[dx,dy],则考虑从选区角落到由[dx,dy]翻译的点的线段(下例中的黄线)。这些线可以在某些点(红点)处与旋转的图像边界(绿线)相交。如果没有交叉点,则该移动是合法的。如果有一个或多个交叉点,这些将告诉您该移动合法的点;最接近其原始位置的交点(检查水平或垂直距离足以确定这一点)确定最大移动(示例中的右下角)。然后,您可以将转换限制到此点。

translation of rectangular selection

根据移动方向所在的象限(在示例中朝向右上方),您可以跳过检查其中一个角(示例中的左下角);其他角落总是先碰到边界 您还可以通过将运动方向与图像的旋转角度进行比较,跳过检查两个边界(示例中的底部和左侧)。
因此,您需要检查3个线段与2个线段的交叉点。对于线段交叉代码,请参阅例如this question

如果用户只拖动一侧,并扩展矩形而不是移动矩形,那么您只需要检查正在移动的两个角。