Esempio di geometria: Applicazione di una trasformazione di matrice a un oggetto di visualizzazione

Flash Player 9 e versioni successive, Adobe AIR 1.0 e versioni successive

L'applicazione di esempio DisplayObjectTransformer illustra una serie di impieghi della classe Matrix per trasformare un oggetto di visualizzazione nei modi seguenti:

  • Rotazione dell'oggetto di visualizzazione

  • Modifica in scala dell'oggetto di visualizzazione

  • Conversione (riposizionamento) dell'oggetto di visualizzazione

  • Inclinazione dell'oggetto di visualizzazione

L'applicazione comprende un'interfaccia che permette di modificare i parametri della trasformazione di matrice nel modo seguente:

Quando l'utente seleziona il pulsante Transform, l'applicazione applica la trasformazione impostata.

L'oggetto di visualizzazione originale e l'oggetto ruotato di -45° e ridotto del 50%

Per ottenere i file dell'applicazione per questo esempio, visitate la pagina www.adobe.com/go/learn_programmingAS3samples_flash_it. I file dell'applicazione DisplayObjectTransformer si trovano nella cartella Samples/DisplayObjectTransformer. L'applicazione è composta dai seguenti file:

File

Descrizione

DisplayObjectTransformer.mxml

o

DisplayObjectTransformer.fla

Il file principale dell'applicazione in Flash (FLA) o Flex (MXML)

com/example/programmingas3/geometry/MatrixTransformer.as

Classe che contiene metodi per applicare trasformazioni di matrice.

img/

Directory che contiene file immagine di esempio utilizzati dall'applicazione.

Definizione della classe MatrixTransformer

La classe MatrixTransformer comprende dei metodi statici che applicano trasformazioni geometriche degli oggetti Matrix.

Metodo transform()

Il metodo transform() comprende parametri per gli elementi seguenti:

  • sourceMatrix - Matrice di partenza a cui il metodo applica le trasformazioni

  • xScale e yScale - Fattori di scala di x e y

  • dx e dy - Ammontare dello spostamento di x e y, espresso in pixel

  • rotation - Ammontare della rotazione, espresso in gradi

  • skew - Fattore di inclinazione, espresso in percentuale

  • skewType - Direzione dell'inclinazione, può essere destra ("right") o sinistra ("left")

Il valore restituito è la matrice risultante.

Il metodo transform() chiama i seguenti metodi statici della classe:

  • skew()

  • scale()

  • translate()

  • rotate()

Ognuno restituisce la matrice di partenza con la trasformazione applicata.

Metodo skew()

Il metodo skew() inclina la matrice modificando le proprietà b e c della matrice stessa. Un parametro facoltativo, unit, stabilisce le unità in cui è definito l'angolo di inclinazione e, se necessario, il metodo converte il valore angle in radianti:

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

L'oggetto Matrix skewMatrix viene creato e modificato in base al valore di inclinazione. Inizialmente si tratta della matrice di identità:

var skewMatrix:Matrix = new Matrix();

Il parametro skewSide determina il lato a cui va applicata l'inclinazione. Se il parametro è impostato su "right", il codice seguente imposta la proprietà b della matrice:

skewMatrix.b = Math.tan(angle);

Altrimenti, il lato inferiore viene inclinato modificando la proprietà c dell'oggetto Matrix nel modo seguente:

skewMatrix.c = Math.tan(angle);

L'inclinazione risultante viene applicata alla matrice esistente concatenando le due matrici, come illustra l'esempio seguente:

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

Metodo scale()

Nell'esempio seguente, il metodo scale() prima modifica il fattore di scala, se espresso in valore di percentuale, quindi usa il metodo scale() dell'oggetto Matrix:

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

Metodo translate()

Il metodo translate() semplicemente applica i fattori di conversione dx e dy chiamando il metodo translate() dell'oggetto Matrix come segue:

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

Metodo rotate()

Il metodo rotate() converte il fattore di rotazione specificato in radianti (se espresso in gradi o gradienti), quindi chiama il metodo rotate() dell'oggetto Matrix:

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

Chiamata al metodo MatrixTransformer.transform() dall'applicazione

L'applicazione comprende un'interfaccia utente tramite la quale l'utente può specificare i parametri di trasformazione. Tali valori vengono quindi passati, insieme alla proprietà matrix della proprietà transform dell'oggetto di visualizzazione, al metodo Matrix.transform() nel modo seguente:

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

L'applicazione quindi applica il valore restituito alla proprietà matrix della proprietà transform dell'oggetto di visualizzazione, attivando la trasformazione:

img.content.transform.matrix = tempMatrix;