Canvas旋转图像顶部值获取及碰撞检测函数返回异常求助

你遇到的核心问题是误用了DOM元素的位置方法来判断Canvas内绘制图形的位置——getBoundingClientRect()是用来获取<img>元素在页面DOM中的位置，而不是它在Canvas画布上经过旋转平移后绘制出来的图形位置。如果你的<img>是隐藏状态（比如display: none），它的top和left自然会返回0，完全和Canvas里的绘制操作无关。

下面是针对你的场景的具体解决方案：

正确思路：计算Canvas中旋转图形的边界 #

要检测Canvas内旋转后图形的边界，我们需要手动计算图形四个顶点在Canvas全局坐标系下的位置，然后生成包围盒进行碰撞判断。

步骤1：添加旋转点计算的辅助函数 #

先写一个工具函数，用来计算点绕原点旋转后的坐标：

// 计算点(x, y)绕原点旋转angle度后的坐标
function rotatePoint(x, y, angle) {
    const rad = Math.PI / 180 * angle;
    const cos = Math.cos(rad);
    const sin = Math.sin(rad);
    return {
        x: x * cos - y * sin,
        y: x * sin + y * cos
    };
}

步骤2：重写碰撞检测函数 #

修改你的detectCollision方法，通过计算旋转后的顶点坐标来判断是否超出Canvas边界：

detectCollision(ox, oy) {
    const halfCarWidth = this.car.width / 2;
    const halfCarHeight = this.car.height / 2;
    // 定义汽车图像相对于中心的四个本地顶点
    const localVertices = [
        { x: -halfCarWidth, y: -halfCarHeight }, // 左上
        { x: halfCarWidth, y: -halfCarHeight },  // 右上
        { x: halfCarWidth, y: halfCarHeight },   // 右下
        { x: -halfCarWidth, y: halfCarHeight }   // 左下
    ];

    // 将本地顶点转换为Canvas全局坐标系下的位置（先旋转，再平移到当前x,y）
    const globalVertices = localVertices.map(vertex => {
        const rotated = rotatePoint(vertex.x, vertex.y, this.angle);
        return {
            x: rotated.x + this.x,
            y: rotated.y + this.y
        };
    });

    // 计算旋转后图形的轴对齐包围盒（AABB）的最小/最大坐标
    const minX = Math.min(...globalVertices.map(v => v.x));
    const maxX = Math.max(...globalVertices.map(v => v.x));
    const minY = Math.min(...globalVertices.map(v => v.y));
    const maxY = Math.max(...globalVertices.map(v => v.y));

    // 检测是否超出Canvas边界
    const canvasWidth = this.canvas.width;
    const canvasHeight = this.canvas.height;
    const isOutOfBounds = minX < 0 || maxX > canvasWidth || minY < 0 || maxY > canvasHeight;

    if (isOutOfBounds) {
        this.x = ox;
        this.y = oy;
    }
}

为什么这个方法有效？ #

1. 我们先以汽车图形的中心为原点，定义四个顶点的相对位置；
2. 对每个顶点应用旋转变换，得到旋转后的相对位置；
3. 再加上当前的this.x和this.y，得到顶点在Canvas全局坐标系下的实际位置；
4. 通过这些顶点的最小/最大坐标，得到旋转后图形的包围盒，再和Canvas的边界对比，就能准确判断是否碰撞。

如果之后需要更精确的碰撞检测（比如和其他旋转图形碰撞），可以研究分离轴定理（SAT），但对于边界检测，上述的轴对齐包围盒方法已经足够简单高效。

内容的提问来源于stack exchange，提问作者RiesvGeffen