Table of Contents

Class DOMMatrixReadOnly

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

The DOMMatrixReadOnly interface represents a read-only 4×4 matrix, suitable for 2D and 3D operations. The DOMMatrix interface — which is based upon DOMMatrixReadOnly—adds mutability, allowing you to alter the matrix after creating it.

[Value("DOMMatrixReadOnly")]
public class DOMMatrixReadOnly
Inheritance
DOMMatrixReadOnly
Derived
Inherited Members

Remarks

This interface should be available inside web workers, though some implementations doesn't allow it yet.

-The mutable matrix type, DOMMatrix, which is based on this one.
-The CSS transform-function/matrix and transform-function/matrix3d functional notation that can be generated from this interface to be used in a CSS transform.

See also on MDN

Constructors

DOMMatrixReadOnly() 

public DOMMatrixReadOnly()

DOMMatrixReadOnly(Union49)

The DOMMatrixReadOnly constructor creates a new
DOMMatrixReadOnly object which represents 4x4 matrices, suitable for 2D
and 3D operations.

public DOMMatrixReadOnly(Union49 init = default)

Parameters

init Union49

Remarks

See also on MDN

Properties

A 

[Value("a")]
public double A { get; }

Property Value

double

B 

[Value("b")]
public double B { get; }

Property Value

double

C 

[Value("c")]
public double C { get; }

Property Value

double

D 

[Value("d")]
public double D { get; }

Property Value

double

E 

[Value("e")]
public double E { get; }

Property Value

double

F 

[Value("f")]
public double F { get; }

Property Value

double

Is2D

The readonly is2D property of the DOMMatrixReadOnly interface is a Boolean flag that is true when the matrix is 2D. The value is true if the matrix was initialized as a 2D matrix and only 2D transformation operations were applied. Otherwise, the matrix is defined in 3D, and is2D is false.

[Value("is2D")]
public bool Is2D { get; }

Property Value

bool

A Boolean value.

Remarks

-Is2D
-Is2D
-CSS transform-function functions
-CSS transform property
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface

See also on MDN

IsIdentity

The readonly isIdentity property of the DOMMatrixReadOnly interface is a Boolean whose value is true if the matrix is the identity matrix.

[Value("isIdentity")]
public bool IsIdentity { get; }

Property Value

bool

A Boolean value.

Remarks

The identity matrix is one in which every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal).

-DOMMatrix interface
-CSSMatrixComponent interface
-CanvasRenderingContext2D interface
-CSS transform-function/matrix() function
-CSS transform property
-CSS transforms module
-SVG transform attribute

See also on MDN

M11 

[Value("m11")]
public double M11 { get; }

Property Value

double

M12 

[Value("m12")]
public double M12 { get; }

Property Value

double

M13 

[Value("m13")]
public double M13 { get; }

Property Value

double

M14 

[Value("m14")]
public double M14 { get; }

Property Value

double

M21 

[Value("m21")]
public double M21 { get; }

Property Value

double

M22 

[Value("m22")]
public double M22 { get; }

Property Value

double

M23 

[Value("m23")]
public double M23 { get; }

Property Value

double

M24 

[Value("m24")]
public double M24 { get; }

Property Value

double

M31 

[Value("m31")]
public double M31 { get; }

Property Value

double

M32 

[Value("m32")]
public double M32 { get; }

Property Value

double

M33 

[Value("m33")]
public double M33 { get; }

Property Value

double

M34 

[Value("m34")]
public double M34 { get; }

Property Value

double

M41 

[Value("m41")]
public double M41 { get; }

Property Value

double

M42 

[Value("m42")]
public double M42 { get; }

Property Value

double

M43 

[Value("m43")]
public double M43 { get; }

Property Value

double

M44 

[Value("m44")]
public double M44 { get; }

Property Value

double

Methods

FlipX()

The flipX() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix flipped about the x-axis. This is equivalent to multiplying the matrix by DOMMatrix(-1, 0, 0, 1, 0, 0). The original matrix is not modified.

[Value("flipX")]
public DOMMatrix FlipX()

Returns

DOMMatrix

Returns a DOMMatrix.

Remarks

-FlipY()

See also on MDN

FlipY()

The flipY() method of the DOMMatrixReadOnly interface creates a new matrix being the result of the original matrix flipped about the y-axis. This is equivalent to multiplying the matrix by DOMMatrix(1, 0, 0, -1, 0, 0). The original matrix is not modified.

[Value("flipY")]
public DOMMatrix FlipY()

Returns

DOMMatrix

A DOMMatrix.

Remarks

-FlipX()

See also on MDN

FromFloat32Array(Float32Array) 

[Value("fromFloat32Array")]
public static DOMMatrixReadOnly FromFloat32Array(Float32Array array32)

Parameters

array32 Float32Array

Returns

DOMMatrixReadOnly

FromFloat64Array(Float64Array) 

[Value("fromFloat64Array")]
public static DOMMatrixReadOnly FromFloat64Array(Float64Array array64)

Parameters

array64 Float64Array

Returns

DOMMatrixReadOnly

FromMatrix(DOMMatrixInit) 

[Value("fromMatrix")]
public static DOMMatrixReadOnly FromMatrix(DOMMatrixInit other = null)

Parameters

other DOMMatrixInit

Returns

DOMMatrixReadOnly

Inverse()

The inverse() method of the DOMMatrixReadOnly interface creates a new matrix which is the inverse of the original matrix. If the matrix cannot be inverted, the new matrix's components are all set to NaN and its Is2D property is set to false. The original matrix is not changed.

[Value("inverse")]
public DOMMatrix Inverse()

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you invert it, see InvertSelf().

-InvertSelf()
-FlipX()
-FlipY()
-CSS transform-function/matrix function
-CSS transform-function/matrix3d function

See also on MDN

Multiply(DOMMatrixInit)

The multiply() method of the DOMMatrixReadOnly interface creates and returns a new matrix which is the dot product of the matrix and the otherMatrix parameter. If otherMatrix is omitted, the matrix is multiplied by a matrix in which every element is 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. These have the default value of 1. The original matrix is not modified.

[Value("multiply")]
public DOMMatrix Multiply(DOMMatrixInit other = null)

Parameters

other DOMMatrixInit

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you multiply it, see MultiplySelf(DOMMatrixInit).

-MultiplySelf(DOMMatrixInit)
-PreMultiplySelf(DOMMatrixInit)
-CSS transform-function/matrix function
-CSS transform-function/matrix3d function

See also on MDN

Rotate(double, double, double)

The rotate() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by rotating the source matrix around each of its axes by the specified number of degrees. The original matrix is not altered.

[Value("rotate")]
public DOMMatrix Rotate(double rotX = 0, double rotY = 0, double rotZ = 0)

Parameters

rotX double
rotY double
rotZ double

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you rotate it, see RotateSelf(double, double, double).

-RotateSelf(double, double, double)
-RotateAxisAngle(double, double, double, double)
-RotateFromVector(double, double)
-CSS transform property and transform-function/rotate3d function
-CSS rotate property
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface and CanvasRenderingContext2D.Rotate method

See also on MDN

RotateAxisAngle(double, double, double, double)

The rotateAxisAngle() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by rotating the source matrix by the given vector and angle. The original matrix is not altered.

[Value("rotateAxisAngle")]
public DOMMatrix RotateAxisAngle(double x = 0, double y = 0, double z = 0, double angle = 0)

Parameters

x double
y double
z double
angle double

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you rotate it, see RotateAxisAngleSelf(double, double, double, double).

-RotateAxisAngleSelf(double, double, double, double)
-Rotate(double, double, double)
-RotateFromVector(double, double)
-CSS transform property and transform-function/rotate3d function
-CSS rotate property
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface and CanvasRenderingContext2D.Rotate method

See also on MDN

RotateFromVector(double, double)

The rotateFromVector() method of the DOMMatrixReadOnly interface is returns a new DOMMatrix created by rotating the source matrix by the angle between the specified vector and (1, 0). The rotation angle is determined by the angle between the vector (1,0)T and (x,y)T in the clockwise direction, or (+/-)arctan(y/x). If x and y are both 0, the angle is specified as 0. The original matrix is not altered.

[Value("rotateFromVector")]
public DOMMatrix RotateFromVector(double x = 0, double y = 0)

Parameters

x double
y double

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you rotate it by the angle between the specified vector and (1, 0), see RotateFromVectorSelf(double, double).

-RotateFromVectorSelf(double, double)
-Rotate(double, double, double)
-RotateAxisAngle(double, double, double, double)
-CSS transform property and transform-function/rotate3d function
-CSS rotate property
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface and CanvasRenderingContext2D.Rotate method

See also on MDN

Scale(double, double, double, double, double, double)

The scale() method of the
DOMMatrixReadOnly interface creates a new matrix being the result of the
original matrix with a scale transform applied.

[Value("scale")]
public DOMMatrix Scale(double scaleX = 0, double scaleY = 0, double scaleZ = 0, double originX = 0, double originY = 0, double originZ = 0)

Parameters

scaleX double
scaleY double
scaleZ double
originX double
originY double
originZ double

Returns

DOMMatrix

Returns a DOMMatrix
containing a new matrix being the result of the matrix x and y dimensions being scaled
by the given factor, centered on the origin given. The original matrix is not modified.If a scale is applied about the z-axis, the resulting matrix will be a 4✕4 3D matrix.

Remarks

See also on MDN

Scale3d(double, double, double, double)

The scale3d() method of the DOMMatrixReadOnly interface creates a new matrix which is the result of a 3D scale transform being applied
to the matrix. It returns a new DOMMatrix created by scaling the source 3d matrix by the given scale factor centered on the origin point specified by the origin parameters, with a default origin of (0, 0, 0). The original matrix is not modified.

[Value("scale3d")]
public DOMMatrix Scale3d(double scale = 0, double originX = 0, double originY = 0, double originZ = 0)

Parameters

scale double
originX double
originY double
originZ double

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you 3D-scale it, see Scale3dSelf(double, double, double, double)

-Scale3dSelf(double, double, double, double)
-Scale(double, double, double, double, double, double)
-CSS transform property and transform-function/scale3d and transform-function/matrix3d functions
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface's CanvasRenderingContext2D.Transform method

See also on MDN

ScaleNonUniform(double, double) 

[Value("scaleNonUniform")]
public DOMMatrix ScaleNonUniform(double scaleX = 0, double scaleY = 0)

Parameters

scaleX double
scaleY double

Returns

DOMMatrix

SkewX(double)

The skewX() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by applying the specified skew transformation to the source matrix along its x-axis. The original matrix is not modified.

[Value("skewX")]
public DOMMatrix SkewX(double sx = 0)

Parameters

sx double

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you skew it along the x-axis, see SkewXSelf(double).

-SkewY(double)
-SkewXSelf(double)
-CSS transform property and the transform-function/skew, transform-function/skewX, and transform-function/matrix functions
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface's CanvasRenderingContext2D.Transform method

See also on MDN

SkewY(double)

The skewY() method of the DOMMatrixReadOnly interface returns a new DOMMatrix created by applying the specified skew transformation to the source matrix along its y-axis. The original matrix is not modified.

[Value("skewY")]
public DOMMatrix SkewY(double sy = 0)

Parameters

sy double

Returns

DOMMatrix

A DOMMatrix.

Remarks

To mutate the matrix as you skew it along the y-axis, see SkewYSelf(double).

-SkewYSelf(double)
-SkewX(double)
-CSS transform property and the transform-function/skew, transform-function/skewY, and transform-function/matrix functions
-CSS transforms module
-SVG transform attribute
-CanvasRenderingContext2D interface's CanvasRenderingContext2D.Transform method

See also on MDN

ToFloat32Array()

The toFloat32Array() method of the DOMMatrixReadOnly interface returns a new {{jsxref("Float32Array")}} containing all 16 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)

[Value("toFloat32Array")]
public Float32Array ToFloat32Array()

Returns

Float32Array

A Float32Array; an array of the matrix's 16 element values.

Remarks

For double-precision floating-point numbers, see ToFloat64Array().

-ToFloat64Array()
-SetMatrixValue(string)

See also on MDN

ToFloat64Array()

The toFloat64Array() method of the DOMMatrixReadOnly interface returns a new {{jsxref("Float64Array")}} containing all 16 elements (m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)

[Value("toFloat64Array")]
public Float64Array ToFloat64Array()

Returns

Float64Array

A Float64Array; an array of the matrix's 16 element values.

Remarks

-ToFloat32Array()
-SetMatrixValue(string)

See also on MDN

ToJSON()

The toJSON() method of the DOMMatrixReadOnly interface creates and returns a {{jsxref("JSON")}} object. The JSON object includes the 2D matrix elements a through f, the 16 elements of the 4X4 3D matrix, m[1-4][1-4], the boolean Is2D property, and the boolean IsIdentity property.

[Value("toJSON")]
public Object ToJSON()

Returns

Object

A JSON object; a JSON representation of the DOMMatrixReadOnly object.

Remarks

-DOMMatrixReadOnly.ToString
-SetMatrixValue(string)

See also on MDN

TransformPoint(DOMPointInit)

The transformPoint method of the
DOMMatrixReadOnly interface creates a new DOMPoint object, transforming a specified point by the matrix. Neither the matrix nor the original point are altered.

[Value("transformPoint")]
public DOMPoint TransformPoint(DOMPointInit point = null)

Parameters

point DOMPointInit

Returns

DOMPoint

A DOMPoint.

Remarks

You can also create a new DOMPoint by applying a matrix to a point with the MatrixTransform(DOMMatrixInit) method.

-MatrixTransform(DOMMatrixInit)
-CSS transform-function/matrix and transform-function/matrix3d functions

See also on MDN

Translate(double, double, double)

The translate() method of the DOMMatrixReadOnly interface
creates a new matrix being the result of the original matrix with a translation applied.

[Value("translate")]
public DOMMatrix Translate(double tx = 0, double ty = 0, double tz = 0)

Parameters

tx double
ty double
tz double

Returns

DOMMatrix

Returns a DOMMatrix
containing a new matrix being the result of the matrix being translated by the given
vector. The original matrix is not modified.If a translation is applied about the z-axis, the resulting matrix will be a 4x4 3D
matrix.

Remarks

See also on MDN

Edit this page