Управление искажениями при масштабировании

Flash Player 9 и более поздних версий, Adobe AIR 1.0 и более поздних версий

Обычно при масштабировании экранного объекта (например, при растягивании по горизонтали) итоговое искажение равномерно распределяется по объекту, и каждая часть растягивается в одинаковой мере. Если речь идет о графических элементах и элементах дизайна, то, возможно, именно это и требуется. Однако иногда более предпочтительно выбирать растягиваемые зоны экранного объекта, оставляя другие области без изменений. Одним из распространенных примеров такой ситуации является прямоугольная кнопка со скругленными углами. В случае обычного масштабирования углы кнопки растягиваются. Из-за этого радиус угла изменяется при изменении масштаба кнопки.

<Искажение кнопки со скругленными углами в результате масштабирования>

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

<Кнопка после масштабирования без искажений>

Для создания экранных объектов, масштабированием которых управляет пользователь, можно использовать девятислойное масштабирование (Scale-9). В случае девятислойного масштабирования экранный объект делится на 9 отдельных прямоугольников (сетка 3х3, как в игре «крестики-нолики»). Прямоугольники не обязательно должны быть одного размера: размещением линий сетки управляет сам пользователь. Любое содержимое, находящееся в четырехугольных прямоугольниках (например, скругленные углы кнопки), не будет растягиваться или сжиматься при масштабировании экранного объекта. Верхний и нижний центральные прямоугольники будут масштабироваться по горизонтали, но не по вертикали, а левый средний и правый средний прямоугольники будут масштабироваться по вертикали, но не по горизонтали. Центральный прямоугольник будет масштабироваться как по горизонтали, так и по вертикали.

<Сетка девятислойного масштабирования>

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

В ActionScript присвоение значения свойству scale9Grid экранного объекта приводит к включению девятислойного масштабирования объекта и определяет размер прямоугольников в сетке объекта формата Scale-9. Экземпляр класса Rectangle используется в качестве значения свойства scale9Grid следующим образом:

myButton.scale9Grid = new Rectangle(32, 27, 71, 64);

В конструкторе Rectangle имеется 4 параметра: координата x, координата y, ширина и высота. В данном примере верхний левый угол прямоугольника размещается в точке с координатами (x: 32, y: 27) в экранном объекте с именем myButton . Ширина этого прямоугольника составляет 71 пиксел, а высота — 64 пиксела (его правый край имеет координату (x:103), а нижний край — координату (y:92) в экранном объекте).

<Основной прямоугольник сетки Scale-9>

Фактическая область, которая содержится в пространстве, определенном экземпляром объекта Rectangle, представляет собой центральный прямоугольник сетки Scale-9. Другие прямоугольники рассчитываются Flash Player и AIR путем удлинения сторон экземпляра Rectangle, как показано ниже:

<Полная сетка Scale-9, полученная из основного прямоугольника>

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

<Результаты девятислойного масштабирования при изменении размеров в двух направлениях>
А.
myButton.width = 131;myButton.height = 106;

Б.
myButton.width = 73;myButton.height = 69;

B.
myButton.width = 54;myButton.height = 141;