Question

我正在编写一个基于画布的游戏，它一次在画布上包含许多精灵。在某些情况下，精灵是不可见的，并且为了保存渲染周期，如果玩家不能看到它们，我不会将它们渲染到画布上。这对于没有旋转但没有旋转的精灵（尤其是矩形）非常有用，我无法再准确地确定它们是否仍在可见画布内。

到目前为止，这是我主要渲染循环的一部分：

            if (image !== null) {
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.rotation * Math.PI/180);
            ctx.drawImage(image, 0,0, this.width, this.height);
            ctx.restore();
        }

在使用上面的代码渲染精灵之前，我使用以下代码确定它是否可见：

            // Only draw sprite sthat are visible to the player.
        if (sprite.x + boundingBox >= 0 && sprite.y + boundingBox >= 0 && sprite.x <= this.width && sprite.y <= this.height) {
            sprite.draw(this.gameConsole.ctx);
        }

当我旋转非均匀精灵（例如矩形）时，宽度和高度不再正确，因为它们假设它们处于非旋转状态。你会如何处理这个问题？

Answer 1

旋转表示点 P 是旋转后导致 R 的非均匀精灵的角点（4个中的一个）

a = this.rotation * (PI/180)

借助旋转矩阵

Rx = Px * cos(a)  +  Py * -sin(a) 
Ry = Px * sin(a)  +  Py * cos(a)

所以你可以测试 R 是否在画布内。

如果您使用ctx.setTransform而不是旋转，则可以一次性完成所有操作，即先测试，然后根据需要进行渲染;）

Answer 2

您可以计算对角线并使用它来确定精灵是否可见

var diagonal = Math.sqrt(boundingBox  * boundingBox * 2);

if (sprite.x + diagonal >= 0 && sprite.y + diagonal >= 0 && sprite.x <= this.width && sprite.y <= this.height) {
  sprite.draw(this.gameConsole.ctx);
}

如何在JavaScript旋转后如何确定图像是否在可见画布之外？

2 个答案: