Matrix

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

Nombre Tipo Descripción
values nú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.

 
Nombre Tipo Descripción
matrix Matrix
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
Nombre Tipo Descripción
matrix Matrix La 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
Nombre Tipo Descripción
mat Matrix La 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.

Nombre Tipo Descripción
angle número El á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.

Nombre Tipo Descripción
x número El factor de escala horizontal.
y número El 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().

Nombre Tipo Descripció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
Nombre Tipo Descripción
point Point El 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
Nombre Tipo Descripción
rect Rect
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
Nombre Tipo Descripción
dx número Movimiento total hacia la derecha a lo largo del eje X.
dy número Movimiento total hacia abajo a lo largo del eje Y.

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea