Geometrie-Beispiel: Anwenden einer Matrixtransformation auf ein Anzeigeobjekt

Flash Player 9 und höher, Adobe AIR 1.0 und höher

Die Beispielanwendung „DisplayObjectTransformer“ veranschaulicht mehrere Funktionen, über die ein Anzeigeobjekt mithilfe der Matrix-Klasse geändert werden kann. Dazu gehören:

  • Drehen des Anzeigeobjekts

  • Skalieren des Anzeigeobjekts

  • Versetzen (Neupositionieren) des Anzeigeobjekts

  • Neigen des Anzeigeobjekts

Die Anwendung stellt die folgende Benutzeroberfläche zum Anpassen der Parameter der Matrixtransformation bereit:

Wenn der Benutzer auf die Schaltfläche „Transformieren“ klickt, wird die entsprechende Transformation angewendet.

Das ursprüngliche Anzeigeobjekt und das um -45 ° gedrehte und um 50 % skalierte Anzeigeobjekt

Die Anwendungsdateien für dieses Beispiel finden Sie unter www.adobe.com/go/learn_programmingAS3samples_flash_de . Die Dateien der Anwendung „DisplayObjectTransformer“ befinden sich im Ordner „Samples/DisplayObjectTransformer“. Die Anwendung umfasst die folgenden Dateien:

Datei

Beschreibung

DisplayObjectTransformer.mxml

oder

DisplayObjectTransformer.fla

Die Hauptanwendungsdatei im Flash-Format (FLA) oder Flex-Format (MXML).

com/example/programmingas3/geometry/MatrixTransformer.as

Eine Klasse mit Methoden zum Anwenden von Matrixtransformationen.

img/

Ein Verzeichnis mit den in der Anwendung verwendeten Beispielbilddateien.

Definieren der MatrixTransformer-Klasse

Die MatrixTransformer-Klasse enthält statische Methoden, die geometrische Transformationen von Matrix-Objekten anwenden.

transform()-Methode

Die transform() -Methode enthält folgende Parameter:

  • sourceMatrix – Die Eingabematrix, die mit der Methode transformiert wird.

  • xScale und yScale – Der Skalierungsfaktor für x und y .

  • dx und dy – Die Versetzung von x und y in Pixel.

  • rotation – Die Drehung in Grad.

  • skew – Der Neigungsfaktor als Prozentsatz.

  • skewType – Die Neigungsrichtung, entweder right oder left .

Der Rückgabewert ist die resultierende Matrix.

Mit der transform() -Methode werden die folgenden statischen Methoden der Klasse aufgerufen:

  • skew()

  • scale()

  • translate()

  • rotate()

Jede Methode gibt die Quellmatrix mit der angewendeten Transformation zurück.

skew()-Methode

Mit der skew() -Methode wird die Matrix geneigt, indem die Eigenschaften b und c der Matrix angepasst werden. Mit dem optionalen Parameter unit werden die Einheiten ermittelt, die zum Definieren des Neigungswinkels verwendet werden. Gegebenenfalls konvertiert die Methode den angle -Wert in das Bogenmaß:

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

Das Matrix-Objekt skewMatrix wird erstellt und so angepasst, dass die Neigungstransformation angewendet werden kann. Anfangs ist dies die Identitätsmatrix, wie im Folgenden dargestellt:

var skewMatrix:Matrix = new Matrix();

Der Parameter skewSide gibt die Seite an, in deren Richtung die Neigung angewendet wird. Wenn der Parameter auf right gesetzt ist, wird mit dem folgenden Code die b -Eigenschaft der Matrix festgelegt:

skewMatrix.b = Math.tan(angle);

Andernfalls wird die untere Seite geneigt, indem die c -Eigenschaft der Matrix angepasst wird, wie im Folgenden dargestellt:

skewMatrix.c = Math.tan(angle);

Die resultierende Neigung wird dann auf die vorhandene Matrix angewendet, indem die beiden Matrizen verkettet werden, wie im folgenden Beispiel dargestellt:

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

scale()-Methode

Wie im folgenden Beispiel dargestellt, wird mit der scale() -Methode zunächst der Skalierungsfaktor angepasst, wenn dieser als Prozentsatz angegeben ist, und dann die scale() -Methode des Matrix-Objekts verwendet:

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

translate()-Methode

Die translate() -Methode wendet die Versetzungsfaktoren dx und dy an, indem die translate() -Methode des Matrix-Objekts aufgerufen wird, wie im Folgenden dargestellt:

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

rotate()-Methode

Die rotate() -Methode konvertiert den eingegebenen Drehungsfaktor in das Bogenmaß (wenn der Faktor in Grad oder Gradient angegeben wird) und ruft dann die rotate() -Methode des Matrix-Objekts auf:

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

Aufrufen der MatrixTransformer.transform()-Methode aus der Anwendung

Die Anwendung verfügt über eine Benutzeroberfläche zum Abfragen der Transformationsparameter vom Benutzer. Diese Werte werden dann zusammen mit der matrix -Eigenschaft der transform -Eigenschaft des Anzeigeobjekts wie folgt an die Matrix.transform() -Methode übergeben:

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

Anschließend wird der Rückgabewert auf die matrix -Eigenschaft der transform -Eigenschaft des Anzeigeobjekts angewendet. Dadurch wird die Transformation ausgelöst:

img.content.transform.matrix = tempMatrix;