Przykład dotyczący geometrii: zastosowanie transformacji macierzowej do obiektu wyświetlanego

Flash Player 9 i nowsze wersje, Adobe AIR 1.0 i nowsze wersje

Przykładowa aplikacja DisplayObjectTransformer ilustruje szereg możliwości zastosowania klasy Matrix do transformowania obiektu wyświetlanego, między innymi:

  • obracanie obiektu wyświetlanego;

  • skalowanie obiektu wyświetlanego;

  • translacja (zmiana położenia) obiektu wyświetlanego;

  • pochylanie obiektu wyświetlanego.

Aplikacja udostępnia interfejs służący do modyfikowania parametrów transformacji macierzowej. Interfejs ten przedstawiono na poniższej ilustracji.

Kliknięcie przycisku Transform powoduje zastosowanie odpowiedniej transformacji.

Oryginalny obiekt wyświetlany i obiekt wyświetlany obrócony o -45° i przeskalowany o 50%

Aby pobrać pliki tej przykładowej aplikacji, należy przejść na stronę www.adobe.com/go/learn_programmingAS3samples_flash_pl . Pliki aplikacji DisplayObjectTransformer znajdują się w folderze Samples/DisplayObjectTransformer. Aplikacja składa się z następujących plików:

File

Opis

DisplayObjectTransformer.mxml

lub

DisplayObjectTransformer.fla

Główny plik aplikacji w formacie Flash (FLA) lub Flex (MXML).

com/example/programmingas3/geometry/MatrixTransformer.as

Klasa zawierająca metody służące do stosowania transformacji macierzowych.

img/

Katalog zawierający przykładowe pliki obrazów używane przez aplikację.

Definiowanie klasy MatrixTransformer

Klasa MatrixTransformer zawiera metody statyczne, które stosują transformacje geometryczne opisane przez obiekty klasy Matrix.

Metoda transform()

Metoda transform() ma następujące parametry:

  • sourceMatrix — macierz wejściowa, którą metoda będzie transformować.

  • xScale i yScale — współczynniki skalowania w osi x i y .

  • dx i dy — zmiany położenia w osi x i y , wyrażone w pikselach.

  • rotation — obrót w stopniach.

  • skew — współczynnik pochylenia wyrażony procentowo.

  • skewType — kierunek pochylenia, "right" (w prawo) albo "left" (w lewo).

Wartością zwracaną jest wynikowa macierz.

Metoda transform() wywołuje następujące metody statyczne klasy:

  • skew()

  • scale()

  • translate()

  • rotate()

Każda z tych metod zwraca macierz źródłową poddaną transformacji.

Metoda skew()

Metoda skew() pochyla macierz, modyfikując jej właściwości b i c . Opcjonalny parametr unit określa jednostki, w jakich wyrażony jest kąt pochylenia; w razie potrzeby metoda przelicza wartość angle na radiany: 

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

Tworzony jest obiekt klasy Matrix o nazwie skewMatrix , a jego właściwości są odpowiednio modyfikowane w celu zastosowania pochylenia. Początkowo jest to macierz jednostkowa: 

var skewMatrix:Matrix = new Matrix();

Parametr skewSide określa, w którą stronę ma się odbywać pochylenie. Jeśli właściwość ta ma wartość "right" , poniższy kod nadaje wartość właściwości b macierzy: 

skewMatrix.b = Math.tan(angle);

W przeciwnym razie pochylana jest dolna strona w wyniku zmiany wartości właściwości c obiektu Matrix: 

skewMatrix.c = Math.tan(angle);

Wynikowe pochylenie jest następnie stosowane do istniejącej macierzy poprzez konkatenację dwóch macierzy, co ilustruje poniższy przykład: 

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

Metoda scale()

Tak, jak ilustruje to poniższy przykład, metoda scale() najpierw dopasowuje współczynnik skali, jeśli został podany jako wartość procentowa, a następnie wywołuje metodę scale() obiektu macierzy: 

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

Metoda translate()

Metoda translate() uwzględnia współczynniki translacji dx i dy , wywołując metodę translate() obiektu macierzy: 

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

Metoda rotate()

Metoda rotate() przelicza podany kąt obrotu na radiany (jeśli podano go w stopniach lub gradusach), a następnie wywołuje metodę rotate() obiektu macierzy: 

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

Wywoływanie metody MatrixTransformer.transform() z aplikacji

Aplikacja zawiera interfejs użytkownika umożliwiający wprowadzanie parametrów przekształceń. Wartości te są następnie przekazywane razem z właściwością matrix właściwości transform obiektu wyświetlanego do metody Matrix.transform() , tak jak przedstawiono to poniżej: 

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

Następnie aplikacja stosuje zwróconą wartość do właściwości matrix właściwości transform obiektu wyświetlanego, wywołując tym samym właściwą transformację: 

img.content.transform.matrix = tempMatrix;