new Matrix(values)
2D 3x2 transformation matrix, used to represent linear geometric transformations over objects.
The values of the matrix are stored as numeric array. The matrix can be applied to the canvas or DOM elements using CSS transforms.
Parameters:
Name | Type | Description |
---|---|---|
values |
Array.<number> | Array of matrix values by row, needs to have exactly 6 values. Default is the identity matrix. |
- Source:
Members
m :Array.<number>
Array that contains the matrix data by row. This matrix should have 6 values.
Matrix can be directly edited by accessing this attribute.
Type:
- Array.<number>
- Source:
Methods
clone() → {Matrix}
Create a new matrix object with a copy of the content of this one.
- Source:
Returns:
Copy of this matrix.
- Type
- Matrix
compose(px, py, sx, sy, ox, oy, rot)
Compose this transformation matrix with position scale and rotation and origin point.
Parameters:
Name | Type | Description |
---|---|---|
px |
number | Position X |
py |
number | Position Y |
sx |
number | Scale X |
sy |
number | Scale Y |
ox |
number | Origin X (applied before scale and rotation) |
oy |
number | Origin Y (applied before scale and rotation) |
rot |
number | Rotation angle (radians). |
- Source:
copy(mat)
Copy the content of another matrix and store in this one.
Parameters:
Name | Type | Description |
---|---|---|
mat |
Matrix | Matrix to copy values from. |
- Source:
cssTransform() → {string}
Generate a CSS transform string that can be applied to the transform style of any DOM element.
- Source:
Returns:
CSS transform matrix.
- Type
- string
determinant() → {number}
Get the matrix determinant.
- Source:
Returns:
Determinant of this matrix.
- Type
- number
getInverse() → {Matrix}
Get the inverse matrix.
- Source:
Returns:
New matrix instance containing the inverse matrix.
- Type
- Matrix
getPosition() → {Vector2}
Extract the position from the transformation matrix.
- Source:
Returns:
Position of the matrix transformation.
- Type
- Vector2
getScale() → {Vector2}
Extract the scale from the transformation matrix.
- Source:
Returns:
Scale of the matrix transformation.
- Type
- Vector2
identity()
Reset this matrix to identity.
- Source:
multiply(mat)
Multiply another matrix by this one and store the result.
Parameters:
Name | Type | Description |
---|---|---|
mat |
Matrix | Matrix to multiply by. |
- Source:
premultiply(mat)
Premultiply another matrix by this one and store the result.
Parameters:
Name | Type | Description |
---|---|---|
mat |
Matrix | Matrix to premultiply by. |
- Source:
rotate(rad)
Apply rotation to this matrix.
Parameters:
Name | Type | Description |
---|---|---|
rad |
number | Angle to rotate the matrix in radians. |
- Source:
scale(sx, sy)
Apply scale to this matrix.
Parameters:
Name | Type | Description |
---|---|---|
sx |
number | |
sy |
number |
- Source:
setContextTransform(context)
Set a canvas context to use this transformation.
Parameters:
Name | Type | Description |
---|---|---|
context |
CanvasRenderingContext2D | Canvas context to apply this matrix transform. |
- Source:
setPosition(x, y)
Set the position of the transformation matrix.
Parameters:
Name | Type | Description |
---|---|---|
x |
number | |
y |
number |
- Source:
skew(radianX, radianY)
Apply skew to this matrix.
Parameters:
Name | Type | Description |
---|---|---|
radianX |
number | |
radianY |
number |
- Source:
tranformContext(context)
Transform on top of the current context transformation.
Parameters:
Name | Type | Description |
---|---|---|
context |
CanvasRenderingContext2D | Canvas context to apply this matrix transform. |
- Source:
transformPoint(p) → {Vector2}
Transform a point using this matrix.
Parameters:
Name | Type | Description |
---|---|---|
p |
Vector2 | Point to be transformed. |
- Source:
Returns:
Transformed point.
- Type
- Vector2
translate(x, y)
Apply translation to this matrix.
Adds position over the transformation already stored in the matrix.
Parameters:
Name | Type | Description |
---|---|---|
x |
number | |
y |
number |
- Source: