我目前在画布上绘制了一些图像（障碍物），但我在绘制它们之前执行了 context.rotate() 和 context.translate() （在点平移后的 0,0 点）。
我需要在这些障碍物之后绘制的图像之间创建碰撞（图像坐标是用户控制的，例如车辆）。
在我实施旋转和平移之前，我会在正确的时间根据车辆和障碍物的中点进行碰撞。但是我不知道如何获得障碍物的实际“未翻译”和“未旋转”坐标点。
注意：对于每个障碍物，我知道我旋转和平移的变量，问题是我像这样依次执行旋转和平移多次：
// set origin to center
context.translate(canvasX, canvasY);
context.rotate(i/30);
context.translate(20,10);
if(toggle < 20) {
size++;
if(size > 10) {
size = 10;
}
drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
//circle('red', size);
}
// rotate + move along x
context.rotate(y / 40);
context.translate(40, 0);
if(toggle > 100 && toggle < 120) {
size++;
if(size > 10) {
size = 10;
}
drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
//circle('red', size);
}
context.rotate(z / 20);
context.translate(5, 5);
if(toggle > 200 && toggle < 220) {
size++;
if(size > 10) {
size = 10;
}
drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
}
所以通过第三张图片 - 我会进行 4 次不同的平移和 3 次不同的旋转。
如何获得“障碍物”的坐标点？或者无论如何我可以轻松检查两个图像是否重叠而不需要坐标点？
编辑：
我决定拆分我的“碰撞”检测，以便在我执行 drawImageRot() 之后进行检查，如下所示：
// set origin to center
context.translate(canvasX, canvasY);
context.rotate(i/30);
context.translate(20,10);
if(toggle < 20) {
size++;
if(size > 10) {
size = 10;
}
drawImageRot(image_red, 0, 0, ((image_red.height / img_max) * size), ((image_red.width / img_max) * size), 30);
// HERE I NEED TO SET my currentX and currentY points! But how?
currentX = 0;
currentY = 0;
if((Math.abs(currentX - playerX) <= 20 && Math.abs(currentY - playerY) <= 20)) {
drawCollision(currentX, currentY, size);
isCollision = true;
}
}