Descripción

La clase Matrix representa una matriz de transformación que determina cómo asignar puntos de un espacio de coordenadas a otro.

Puede realizar varias transformaciones gráficas en un objeto de visualización como se indica a continuación:

  • Defina las propiedades de un objeto Matrix
  • Aplique ese objeto Matrix a la propiedad Matrix de un objeto de transformación
  • Aplique el objeto de transformación como la propiedad de transformación del objeto de visualización.

Estas funciones de transformación incluyen la traslación (cambio de posición x e y), la rotación y el cambio de escala.

Matrices de transformación

En su conjunto estas transformaciones se conocen como transformaciones afines. Las transformaciones afines preservan la rectilineidad de las líneas durante la transformación, de este modo las paralelas siguen siendo paralelas.

Un objeto de matriz de transformación es una matriz de 3x3 con el contenido siguiente:

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

En las matrices de transformación tradicionales, las propiedades u, v y w ofrecen capacidades adicionales. La clase Matrix solo funciona en un espacio bidimensional. Siempre asume que los valores de propiedad u y v son 0.0, y que el valor de propiedad w es 1.0. Los valores efectivos de la matriz son los siguientes:

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

Sintaxis

new flwebgl.geom.Matrix(values)

Parámetros

NombreTipoDescripción
valuesnúmero[](opcional) Un conjunto que define los valores de la matriz en un formato [a b c d tx ty]. Si no se especifica, la matriz se establece en el tipo Identity.

Métodos

clone()

Descripción

    Este método devuelve una copia de la instancia de Matrix.

Valor devuelto

  • Una copia de la instancia de Matrix
  • Tipo: Matrix  

concat(matrix)

Descripción

    Este método concatena la matriz proporcionada con la matriz actual, es decir, combina los efectos geométricos de ambas matrices.

Parámetros

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix  

Ejemplo

Este ejemplo concatena una matriz giratoria y una matriz de escala.

 
NombreTipoDescripción
matrixMatrix
La matriz que se va a multiplicar
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)

Descripción

    Este método copia la matriz especificada en esta matriz.

Parámetros

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix
NombreTipoDescripción
matrixMatrixLa matriz desde la que se copiarán propiedades

equals(mat)

Descripción

    Este método comprueba si la matriz especificada contiene los mismos valores que esta instancia.

Parámetros

Valor devuelto

  • Tipo: booleano
NombreTipoDescripción
matMatrixLa matriz que se va a comparar

getValues()

Descripción

    Este método devuelve los valores de los elementos de la matriz.

Valor devuelto

  • Un conjunto que define los valores de la matriz en un formato [a b c d tx ty].
  • Tipo:   número[]

Ejemplo

Este ejemplo obtiene los valores de una matriz y los modifica para sesgarlos en un factor de 0,5.

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

identity()

Descripción

    Este método define la matriz en una matriz del tipo Identity.

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix

invert()

Descripción

    Este método devuelve la matriz. La matriz inversa aplica la transformación opuesta.

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix

isIdentity()

Descripción

    Este método indica “true” si la matriz es una matriz del tipo Identity.

Valor devuelto

  • Tipo: booleano

rotate(angle)

Descripción

    Este método aplica una transformación de giro a la matriz.

Parámetros

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix

Ejemplo

Este ejemplo crea una nueva instancia de Matrix inicializada en la matriz del tipo Identity y la gira en 45 grados.

NombreTipoDescripción
anglenúmeroEl ángulo expresado en radianes. Para utilizar grados, multiplíquelo por Math.PI/180.
var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

Descripción

    Este método aplica una transformación de escala a la matriz.

Parámetros

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix

Ejemplo

Este ejemplo crea una nueva instancia de Matrix inicializada en la matriz del tipo Identity y cambia su escala en un factor de 2 horizontal y verticalmente.

NombreTipoDescripción
xnúmeroEl factor de escala horizontal.
ynúmeroEl factor de escala vertical.
var m = new flwebgl.geom.Matrix();
m.scale(2, 2);

setValues(values)

Descripción

    Este método define los valores de los elementos de la matriz.

Parámetros

Ejemplo

Consulte el ejemplo en la función getValues().

NombreTipoDescripción
values
número[]Un conjunto que define los valores de la matriz en un formato [a b c d tx ty].

transformPoint(point)

Descripción

    Este método transforma un punto según esta matriz.

Parámetros

Valor devuelto

  • El punto transformado.
  • Tipo: Point
NombreTipoDescripción
pointPointEl punto que se va a transformar.

transformRect(rect)

Descripción

    Este método transformará los cuatro puntos del rectángulo según esta matriz.

Parámetros

Valor devuelto

  • El rectángulo transformado.
  • Tipo: Rect
NombreTipoDescripción
rectRect
El rectángulo que se va a transformar.

translate(dx, dy)

Descripción

    Este método traduce la matriz en los ejes x e y.

Parámetros

Valor devuelto

  • Esta matriz. Resulta útil para concatenar llamadas de método.
  • Tipo: Matrix
NombreTipoDescripción
dxnúmeroMovimiento total hacia la derecha a lo largo del eje X.
dynúmeroMovimiento total hacia abajo a lo largo del eje Y.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea