DOMMatrix

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das DOMMatrix-Interface repräsentiert 4×4-Matrizen, geeignet für 2D- und 3D-Operationen einschließlich Rotation und Translation. Es ist eine veränderbare Version des DOMMatrixReadOnly-Interfaces. Das Interface ist innerhalb von Web Workern verfügbar.

WebKitCSSMatrix und SVGMatrix sind Aliase für DOMMatrix.

Konstruktor

DOMMatrix(): Erstellt und gibt ein neues DOMMatrix-Objekt zurück.

Instanz-Eigenschaften

Dieses Interface erbt Eigenschaften von DOMMatrixReadOnly, obwohl einige dieser Eigenschaften zu veränderbaren geändert werden.

m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44

Gleitkommawerte doppelter Präzision, die jede Komponente einer 4×4-Matrix darstellen, wobei m11 bis m14 die erste Spalte, m21 bis m24 die zweite Spalte darstellen, und so weiter.

a, b, c, d, e, f

Gleitkommawerte doppelter Präzision, die die Komponenten einer 4×4-Matrix darstellen, die erforderlich sind, um 2D-Rotationen und Translationen durchzuführen. Diese sind Aliase für spezifische Komponenten einer 4×4-Matrix, wie unten gezeigt.

`2D`	`3D-Äquivalent`
`a`	`m11`
`b`	`m12`
`c`	`m21`
`d`	`m22`
`e`	`m41`
`f`	`m42`

Instanz-Methoden

Dieses Interface umfasst die folgenden Methoden sowie die Methoden, die es von DOMMatrixReadOnly erbt.

DOMMatrix.invertSelf(): Modifiziert die Matrix, indem sie invertiert wird. Wenn die Matrix nicht invertierbar ist, werden alle ihre Komponenten auf NaN gesetzt, und is2D gibt false zurück.
DOMMatrix.multiplySelf(): Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix multipliziert wird. Dies entspricht dem Skalarprodukt A⋅B, wobei Matrix A die Quellmatrix ist und B die als Eingabe an die Methode gegebene Matrix ist. Gibt sich selbst zurück.
DOMMatrix.preMultiplySelf(): Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix vor-multipliziert wird. Gibt sich selbst zurück.
DOMMatrix.translateSelf(): Modifiziert die Matrix, indem der angegebene Vektor angewendet wird. Der Standardvektor ist [0, 0, 0]. Gibt sich selbst zurück.
DOMMatrix.scaleSelf(): Modifiziert die Matrix, indem die angegebenen Skalierungsfaktoren angewendet werden, wobei sich das Zentrum am angegebenen Ursprung befindet. Gibt sich auch selbst zurück. Standardmäßig ist der Skalierungsfaktor 1 für alle drei Achsen, und der Ursprung ist (0, 0, 0). Gibt sich selbst zurück.
DOMMatrix.scale3dSelf(): Modifiziert die Matrix, indem der angegebene Skalierungsfaktor auf alle drei Achsen angewendet wird, zentriert am gegebenen Ursprung. Gibt sich selbst zurück.
DOMMatrix.rotateSelf(): Modifiziert die Matrix, indem sie um jede Achse um die angegebene Anzahl von Grad gedreht wird. Gibt sich selbst zurück.
DOMMatrix.rotateAxisAngleSelf(): Modifiziert die Matrix, indem sie um den angegebenen Winkel um den angegebenen Vektor gedreht wird. Gibt sich selbst zurück.
DOMMatrix.rotateFromVectorSelf(): Modifiziert die Matrix, indem sie um den Winkel zwischen dem angegebenen Vektor und (1, 0) gedreht wird. Gibt sich selbst zurück.
DOMMatrix.setMatrixValue(): Ersetzt den Inhalt der Matrix durch die Matrix, die durch die angegebene Transformation oder Transformationsbeschreibungen beschrieben wird. Gibt sich selbst zurück.
DOMMatrix.skewXSelf(): Modifiziert die Matrix, indem die angegebene Schrägtransformation entlang der X-Achse angewendet wird. Gibt sich selbst zurück.
DOMMatrix.skewYSelf(): Modifiziert die Matrix, indem die angegebene Schrägtransformation entlang der Y-Achse angewendet wird. Gibt sich selbst zurück.

Statische Methoden

Dieses Interface erbt Methoden von DOMMatrixReadOnly.

fromFloat32Array(): Erstellt ein neues veränderbares DOMMatrix-Objekt basierend auf einem Array von Gleitkommawerten mit einfacher Präzision (32 Bit). Hat das Array sechs Werte, ist das Ergebnis eine 2D-Matrix; hat es 16 Werte, ist das Ergebnis eine 3D-Matrix. Andernfalls wird eine TypeError-Ausnahme ausgelöst.
fromFloat64Array(): Erstellt ein neues veränderbares DOMMatrix-Objekt basierend auf einem Array von Gleitkommawerten mit doppelter Präzision (64 Bit). Hat das Array sechs Werte, ist das Ergebnis eine 2D-Matrix; hat es 16 Werte, ist das Ergebnis eine 3D-Matrix. Andernfalls wird eine TypeError-Ausnahme ausgelöst.
fromMatrix(): Erstellt ein neues veränderbares DOMMatrix-Objekt basierend auf einer vorhandenen Matrix oder einem Objekt, das die Werte für seine Eigenschaften bereitstellt.

Nutzungshinweise

Die durch das DOMMatrix-Interface definierte Matrix besteht aus vier Zeilen mit jeweils vier Spalten. Obwohl es den Rahmen dieses Artikels sprengen würde, die zugrunde liegende Mathematik zu erklären, ist diese 4×4-Größe ausreichend, um jede Transformation zu beschreiben, die Sie entweder auf 2D- oder 3D-Geometrien anwenden könnten.

Hier sind die Positionen der 16 Elemente (m_11 bis m_44), die die 4×4-abstrakte Matrix bilden:

\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ]

Das DOMMatrix-Interface ist mit der Absicht entworfen, dass es für alle Matrizen innerhalb von Markup verwendet wird.

Spezifikationen

Specification
Geometry Interfaces Module Level 1 # DOMMatrix