DOMMatrix: DOMMatrix()-Konstruktor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Der DOMMatrix()-Konstruktor erstellt ein neues DOMMatrix-Objekt, das eine 4x4-Matrix darstellt und für 2D- und 3D-Operationen geeignet ist.
Syntax
new DOMMatrix()
new DOMMatrix(initString)
new DOMMatrix(initArray)
Parameter
initStringOptional-
Ein String, der eine 2D- oder 3D-Matrix im CSS-Format
matrix()odermatrix3d()darstellt. initArrayOptional-
Ein Array, das entweder 6 oder 16 Zahlen im spalten-major Orden enthält. Andere Array-Längen werfen einen
TypeError.- Ein Array mit 6 Elementen wird als die Matrixkomponenten
[m11, m12, m21, m22, m41, m42]interpretiert und erstellt eine 2D-Matrix. - Ein Array mit 16 Elementen wird als die Matrixkomponenten
[m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44]interpretiert und erstellt eine 3D-Matrix.
Wenn dieses Argument weggelassen wird, wird eine Einheitsmatrix erstellt, d.h. äquivalent zu
[1, 0, 0, 1, 0, 0].Wenn dieses Argument als
Float32ArrayoderFloat64Arrayangegeben wird, sollten Sie die leistungsfähigeren statischen MethodenDOMMatrix.fromFloat32Array()oderDOMMatrix.fromFloat64Array()stattdessen in Betracht ziehen. - Ein Array mit 6 Elementen wird als die Matrixkomponenten
Rückgabewert
Ein neues DOMMatrix-Objekt.
Ausnahmen
TypeError-
Wird geworfen, wenn das Argument kein String oder ein Array mit einer anderen Länge als 6 oder 16 ist.
SyntaxError-
Wird geworfen, wenn das String-Argument nicht im gültigen CSS-Format
matrix()odermatrix3d()ist.
Beispiele
Dieses Beispiel erstellt eine DOMMatrix, um sie als Argument für den Aufruf von DOMPointReadOnly.matrixTransform() zu verwenden.
const point = new DOMPoint(5, 4);
const scaleX = 2;
const scaleY = 3;
const translateX = 12;
const translateY = 8;
const angle = Math.PI / 2;
const matrix = new DOMMatrix([
Math.cos(angle) * scaleX,
Math.sin(angle) * scaleX,
-Math.sin(angle) * scaleY,
Math.cos(angle) * scaleY,
translateX,
translateY,
]);
const transformedPoint = point.matrixTransform(matrix);
Spezifikationen
| Specification |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-dommatrix |