Пример геометрии: применение матричного преобразования к экранному объекту

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

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

  • Поворот экранного объекта

  • Масштабирование экранного объекта

  • Перемещение экранного объекта

  • Наклон экранного объекта

Приложение предоставляет интерфейс для настройки параметров матричного преобразования, как показано ниже.

При нажатии кнопки Transform (Преобразовать) приложение выполняет заданные преобразования.

Исходный экранный объект и экранный объект, повернутый на -45° и уменьшенный на 50 %

Получить файлы приложения для этого примера можно на странице www.adobe.com/go/learn_programmingAS3samples_flash_ru. Файлы приложения DisplayObjectTransformer находятся в папке Samples/DisplayObjectTransformer. Приложение состоит из следующих файлов.

File

Описание

DisplayObjectTransformer.mxml

или

DisplayObjectTransformer.fla

Основной файл приложения Flash (FLA) или Flex (MXML)

com/example/programmingas3/geometry/MatrixTransformer.as

Класс, содержащий методы для применения матричного преобразования.

img/

Папка, содержащая файлы образцов изображений, используемых в приложении.

Определение класса MatrixTransformer

Класс MatrixTransformer включает статические методы, которые применяют геометрические преобразования к объектам Matrix.

Метод transform()

Метод transform() включает параметры для нижеследующего:

  • sourceMatrix — входная матрица, которая преобразуется с помощью этого метода

  • xScale и yScale — масштабные коэффициенты x и y

  • dx и dy — величины перемещения x и y в пикселах

  • rotation — угол поворота в градусах

  • skew — коэффициент наклона в процентах

  • skewType — направление наклона вправо или влево ("right" или "left")

Возвращаемое значение — результирующая матрица.

Метод transform() вызывает следующие статические методы этого класса:

  • skew()

  • scale()

  • translate()

  • rotate()

Каждый из них возвращается в исходную матрицу с примененным преобразованием.

Метод skew()

Метод skew() вносит в матрицу корректировку наклона, задавая свойства матрицы b и c. Дополнительный параметр unit задает единицы измерения угла наклона — при необходимости в этом методе возможно конвертирование значения угла angle в радианы.

if (unit == "degrees")  
{ 
    angle = Math.PI * 2 * angle / 360; 
} 
if (unit == "gradients") 
{ 
    angle = Math.PI * 2 * angle / 100; 
}

Матричный объект skewMatrix создается и корректируется для применения преобразования наклона. Первоначально это единичная матрица:

var skewMatrix:Matrix = new Matrix();

Параметр skewSide определяет сторону, к которой применяется преобразование наклона. Если задана правая сторона "right", свойство матрицы b устанавливает следующий код:

skewMatrix.b = Math.tan(angle);

Нижний край наклоняется заданием свойства матрицы c:

skewMatrix.c = Math.tan(angle);

Результирующий наклон применяется к исходной матрице за счет объединения двух матриц, как показано в следующем примере:

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

Метод scale()

Как показано в следующем примере, метод scale() сначала задает коэффициент масштабирования, если он представлен в процентах, затем метод scale() применяется к объекту Matrix:

if (percent) 
{ 
    xScale = xScale / 100; 
    yScale = yScale / 100; 
} 
sourceMatrix.scale(xScale, yScale); 
return sourceMatrix;

Метод translate()

Метод translate() просто применяет коэффициенты преобразования dx и dy путем вызова метода translate() матричного объекта, как показано ниже:

sourceMatrix.translate(dx, dy); 
return sourceMatrix;

Метод rotate()

Метод rotate() конвертирует входной коэффициент поворота в радианы (если он представлен в градусах или единицах градиента), а затем вызывает метод rotate() матричного объекта:

if (unit == "degrees") 
{ 
    angle = Math.PI * 2 * angle / 360; 
} 
if (unit == "gradients") 
{ 
    angle = Math.PI * 2 * angle / 100; 
} 
sourceMatrix.rotate(angle); 
return sourceMatrix;

Вызов метода MatrixTransformer.transform() в приложении

Приложение содержит интерфейс, с помощью которого пользователь вводит параметры преобразования. Затем приложение передает эти значения вместе со свойствами экранного объекта matrix и transform методу Matrix.transform(), как показано ниже:

tempMatrix = MatrixTransformer.transform(tempMatrix,  
    xScaleSlider.value,  
    yScaleSlider.value, 
    dxSlider.value,  
    dySlider.value, 
    rotationSlider.value, 
    skewSlider.value,  
    skewSide );

После этого приложение применяет возвращаемое значение к свойству matrix свойства transform экранного объекта, осуществляя преобразование:

img.content.transform.matrix = tempMatrix;