Description

La classe Matrix représente une matrice de transformation qui détermine le mappage des points d’un espace de coordonnées à l’autre.

Vous pouvez effectuer diverses transformations graphiques sur un objet d’affichage en procédant comme suit :

  • Définir les propriétés d’un objet Matrix
  • Appliquer cet objet Matrix à la propriété de matrice d’un objet Transform
  • Appliquer l’objet Transform comme propriété de transformation de l’objet d’affichage

Ces fonctions de transformation incluent la translation (repositionnement de x et y), la rotation et le redimensionnement.

Matrices de transformation

Associés, ces types de transformations sont connus sous le nom de transformations affines. Les transformations affines préservent la rectitude des lignes au cours de la transformation, de telle sorte que les lignes parallèles restent parallèles.

Un objet de matrice de transformation est une matrice 3 x 3 incluant le contenu suivant :

| a c tx |
| b d ty |
| u v w  |

Dans le cas des matrices de transformation classiques, les propriétés u, v et w sont dotées de fonctionnalités supplémentaires. La classe Matrix fonctionne uniquement dans un espace bidimensionnel. Par conséquent, cela suppose toujours que les valeurs de propriété u et v sont égales à 0,0, et que la valeur de propriété w est égale à 1,0. Les valeurs valides de la matrice sont les suivantes :

| a c tx |
| b d ty |
| 0 0 1  |

Syntaxe

new flwebgl.geom.Matrix(values)

Paramètres

NomTypeDescription
valuesnombre[](Facultatif) Tableau définissant les valeurs de la matrice au format [a b c d tx ty]. Par défaut, la matrice est définie sur identité.

Méthodes

clone()

Description

    Cette méthode renvoie un clone de l’occurrence Matrix.

Valeurs renvoyées

  • Clone de l’occurrence Matrix
  • Type – Matrice
 

concat(matrix)

Description

    Cette méthode concatène la matrice fournie et la matrice actuelle, ce qui a pour effet de combiner les effets géométriques des deux matrices.

Paramètres

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice  

Exemple

Cet exemple concatène une matrice de rotation et une matrice de mise à l’échelle.  

NomTypeDescription
matrixMatrix
Matrice à multiplier
var m1 = new flwebgl.geom.Matrix();
m1.rotate(45 * Math.PI / 180);

var m2 = new flwebgl.geom.Matrix();
m2.scale(2, 2);

m1.concat(m2);

copy(matrix)

Description

    Cette méthode copie la matrice spécifiée sur cette matrice.

Paramètres

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice
NomTypeDescription
matrixMatrixMatrice à partir de laquelle les propriétés doivent être copiées

equals(mat)

Description

    Cette méthode vérifie si la matrice donnée comporte les mêmes valeurs que cette instance.

Paramètres

Valeurs renvoyées

  • Type – booléen
NomTypeDescription
matMatrixMatrice à comparer

getValues()

Description

    Cette méthode renvoie les valeurs des éléments de la matrice.

Valeurs renvoyées

  • Tableau définissant les valeurs de la matrice au format [a b c d tx ty]
  • Type – nombre[]

Exemple

Cet exemple obtient les valeurs d’une matrice et la modifie de manière à ce qu’elle soit inclinée d’un facteur 0,5.

var m = new flwebgl.geom.Matrix();
var arr = m.getValues();
arr[1] = 0.5;
m.setValues(arr);

identity()

Description

    Cette méthode définit la matrice sur une matrice Identity.

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice

invert()

Description

    Cette méthode inverse la matrice. En effet, la matrice inversée applique la transformation opposée.

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice

isIdentity()

Description

    Cette méthode indique « true » si la matrice est une matrice d’identité.

Valeurs renvoyées

  • Type – booléen

rotate(angle)

Description

    Cette méthode applique une transformation de rotation à la matrice.

Paramètres

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice

Exemple

Cet exemple crée une occurrence de Matrix initialisée sur la matrice d’identité et la fait pivoter de 45 degrés.

NomTypeDescription
anglenombreAngle exprimé en radians. Pour utiliser des degrés, multipliez par Math.PI/180.
var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

Description

    Cette méthode applique une transformation d’échelle à la matrice.

Paramètres

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice

Exemple

Cet exemple crée une occurrence de Matrix initialisée sur la matrice d’identité et la met à l’échelle selon un facteur 2 à la fois horizontalement et verticalement.

NomTypeDescription
xnombreFacteur d’échelle horizontal.
ynombreFacteur d’échelle vertical.
var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

setValues(valeurs)

Description

    Cette méthode définit les valeurs des éléments de la matrice.

Paramètres

Exemple

Voir l’exemple sous la fonction getValues().

NomTypeDescription
values
nombre[]Tableau définissant les valeurs de la matrice au format [a b c d tx ty].

transformPoint(point)

Description

    Cette méthode transforme un point conformément à cette matrice.

Paramètres

Valeurs renvoyées

  • Point transformé.
  • Type – Point
NomTypeDescription
pointPointPoint à transformer.

transformRect(rect)

Description

    Cette méthode transforme les quatre points du rectangle conformément à cette matrice.

Paramètres

Valeurs renvoyées

  • Rectangle transformé.
  • Type – Rect
NomTypeDescription
rectRect
Rectangle à transformer.

translate(dx, dy)

Description

    Cette méthode effectue une translation de la matrice sur les axes x et y.

Paramètres

Valeurs renvoyées

  • Cette matrice. Utile pour enchaîner des appels de méthode.
  • Type – Matrice
NomTypeDescription
dxnombreAmplitude du mouvement sur l’axe X vers la droite
dynombreAmplitude du mouvement le long de l’axe Y

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne