[AS3] Matrix 오브젝트의 사용

Matrix 클래스는 좌표 공간의 사이에 포인트를 매핑 하는 방법을 결정하는 변환 행렬을 나타낸다. Matrix 오브젝트의 프롭퍼티를 설정하여 Matrix 오브젝트를 Transform 오브젝트의 matrix 프롭퍼티에 적용하고 그 Transform 오브젝트를 표시 오브젝트의 transform 프롭퍼티에 적용하는 것으로 표시 오브젝트에 대해서 다양한 그래픽 변환을 실행할 수 있다. 실현될 수 있는 변환 기능으로서는 평행이동 (x 위치 및 y 위치의 이동) , 회전, 확대•축소, 경사등이 있다.

Matrix 오브젝트의 정의
매트릭스는 프롭퍼티 (a ,b ,c ,d ,tx ,ty)를 조정해 직접 정의할 수도 있지만 createBox() 메소드를 사용해 정의하는 편이 간단하다. 이 메소드의 파라미터에서는 작성하는 매트릭스에서 정의하는 확대•축소, 회전, 평행이동의 효과를 직접 정의할 수 있다. 예를 들어 다음의 코드로 작성한 Matrix 오브젝트에는 수평 방향 2.0배 확대, 수직 방향 3.0배 확대, 45도의 회전, 오른쪽으로 10 피크셀의 이동, 및 아래에 20 피크셀의 이동의 효과가 있다.

var matrix:Matrix = new Matrix();
var scaleX:Number = 2.0;
var scaleY:Number = 3.0;
var rotation:Number = 2 * Math.PI * (45 / 360);
var tx:Number = 10;
var ty:Number = 20;
matrix.createBox(scaleX, scaleY, rotation, tx, ty);

또한 scale() ,rotate() ,translate() 의 각 메소드를 사용하면 Matrix 오브젝트로 설정한 확대•축소, 회전, 평행이동의 효과를 변경할 수 있다. 이러한 메소드로 지정한 값은 기존의 Matrix 오브젝트로 설정되어 있는 값과 합쳐진다. 예를 들어, 다음의 코드에서는 scale() (와)과 rotate()를 2 회 호출하고 있기 때문에 Matrix 오브젝트의 효과는 4 배의 확대와 60도의 회전이 된다.

var matrix:Matrix = new Matrix();
var rotation:Number = 2 * Math.PI * (30 / 360); // 30
var scaleFactor:Number = 2;
matrix.scale(scaleFactor, scaleFactor);
matrix.rotate(rotation);
matrix.scale(scaleX, scaleY);
matrix.rotate(rotation);
myDisplayObject.transform.matrix = matrix;

경사 변형을 Matrix 오브젝트에 적용하려면 b 프롭퍼티 또는 c 프롭퍼티를 조정한다. b 프롭퍼티를 조정하면 매트릭스가 수직 방향으로 경사하고 c 프롭퍼티를 조정하면 매트릭스가 수평 방향으로 경사한다. 다음의 코드는 myMatrix Matrix 오브젝트를 수직 방향으로 2배 경사한 것이다.

var skewMatrix:Matrix = new Matrix();
skewMatrix.b = Math.tan(2);
myMatrix.concat(skewMatrix);

Matrix 에 의한 변환은 표시 오브젝트의 transform 프롭퍼티에 적용할 수 있다. 예를 들어 다음의 코드에서는 myDisplayObject오브젝트에 매트릭스 변환을 적용하고 있다.

var matrix:Matrix = myDisplayObject.transform.matrix;
var scaleFactor:Number = 2;
var rotation:Number = 2 * Math.PI * (60 / 360); // 60
matrix.scale(scaleFactor, scaleFactor);
matrix.rotate(rotation);
myDisplayObject.transform.matrix = matrix;

첫 라인에서 myDisplayObject 표시 오브젝트가 사용하는 기존의 변환 매트릭스 (myDisplayObject 표시 오브젝트의 transformation, 프롭퍼티의 matrix 프롭퍼티) 를 Matrix 오브젝트로 설정한다. 이렇게 하는 것으로 표시 오브젝트의 위치, 확대율, 회전각을 근거로 한 Matrix 클래스 메소드의 실행에 의한 효과를 누적하여 적용할 수 있다.

메모 : flash.geometry 패키지에는 ColorTransform 클래스도 포함되어 있지만 이 클래스는 Transform 오브젝트의 colorTransform 프롭퍼티를 설정할 때에 사용하는 것이다. 기하학 변환에는 사용하지 않는다.


그라데이션에 관한 Matrix 오브젝트의 정의
셰이프로 사용하는 그라데이션을 정의하려면 flash.display.Graphics 클래스의 beginGradientFill() 및 lineGradientStyle() 메소드를 사용한다. 그라데이션을 정의할 때 이러한 메소드의 파라미터로 매트릭스를 지정한다.
위와 같은 목적으로 매트릭스를 작성하려면 createGradientBox() 메소드를 사용해 그라데이션 정의용의 장방형을 정의하는 것이 가장 간단한 방법이다. createGradientBox() 메소드로 지정하는 파라미터에서는 그라데이션의 확대•축소, 회전, 및 위치를 정의한다. 예를 들어 다음과 같은 성질을 가지는 그라데이션을 작성한다고 하면

•    GradientType.LINEAR
•    그린과 블루의 2 색,ratios 배열을 [0, 255] (으)로 설정
•    SpreadMethod.PAD
•    InterpolationMethod.LINEAR_RGB

다음의 예로 보이는 그라데이션은 createGradientBox() 메소드의 rotation 파라미터가 다르지만 그 외의 설정은 모두 같다.

width = 100;
height = 100;
rotation = 0;
tx = 0;
ty = 0;     

width = 100;
height = 100;
rotation = Math.PI/4; // 45
tx = 0;
ty = 0;     

width = 100;
height = 100;
rotation = Math.PI/2; // 90
tx = 0;
ty = 0;     


다음의 예로 보이는 그린 블루의 선상 그라데이션 효과는 createGradientBox() 메소드의 rotation ,tx ,ty 파라미터가 다르지만 그 외의 설정은 모두 같다.

width = 50;
height = 100;
rotation = 0;
tx = 0;
ty = 0;     

width = 50;
height = 100;
rotation = 0
tx = 50;
ty = 0;     

width = 100;
height = 50;
rotation = Math.PI/2; // 90
tx = 0;
ty = 0;     

width = 100;
height = 50;
rotation = Math.PI/2; // 90
tx = 0;
ty = 50;     

width = 50;
height = 100;
rotation = 0;
tx = 25;
ty = 0;     



다음의 코드는 마지막에 보이는 방사상 그라데이션을 생성한다.

import flash.display.Shape;
import flash.display.GradientType;
import flash.geom.Matrix;

var type:String = GradientType.RADIAL;
var colors:Array = [0x00FF00, 0x000088];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var spreadMethod:String = SpreadMethod.PAD;
var interp:String = InterpolationMethod.LINEAR_RGB;
var focalPtRatio:Number = 0;

var matrix:Matrix = new Matrix();
var boxWidth:Number = 50;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI/2; // 90
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

var square:Shape = new Shape;
square.graphics.beginGradientFill(type,
		colors,
		alphas,
		ratios,
		matrix,
		spreadMethod,
		interp,
		focalPtRatio);
square.graphics.drawRect(0, 0, 100, 100);
addChild(square);

// 위와 같으나 package 형태의 클래스로 외부에 저장된 as 파일

package {
import flash.display.*;
import flash.geom.*;


public class RadialGradientExample extends Sprite {
        public function RadialGradientExample() {
                var type:String = GradientType.RADIAL;
                var colors:Array = [0x00FF00, 0x000088];
                var alphas:Array = [1, 1];
                var ratios:Array = [0, 255];
                var spreadMethod:String = SpreadMethod.PAD;
                var interp:String = InterpolationMethod.LINEAR_RGB;
                var focalPtRatio:Number = 0;

                var matrix:Matrix = new Matrix();
                var boxWidth:Number = 50;
                var boxHeight:Number = 100;
                var boxRotation:Number = Math.PI/2;// 90°
                var tx:Number = 25;
                var ty:Number = 0;
                matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);

                var square:Shape = new Shape;
                square.graphics.beginGradientFill(type,
                colors,
                alphas,
                ratios,
                matrix,
                spreadMethod,
                interp,
                focalPtRatio);
                square.graphics.drawRect(0, 0, 100, 100);
                addChild(square);
        }
}}