Description

The Matrix class represents a transformation matrix that determines how to map points from one coordinate space to another.

You can perform various graphical transformations on a display object as follows:

  • Set the properties of a Matrix object
  • Apply that Matrix object to the matrix property of a Transform object
  • Apply the Transform object as the transform property of the display object.

These transformation functions include translation (x and y repositioning), rotation, and scaling.

Transformation Matrices

Together these types of transformations are known as affine transformations. Affine transformations preserve the straightness of lines while transforming, so that parallel lines stay parallel.

A transformation matrix object is a 3 x 3 matrix with the following contents:

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

In traditional transformation matrixes, the u, v, and w properties provide extra capabilities. The Matrix class operates only in two-dimensional space. So it always assumes that the property values u and v are 0.0, and that the property value w is 1.0. The effective values of the matrix are as follows:

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

Syntax

new flwebgl.geom.Matrix(values)

Parameters

Name Type Description
values number[] (optional) An array defining the values of the matrix in the format [a b c d tx ty]. If not specified, the matrix is set to identity.

Methods

clone()

Description

    This method returns a clone of the Matrix instance.

Returns

  • A clone of the Matrix instance.
  • Type - Matrix  

concat(matrix)

Description

This method concatenates the supplied matrix with the current matrix, effectively combining the geometric effects of the two.

Parameters

Name Type Description
matrix Matrix The matrix to multiply

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix  

Example

This example concatenates a rotating matrix and a scaling matrix.  

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

 This method copies the specified matrix to this matrix.

Parameters

Name Type Description
matrix Matrix The matrix to copy properties from

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix

equals(mat)

Description

This method checks if the given matrix has the same values as this instance.

Parameters

Name Type Description
mat Matrix The matrix to compare

Returns

  • Type - boolean

getValues()

Description

    This method returns the values of the elements in the matrix.

Returns

  • An array defining the values of the matrix in the format [a b c d tx ty]
  • Type -  number[]

Example

This example obtains the values of a matrix and modifies it to be skewed by a factor of 0.5.

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

identity()

Description

    This method sets the matrix to an Identity Matrix.

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix

invert()

Description

    This method inverts the matrix, In effect, the inverted matrix applies the opposite transformation.

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix

isIdentity()

Description

    This method indicates 'true' if the matrix is an identity matrix.

Returns

  • Type - boolean

rotate(angle)

Description

This method applies a rotation transformation to the matrix.

Parameters

Name Type Description
angle number The angle in radians. To use degrees, multiply by Math.PI/180.

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix

Example

This example creates a new Matrix instance initialized to the identity matrix and rotate it by 45 degrees.

var m = new flwebgl.geom.Matrix();
m.rotate(45 * Math.PI / 180);

scale(x, y)

Description

  This method applies a scale transformation to the matrix.

Parameters

Name Type Description
x number The horizontal scale factor.
y number The vertical scale factor.

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix

Example

This example creates a new Matrix instance initialized to the identity matrix and scales it by a factor of 2 both horizontally and vertically.

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

setValues(values)

Description

This method sets the values of the elements of the matrix.

Parameters

Name Type Description
values number[] An array defining the values of the matrix in the format [a b c d tx ty].

Example

See the example under the getValues() function.

transformPoint(point)

Description

This method transforms a point according to this matrix.

Parameters

Name Type Description
point Point The point to transform.

Returns

  • The transformed point.
  • Type - Point

transformRect(rect)

Description

 This method transforms all the four points of the rect according to this matrix.

Parameters

Name Type Description
rect Rect The rect to transform.

Returns

  • The transformed Rect.
  • Type - Rect

translate(dx, dy)

Description

This method translates the matrix on the x and y axes.

Parameters

Name Type Description
dx number The amount of movement along the X axis to the right.
dy number The amount of movement down along the Y axis.

Returns

  • This matrix. Useful for chaining method calls.
  • Type - Matrix

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy