Алгоритм центрирования фона

Question

У меня проблемы с написанием правильного алгоритма для центрирования фонового изображения. Вот ссылка на эффект, который я сейчас получаю: http://www.pilotinteractive.ca/dev/.

Вот пример того, к чему я стремлюсь: http://flashden.net/item/easy-xml-background-image-rotator/full_screen_preview/22015

Вот небольшая функция, которую я разработал:

public function calculateSize():Array {
    var width = stage.stageWidth;
    var height = stage.stageWidth / aspectRate;
    while (1) {
        if (height > stage.stageHeight) {
            break;
        }
       width += 25;
        height = width / aspectRate;
    }
    return new Array(width, height);
}

Я полагаю, что ошибка, которую я совершил, заключается в корректировке по высоте? Указатели были бы хорошими :-), если вы измените размер окна и поиграете с ним, вы, вероятно, поймете, что я имею в виду.

Best!

Answer 1

Я использовал этот код в течение некоторого времени:

var W:uint = stage.stageWidth;
var H:uint = stage.stageHeight;
var stageRatio:Number = W / H;
var imageRatio:Number = image.width / image.height;
if (stageRatio > imageRatio) {
    image.width = W;
    image.scaleY = image.scaleX;
} else {
    image.height = H;
    image.scaleX = image.scaleY;
}
var cx:Number=1/2;
var cy:Number=1/3;
image.x = -(image.width - W) * cx;
image.y = -(image.height - H) * cy;

Это изменит размер любого изображения, поэтому оно всегда заполнит сцену максимально возможным количеством изображений без потери соотношения ...

Обратите внимание на последние две строки ... они будут центрировать изображение в соответствии с центром cx, cy (0-1) ... Довольно часто изображения, особенно людей, имеют центр фокусировки в верхней части изображения (обычно между 1/3 и 1/5) вместо точной середины (например, в крупном плане вы никогда не захотите подрезать глаза).

Answer 2

В итоге я нашла еще один фрагмент в моей библиотеке, который тоже это сделал. Это было конечное решение:

                var w:Number = stage.stageWidth;
                var h:Number = stage.stageHeight;
                var xDiff:Number = transform.matrix.tx - transform.concatenatedMatrix.tx;
                var yDiff:Number = transform.matrix.ty - transform.concatenatedMatrix.ty;
                var x = w / 2 + xDiff;
                var y = h / 2 + yDiff;
                var ratH:Number = image.height / h;
                var ratW:Number = image.width  / w;</p>

<code>            this.x = w / 2 + xDiff;
            this.y = h / 2 + yDiff;

            if (ratH > ratW) {
                image.width = w;
                image.scaleY = image.scaleX;
            } else {
                image.height = h;
                image.scaleX = image.scaleY;
            }
            image.x = -image.width  / 2;
            image.y = -image.height / 2;
</code>

Это не так элегантно или правильно, как предоставляемые решения, но, похоже, работает. Я также пересмотрел то, что возвращает функция для непосредственного управления изображением.

Answer 3

По сути, вы пытаетесь масштабировать изображение таким образом, чтобы оно никогда не попадало на экран. Вы хотите масштабировать его до минимального размера, который гарантированно охватит всю область окна.

Хотя я не знаю ActionScript, код выглядит просто.

Попробуйте это:

var width = stage.stageWidth;
var height = stage.stageWidth / aspectRate;

if (height < stage.stageHeight)
{
    var factor = stage.stageHeight / height;
    height = stage.stageHeight;
    width = width * factor;
}

Сначала будет вычислено, насколько большим должно быть изображение, чтобы закрыть окно справа налево.

Затем он смотрит на высоту масштабированного изображения и, если она недостаточно велика, чтобы покрывать окно сверху вниз, вычисляет, насколько больше должно быть изображение, чтобы скрыть эту часть, масштабирует ширину на эту величину и устанавливает высоту в высоту окна.

Это должно сработать, без зацикливания.

Последняя функция будет выглядеть так:

public function calculateSize():Array {
    var width = stage.stageWidth;
    var height = stage.stageWidth / aspectRate;

    if (height < stage.stageHeight)
    {
        var factor = stage.stageHeight / height;
        height = stage.stageHeight;
        width = width * factor;
    }
    return new Array(width, height);
}