Voorbeeld van geometrie: een matrixtransformatie toepassen op een weergaveobject

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

In de voorbeeldtoepassing DisplayObjectTransformer worden enkele kenmerken van het gebruik van de klasse Matrix getoond om een weergaveobject te transformeren, zoals:

  • Het weergaveobject roteren

  • Het weergaveobject schalen

  • Het weergaveobject transleren (verplaatsen)

  • Het weergaveobject scheeftrekken

De toepassing biedt een interface voor het aanpassen van de parameters van de matrixtransformatie, als volgt:

Wanneer de gebruiker op de knop Transform klikt, wordt in de toepassing de desbetreffende transformatie toegepast.

Het oorspronkelijke weergaveobject en het weergaveobject -45° geroteerd en met 50% geschaald

Zie www.adobe.com/go/learn_programmingAS3samples_flash_nl als u de toepassingsbestanden voor dit voorbeeld wilt downloaden. De toepassingsbestanden van DisplayObjectTransformer vindt u in de map Samples/DisplayObjectTransformer. De toepassing bestaat uit de volgende bestanden:

Bestand

Beschrijving

DisplayObjectTransformer.mxml

of

DisplayObjectTransformer.fla

Het hoofdtoepassingsbestand in Flash (FLA) of Flex (MXML)

com/example/programmingas3/geometry/MatrixTransformer.as

Een klasse met methoden voor de toepassing van matrixtransformaties.

img/

Een map met voorbeeldafbeeldingsbestanden die in de toepassing worden gebruikt.

De klasse MatrixTransformer definiëren

De klasse MatrixTransformer bevat statische methoden voor de toepassing van geometrische transformaties op objecten Matrix.

De methode transform()

De methode transform() bevat parameters voor:

  • sourceMatrix - De invoermatrix die wordt getransformeerd

  • xScale en yScale - De x - en y -schaalfactor

  • dx en dy - De mate waarin x en y worden getransleerd, in pixels

  • rotation - De mate van rotatie, in graden

  • skew - De scheeftrekfactor, als percentage

  • skewType - De richting waarin wordt scheefgetrokken, "right" of "left"

De geretourneerde waarde is de resulterende matrix.

De methode transform() roept de volgende statische methoden aan van de klasse:

  • skew()

  • scale()

  • translate()

  • rotate()

Elke methode retourneert de bronmatrix met de toegepaste transformatie.

De methode skew()

De methode skew() trekt de matrix scheef door de eigenschappen b en c van de matrix aan te passen. Een optionele parameter, unit , bepaalt de gebruikte eenheden om de scheeftrekhoek te definiëren. De methode zet zo nodig de waarde voor angle om in radialen: 

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

Er wordt een object Matrix A met de naam skewMatrix gemaakt en aangepast om de scheeftrektransformatie toe te passen. Aanvankelijk is er sprake van de identiteitsmatrix, als volgt: 

var skewMatrix:Matrix = new Matrix();

De parameter skewSide bepaalt de kant waarop het scheeftrekken wordt toegepast. Bij "right" wordt met de volgende code de eigenschap b van de matrix ingesteld: 

skewMatrix.b = Math.tan(angle);

Anders wordt de onderkant scheefgetrokken door de eigenschap c van de matrix in te stellen, als volgt: 

skewMatrix.c = Math.tan(angle);

Het resulterende scheeftrekken wordt vervolgens toegepast op de bestaande matrix door de twee matrices samen te voegen, zoals in het volgende voorbeeld wordt getoond: 

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

De methode scale()

Zoals u in het volgende voorbeeld kunt zien, wordt met de methode scale() eerst de schaalfactor aangepast als deze als percentage wordt opgegeven. Vervolgens wordt de methode scale() van het matrixobject gebruikt: 

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

De methode translate()

De methode translate() past eenvoudig de translatiefactoren dx en dy toe door de methode translate() van het matrixobject aan te roepen, als volgt: 

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

De methode rotate()

De methode rotate() zet de invoerrotatiefactor om in radialen (als deze als graden of verloop wordt opgegeven). Vervolgens wordt de methode rotate() van het matrixobject aangeroepen: 

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

De methode MatrixTransformer.transform() vanuit de toepassing aanroepen

De toepassing bevat een gebruikersinterface om de transformatieparameters van de gebruiker te verkrijgen. Deze waarden worden vervolgens doorgegeven, samen met de eigenschap matrix van de eigenschap transform van het weergaveobject, aan de methode Matrix.transform() . Dit gaat als volgt: 

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

In de toepassing worden de geretourneerde waarden vervolgens toegepast op de eigenschap matrix van de eigenschap transform van het weergaveobject, waarbij de transformatie wordt geïnitieerd: 

img.content.transform.matrix = tempMatrix;