Class

Matrix

Matrix()

2D Transformation Matrix.
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
Author:
  • Epistemex
License:
  • MIT license (header required)

View Source DuAEF_Duik_api.jsxinc, line 3935

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

View Source DuAEF_Duik_api.jsxinc, line 3985

- new Matrix instance
Matrix
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.

View Source DuAEF_Duik_api.jsxinc, line 4239

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

View Source DuAEF_Duik_api.jsxinc, line 4302

- a new Matrix instance with identical transformations as this instance
Matrix

# decompose() → {*}

Decompose the current matrix into simple transforms using QR.
See:

View Source DuAEF_Duik_api.jsxinc, line 4177

- an object containing current decomposed values (translate, rotation, scale, skew)
*

# determinant() → {number}

Returns the determinant of the current matrix.

View Source DuAEF_Duik_api.jsxinc, line 4227

number

# 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

View Source DuAEF_Duik_api.jsxinc, line 4152

Exception is input matrix is not invertible
- new Matrix instance
Matrix

# isEqual(m) → {boolean}

Compares current matrix with another matrix. Returns true if equal (within epsilon tolerance).
Parameters:
Name Type Description
m Matrix | Matrix | DOMMatrix | SVGMatrix matrix to compare this matrix with

View Source DuAEF_Duik_api.jsxinc, line 4283

boolean

# isIdentity() → {boolean}

Returns true if matrix is an identity matrix (no transforms applied).

View Source DuAEF_Duik_api.jsxinc, line 4252

boolean

# isInvertible() → {boolean}

Returns true if matrix is invertible

View Source DuAEF_Duik_api.jsxinc, line 4261

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.

View Source DuAEF_Duik_api.jsxinc, line 4273

boolean

# multiply(m) → {Matrix}

Multiplies current matrix with source matrix.
Parameters:
Name Type Description
m Matrix | Matrix | DOMMatrix | SVGMatrix source matrix to multiply with.

View Source DuAEF_Duik_api.jsxinc, line 4139

Matrix

# reset() → {Matrix}

Short-hand to reset current matrix to an identity matrix.

View Source DuAEF_Duik_api.jsxinc, line 4007

Matrix

# rotate(angle) → {Matrix}

Rotates current matrix by angle (accumulative).
Parameters:
Name Type Description
angle number angle in degrees

View Source DuAEF_Duik_api.jsxinc, line 4016

Matrix

# 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>

View Source DuAEF_Duik_api.jsxinc, line 4033

Matrix

# 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.

View Source DuAEF_Duik_api.jsxinc, line 4042

Matrix

# 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

View Source DuAEF_Duik_api.jsxinc, line 4077

Matrix

# 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

View Source DuAEF_Duik_api.jsxinc, line 4052

Matrix

# 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

View Source DuAEF_Duik_api.jsxinc, line 4063

Matrix

# toCSS() → {string}

Generates a string that can be used with CSS `transform`.

View Source DuAEF_Duik_api.jsxinc, line 4312

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.

View Source DuAEF_Duik_api.jsxinc, line 4324

string
Example
element.style.transform = m.toCSS3D();

# toJSON() → {string}

Returns a JSON compatible string of current matrix.

View Source DuAEF_Duik_api.jsxinc, line 4333

string

# 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

View Source DuAEF_Duik_api.jsxinc, line 4108

Matrix

# translate(t) → {Matrix}

Translate current matrix accumulative.
Parameters:
Name Type Description
t Array.<number> translation [x, y]. Any third value (Z) is ignored.

View Source DuAEF_Duik_api.jsxinc, line 4093

Matrix