旋转图像和碰撞检测

时间:2014-07-17 13:22:51

标签: kineticjs

我差不多完成了我的项目,还有一个问题,我过去几天一直在努力研究。我已经能够旋转我的图像,水平翻转它们,甚至可以通过所有帮助将它们换掉。但我剩下的一个问题是因为我基本上使用了矩形碰撞检测方案,一旦图像旋转后如何进行碰撞检测?看起来矩形方案一旦旋转就不起作用了......非常感谢你们!

2 个答案:

答案 0 :(得分:1)

@klenwell提到的separating axis theorem(SAT)是确定2个凸多边形是否相交的好工具。我不得不承认我无法获取该链接中的代码以便为我工作,但这里是SAT脚本的替代链接,其中包含示例:https://github.com/jriecken/sat-js/blob/master/SAT.js

我会加上这个考虑......

由于需要对所有向量进行交叉测试,因此分离轴的数学理论相当冗长。

通过使用更简单的数学预测试预先测试2个特定矩形是否可能相交,您可以提高过程效率。

如果这两个地方不可能相交,那么就不用费心去做更昂贵的测试了。

预测试:

如果任何2个矩形中心之间的距离大于它们的半直径的总和那么这两个部分可能是相交的...所以不要对这两个部分做更昂贵的数学测试

if( Math.abs(rect1.centerX-rect2.centerX) > rect1.halfDiameter+rect2.halfDiameter ){

    // rect1 & rect2 can't be intersecting...don't bother testing further

}

if( Math.abs(rect1.centerY-rect2.centerY) > rect1.halfDiameter+rect2.halfDiameter ){

    // rect1 & rect2 can't be intersecting...don't bother testing further

}

由于任何矩形的halfDiameter都没有改变,你可以为每个矩形计算一次并重复使用保存的halfDiameter。

rect1.halfDiameter=Math.sqrt(rect1.width*rect1.width+rect1.height*rect1.height)/2;

rect2.halfDiameter=Math.sqrt(rect2.width*rect2.width+rect2.height*rect2.height)/2;

rect.centerX和rect.centerY是旋转矩形的当前中心。

答案 1 :(得分:0)

这是一个Javascript实现,您正在寻找另一个提出相同问题的StackOverflow帖子:

https://stackoverflow.com/a/12414951/1093087