Как определить в JavaScript, находится ли изображение за пределами видимого холста после его поворота?

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 является угловой точкой (одной из 4) неоднородного спрайта, что приводит к R после вращения

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);
}