Constructor
# new Matrix()
2D transformation matrix object initialized with identity matrix.
Properties:
| Name | Type | Description |
|---|---|---|
a |
number
|
scale x |
b |
number
|
shear y |
c |
number
|
shear x |
d |
number
|
scale y |
e |
number
|
translate x |
f |
number
|
translate y |
- Version:
- 2.7.5
- Copyright:
- Epistemex.com 2014-2018
- License:
- MIT license (header required)
Methods
# static from(a, bopt, copt, dopt, eopt, fopt, contextopt) → {Matrix}
Create and transform a new matrix based on given matrix values, or
provide SVGMatrix or a (2D) DOMMatrix, WebKitCSSMatrix or another
instance of a generic matrix.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
a |
*
|
number representing a (scale x) in [a-f], or a Matrix object containing properties a-f. | |
b |
*
|
<optional> |
b property (shear y) if a is not a matrix object, or optional canvas 2D context. If vector is input this will be pre-translate for x. |
c |
number
|
<optional> |
c property (shear x) |
d |
number
|
<optional> |
d property (scale y) |
e |
number
|
<optional> |
e property (translate x) |
f |
number
|
<optional> |
f property (translate y) |
context |
CanvasRenderingContext2D
|
<optional> |
optional canvas context to synchronize |
- new Matrix instance
Example
var m = Matrix.from(1, 0.2, 0, 2, 120, 97);
var m = Matrix.from(domMatrix, ctx);
var m = Matrix.from(svgMatrix);
var m = Matrix.from(matrix);# applyToPoint(pt) → {Array.<number>}
Apply current matrix to `x` and `y` of a point.
Returns a point object.
Parameters:
| Name | Type | Description |
|---|---|---|
pt |
Array.<number>
|
the point to transform ([x, y]). If an optionnal Z value is provided, it will be kept without transformation. |
A new transformed point [x, y]. If pt had a third value, it is returned too, as it was without transformation.
Array.<number>
# clone(noContextopt) → {Matrix}
Clones current instance and returning a new matrix.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
noContext |
boolean
|
<optional> |
false | don't clone context reference if true |
- a new Matrix instance with identical transformations as this instance
# decompose() → {*}
Decompose the current matrix into simple transforms using QR.
- an object containing current decomposed values (translate, rotation, scale, skew)
*
# inverse(cloneContextopt) → {Matrix}
Get an inverse matrix of current matrix. The method returns a new
matrix with values you need to use to get to an identity matrix.
Context from parent matrix is not applied to the returned matrix.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
cloneContext |
boolean
|
<optional> |
false | clone current context to resulting matrix |
Exception is input matrix is not invertible
- new Matrix instance
# isEqual(m) → {boolean}
Compares current matrix with another matrix. Returns true if equal
(within epsilon tolerance).
Parameters:
boolean
# isIdentity() → {boolean}
Returns true if matrix is an identity matrix (no transforms applied).
boolean
# isValid() → {boolean}
The method is intended for situations where scale is accumulated
via multiplications, to detect situations where scale becomes
"trapped" with a value of zero. And in which case scale must be
set explicitly to a non-zero value.
boolean
# rotate(angle) → {Matrix}
Rotates current matrix by angle (accumulative).
Parameters:
| Name | Type | Description |
|---|---|---|
angle |
number
|
angle in degrees |
# rotateFromVector(x, yopt) → {Matrix}
Converts a vector given as `x` and `y` to angle, and
rotates (accumulative). x can instead contain an object with
properties x and y and if so, y parameter will be ignored.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
x |
number
|
*
|
||
y |
number
|
<optional> |
# scale(s) → {Matrix}
Scales current matrix accumulative.
Parameters:
| Name | Type | Description |
|---|---|---|
s |
Array.<number>
|
scale factor [x, y]. 1 does nothing, any third value (Z) is ignored. |
# setTransform(a, b, c, d, e, f) → {Matrix}
Set current matrix to new absolute matrix.
Parameters:
| Name | Type | Description |
|---|---|---|
a |
number
|
scale x |
b |
number
|
shear y |
c |
number
|
shear x |
d |
number
|
scale y |
e |
number
|
translate x |
f |
number
|
translate y |
# shear(sx, sy) → {Matrix}
Apply shear to the current matrix accumulative.
Parameters:
| Name | Type | Description |
|---|---|---|
sx |
number
|
amount of shear for x |
sy |
number
|
amount of shear for y |
# skew(ax, ay) → {Matrix}
Apply skew to the current matrix accumulative. Angles in radians.
Also see
`skewDeg()`.
Parameters:
| Name | Type | Description |
|---|---|---|
ax |
number
|
angle of skew for x |
ay |
number
|
angle of skew for y |
# toCSS() → {string}
Generates a string that can be used with CSS `transform`.
string
Example
element.style.transform = m.toCSS();# toCSS3D() → {string}
Generates a `matrix3d()` string that can be used with CSS `transform`.
Although the matrix is for 2D use you may see performance benefits
on some devices using a 3D CSS transform instead of a 2D.
string
Example
element.style.transform = m.toCSS3D();# transform(a2, b2, c2, d2, e2, f2) → {Matrix}
Multiplies current matrix with new matrix values. Also see
`multiply()`.
Parameters:
| Name | Type | Description |
|---|---|---|
a2 |
number
|
scale x |
b2 |
number
|
skew y |
c2 |
number
|
skew x |
d2 |
number
|
scale y |
e2 |
number
|
translate x |
f2 |
number
|
translate y |