在 HTML5 + Javascript 和 Canvas 中使用固定形状矩形检查旋转矩形命中点答案

【问题标题】：Check Rotated Rectangle hit Point with Fixed shape Rectangle in HTML5 + Javascript and Canvas在 HTML5 + Javascript 和 Canvas 中使用固定形状矩形检查旋转矩形命中点
【发布时间】：2013-02-20 15:21:53
【问题描述】：

嗨，我正在制作一个汽车游戏，我在其中绘制一个汽车形状矩形，如下所示。 xP 和 yP 来自 JavaScript 中的键盘事件，旋转也是如此。

ctxDrift.clearRect(0, 0, 426, 754);
ctxDrift.save();
ctxDrift.beginPath();
ctxDrift.translate(xP-car.getWidth()/2, yP-car.getHeight()/2);
ctxDrift.rotate((Math.PI / 180) * car.getRotation());
ctxDrift.translate(-xP, -yP);
ctxDrift.rect(xP-car.getWidth()/2, yP-car.getHeight()/2, car.getWidth(), car.getHeight());
ctxDrift.fillStyle = 'yellow';
ctxDrift.fill();
ctxDrift.restore();

现在有一些障碍物，矩形形状，没有旋转。现在我怎么能检查这两个对象之间的命中。或者说如何检查矩形点是否在另一个矩形内，如果旋转？

【问题讨论】：

标签： rotation html5-canvas rectangles hit

【解决方案1】：

甚至在您开始碰撞测试之前： Canvas 不会跟踪对象在画布上的位置。您必须手动跟踪用户完成的累积 .translate() 和 .rotate()。您可以通过捕获每个用户键盘事件的转换矩阵更改来做到这一点。然后，您将转换累积到一个最终的转换矩阵中，您可以使用它来开始命中测试。

从那里开始，碰撞测试的数学运算很快变得复杂！

您最简单的碰撞测试就是用一个圆围绕每个矩形，然后计算圆的中心点是否在 2 个圆半径之和内。代码如下所示：

function CirclesCollide(x1,y1,radius1,x2,y2,radius2){
    return ( Math.sqrt( ( x2-x1 ) * ( x2-x1 )  + ( y2-y1 ) * ( y2-y1 ) ) < ( radius1 + radius2 ) );
}

如果您想要更好的碰撞测试并且愿意涉足大量数学，这里有 3 个碰撞测试的好来源：http://www.sfml-dev.org/wiki/en/sources/simple_collision_detection

也许最好的解决方案是使用像 FabricJs 这样的画布库，它可以跟踪对象在画布上的位置并为您提供命中测试。就这么简单！

var theyAreColliding = myCar.intersectsWithObject(myObstical);

【讨论】：

圆碰撞检测相当慢。进行这种测试显然只适用于进行广泛的相位（粗略）碰撞检查 - 但是为什么不保持数学简单（快速）并使用 AABB 矩形？
@Jarrod：嗯……圆碰撞是 fast（只有 1 个 Math.sqrt 和一些 +-*）和简单（只有 1 行代码！）。我同意这是一个粗略的碰撞测试，但对于 OP 来说很简单。由于汽车的长边将主要向前，圆的不准确被最小化（矩形和圆之间的最小空间）。请注意，我确实继续建议了一些“更好”的测试……包括您的 AABB——但这些会花费更多的代码、数学和 CPU 周期！此外，AABB 边界框在 45,135,225,315 度处变成方形——几乎和圆形一样不准确！顺便说一句，我喜欢并使用 AABB！只是代价高昂！
Math.sqrt 非常昂贵。查一下。
@VarunJi--希望我们对您的问题有所帮助......@Jarrod--我不喜欢火焰战争，但我坚持我的回答和 cmets--我已经完成了.
抱歉延迟回复。但是感谢你们……我认为 AABB 对我来说是最好的方式，因为我可以为此采取任何形状（矩形）。 Yes Circle 很容易检查。但是带有 Rectangle 的圆需要大量的编码

【解决方案2】：

最简单的方法是在进行碰撞检查之前旋转矩形边界框，这样它们就基本上不再旋转了。然后在绘制图像之前将它们旋转回来。

更好的是，有一个不旋转的边界框，可用于宽相位测试（一种快速且廉价的检查，看看您是否需要进行窄相位检查）。

这称为轴对齐边界框，简称 AABB。这大大简化了您的碰撞检测代码。

更新：找到了可能有用的this link。

【讨论】：

【解决方案3】：

这就是我要找的这个查询

http://www.rgraph.net/blog/2012/october/new-html5-canvas-features.html

canvas 现在有 addHitRegion() 函数，我们可以在其中轻松跟踪。

新的和最好的

http://www.playmycode.com/blog/2011/08/javascript-per-pixel-html5-canvas-image-collision-detection/

【讨论】：

【解决方案4】：

我终于添加了自己的逻辑，就是这里

http://jslogic.blogspot.in/2013/02/javascript-bound-rectangle-area-while.html

【讨论】：