Exemple de géométrie : application d’une transformation de matrice à un objet d’affichage

Flash Player 9 et les versions ultérieures, Adobe AIR 1.0 et les versions ultérieures

L’exemple d’application DisplayObjectTransformer présente de nombreuses fonctions permettant d’utiliser la classe Matrix pour transformer un objet d’affichage, notamment :

  • Rotation de l’objet d’affichage

  • Redimensionnement de l’objet d’affichage

  • Translation (repositionnement) de l’objet d’affichage

  • Inclinaison de l’objet d’affichage

L’application fournit une interface permettant d’ajuster les paramètres de la transformation de matrice, comme suit :

Lorsque l’utilisateur clique sur le bouton de transformation, l’application applique la transformation appropriée.

L’objet d’affichage original et l’objet d’affichage pivoté de -45° et redimensionné de 50 %

Pour obtenir les fichiers d’application de cet exemple, voir www.adobe.com/go/learn_programmingAS3samples_flash_fr . Les fichiers d’application DisplayObjectTransformer se trouvent dans le dossier Samples/DisplayObjectTransformer. L’application se compose des fichiers suivants :

Fichier

Description

DisplayObjectTransformer.mxml

ou

DisplayObjectTransformer.fla

Fichier d’application principal en FLA pour Flash ou en MXML pour Flex

com/example/programmingas3/geometry/MatrixTransformer.as

Une classe qui contient des méthodes permettant d’appliquer des transformations de matrice.

img/

Un répertoire contenant des exemples de fichiers image utilisés par l’application.

Définition de la classe MatrixTransformer

La classe MatrixTransformer comprend des méthodes statiques qui appliquent des transformations géométriques d’objets Matrix.

Méthode transform()

La méthode transform() comprend des paramètres associés à chaque élément suivant :

  • sourceMatrix —La matrice d’entrée, que la méthode transforme

  • xScale et yScale —Le facteur de redimensionnement x et y

  • dx et dy —Les montants de translation x et y , en pixels

  • rotation —Le montant de rotation, en degrés

  • skew —Le facteur d’inclinaison, en pourcentage

  • skewType —Le sens d’inclinaison, "right" ou "left"

La valeur renvoyée est la matrice résultante.

La méthode transform() appelle les méthodes statiques suivantes de la classe :

  • skew()

  • scale()

  • translate()

  • rotate()

Chacune renvoie la matrice source avec la transformation appliquée.

Méthode skew()

La méthode skew() incline la matrice en ajustant les propriétés b et c de la matrice. Un paramètre facultatif, unit , détermine les unités utilisées pour définir l’angle d’inclinaison et, le cas échéant, la méthode convertit la valeur angle en radians : 

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

Un objet Matrix skewMatrix est créé et ajusté pour appliquer la transformation par inclinaison. Au départ, il s’agit de la matrice d’identité, comme suit : 

var skewMatrix:Matrix = new Matrix();

Le paramètre skewSide détermine le côté auquel l’inclinaison est appliquée. S’il est défini sur "right" , le code suivant définit la propriété b de la matrice : 

skewMatrix.b = Math.tan(angle);

Autrement, le côté inférieur est incliné en ajustant la propriété c de la matrice, comme suit : 

skewMatrix.c = Math.tan(angle);

L’inclinaison résultante est ensuite appliquée à la matrice existante en concaténant les deux matrices, comme indiqué dans l’exemple suivant : 

sourceMatrix.concat(skewMatrix); 
return sourceMatrix;

Méthode scale()

Comme le montre l’exemple suivant, la méthode scale() ajuste d’abord le facteur de redimensionnement s’il est défini sous la forme de pourcentage, puis utilise la méthode scale() de l’objet matrix : 

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

Méthode translate()

La méthode translate() applique simplement les facteurs de translation dx et dy en appelant la méthode translate() de l’objet matrix, comme suit : 

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

Méthode rotate()

La méthode rotate() convertit le facteur de rotation d’entrée en radians (s’il est fourni en degrés ou dégradés), puis appelle la méthode rotate() de l’objet matrix : 

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

Appel de la méthode MatrixTransformer.transform() depuis l’application

L’application contient une interface utilisateur permettant d’obtenir les paramètres de transformation de l’utilisateur. Elle transmet ensuite ces valeurs, avec la propriété matrix de la propriété transform de l’objet d’affichage, à la méthode Matrix.transform() , comme suit : 

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

L’application applique alors la valeur renvoyée à la propriété matrix de la propriété transform de l’objet d’affichage, déclenchant ainsi la transformation : 

img.content.transform.matrix = tempMatrix;