C

Matrix

Show Usages
An implementation of a matrix that represents an affine transformation and works with Point.
ImplementsInheritance Hierarchy

Remarks

The matrix is interpreted row-major. The rows are defined as follows: [ m11 m12 dx ], [ m21 m22 dy ], ([ 0 0 1 ] implicitly).

When transforming a vector v using this matrix, the multiplication is done in this order: v' = M v.

PREPENDing a matrix T to this instance results in the operation M′ = M T. In concept, this means that T is applied before M when applying M' to a vector. APPENDing T to M results in M′ = T M.

Members

No filters for this type

Constructors

Matrix

()
Creates an identity matrix.

Matrix

(
m11: number
m12: number
m21: number
m22: number
dx: number
dy: number
)
Creates a matrix using the provided matrix entries.

Parameters

m11: number
The value in the first row and first column of the matrix, representing the x scaling factor.
m12: number
The value in the first row and second column of the matrix, representing the x shear factor.
m21: number
The value in the second row and first column of the matrix, representing the y shear factor.
m22: number
The value in the second row and second column of the matrix, representing the y scaling factor.
dx: number
The value in the first row and third column of the matrix, representing the x translation (offset).
dy: number
The value in the second row and third column of the matrix, representing the y translation (offset).

Properties

elements

: number[]
readonly
Gets a new double[] of the elements describing the matrix.
The order is m11, m12, m21, m22, dx, dy.
readonlyfinal

Methods

applyTo

(ctx: CanvasRenderingContext2D)
Applies this matrix to the given HTML canvas rendering context.
final

Parameters

ctx: CanvasRenderingContext2D
The context to transform.

applyTo

(element: SVGElement)
Applies this matrix to the given SVG element.
final

Parameters

element: SVGElement
The element to transform.

applyTo

(element: HTMLElement)
Applies this matrix to the given HTML element.
This applies position absolute, transform-origin top left, and applies this transform matrix.
final

Parameters

element: HTMLElement
The element to transform.

calculateTransformedBounds

(rectangle: Rect): Rect
Transforms the four corner points of the given rectangle and returns the bounds of the transformed points.
final

Parameters

rectangle: Rect
The rectangle instance.

Return Value

Rect
A new Rect that represents the bounds around the four transformed corner points.

See Also

Developer's Guide

clone

(): Object
Create a clone of this object.
final

Return Value

Object
A clone of this object.

hasSameValue

(other: Matrix): boolean
Determines whether this has the same values like other.
final

Parameters

other: Matrix
The object to compare this to. Must be of the same type.

Return Value

boolean
true if this has the same values like the other object.

invert

()
Inverts this instance in place.
final

multiply

(matrix: Matrix, order?: MatrixOrder)
Multiplies this matrix instance by the given instance using the given order.
final

Parameters

matrix: Matrix
The matrix to multiply with this one.
order?: MatrixOrder
The order of the multiplication. PREPEND if not specified.

reset

()
Resets this instance to the identity.
final

rotate

(theta: number, order?: MatrixOrder)
Prepends or appends a rotation operation to this matrix around the origin.
final

Parameters

theta: number
The rotation angle in radians
order?: MatrixOrder
Whether to append or prepend the rotation matrix.

rotate

(
theta: number
center: Point
order?: MatrixOrder
)
Prepends or appends a rotation operation to this matrix around the specified rotation center.
final

Parameters

theta: number
The rotation angle in radians
center: Point
The center of the rotation.
order?: MatrixOrder
Whether to append or prepend the rotation matrix.

scale

(
x: number
y: number
order?: MatrixOrder
)
Appends or prepends a scale operation to this instance.
final

Parameters

x: number
The x-axis scaling factor.
y: number
The y-axis scaling factor.
order?: MatrixOrder
The order in which the scaling should be applied. The default is PREPEND.

set

(matrix: Matrix)
Sets the values of the given matrix to this instance.
final

Parameters

matrix: Matrix
The matrix to get the values from.

set

(
m0: number
m1: number
m2: number
m3: number
dx: number
dy: number
)
Sets all elements of this instance.
final

Parameters

m0: number
The value for M11.
m1: number
The value for M12.
m2: number
The value for M21.
m3: number
The value for M22.
dx: number
Translation in x-direction.
dy: number
Translation in y-direction.

toCssTransform

(): string
Converts the Matrix object to a CSS transform.
The returned string can be used in a transform property.
final

Return Value

string
The transform string

toSvgTransform

(): string
Converts the Matrix object to an SVG transform string.
The returned string can be used in a transform attribute.
final

Return Value

string
The transform string

transform

(point: Point): Point
Transforms the given coordinate.
final

Parameters

point: Point
The coordinate to transform.

Return Value

Point
The transformed coordinates.

transform

(point: IMutablePoint): IMutablePoint
Transforms the given point in place.
final

Parameters

point: IMutablePoint
The point to transform and return.

Return Value

IMutablePoint
point

translate

(delta: Point, order?: MatrixOrder)
Appends or Prepends a translation to this instance.
final

Parameters

delta: Point
The translation delta.
order?: MatrixOrder
The order in which the translation should be applied. The default is PREPEND.

Constants

IDENTITY

: Matrix
staticreadonly
Gets an unmodifiable identity matrix.
staticreadonly

See Also

Developer's Guide

ISOMETRIC

: Matrix
staticreadonly
Gets an unmodifiable projection matrix that makes the graph look isometric.
staticreadonly

See Also

Developer's Guide

Static Methods

createRotateInstance

(theta: number): Matrix
static
Creates a matrix rotation instance around the origin.
static

Parameters

theta: number
The rotation angle in radians.

Return Value

Matrix
A new matrix.

createTransform

(rectangle: IOrientedRectangle): Matrix
static
Creates a transformation matrix that can be used to transform points that are in the local coordinate system of the oriented rectangle if the top-left corner is the origin.
static

Parameters

rectangle: IOrientedRectangle
The oriented rectangle to use for defining the coordinate space.

Return Value

Matrix
A matrix that can be used to transform from oriented rectangle coordinates to world coordinates.

multiply

(matrix: Matrix, vector: Point): Point
static
Implements the vector transformation by calling transform.
static

Parameters

matrix: Matrix
The matrix to use for the transformation.
vector: Point
The vector to transform.

Return Value

Point
The result of the transformation.

Examples

Using the * and / operators
const v = new Point(2, 5)

// Make the vector three times as long
const longer = v.multiply(3)
console.log(longer) // (6, 15)

// Make the vector half as long
const shorter = v.multiply(0.5)
console.log(shorter) // (1, 2.5)

// Translate and scale the vector via a matrix
const matrix = new Matrix()
matrix.scale(2, 1.5)
matrix.translate(new Point(5, -3))

// ... or the transform method on Matrix
const p = new Point(7, 2)
const transformed = matrix.transform(p)
console.log(transformed) // (24, -1.5)