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.

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

Die DOMMatrix-Schnittstelle repräsentiert 4×4 Matrizen, die für 2D- und 3D-Operationen wie Rotation und Translation geeignet sind. Es handelt sich um eine veränderbare Version der DOMMatrixReadOnly-Schnittstelle. Die Schnittstelle 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

Diese Schnittstelle erbt Eigenschaften von DOMMatrixReadOnly, obwohl einige dieser Eigenschaften als veränderlich geändert werden.

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

Gleitkommawerte mit doppelter Genauigkeit, die jede Komponente einer 4×4-Matrix repräsentieren, wobei m11 bis m14 die erste Spalte sind, m21 bis m24 die zweite Spalte und so weiter.

a, b, c, d, e, f

Gleitkommawerte mit doppelter Genauigkeit, die die Komponenten einer 4×4-Matrix darstellen, die für die Durchführung von 2D-Rotationen und -Translationen benötigt werden. Diese sind Aliase für bestimmte 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

Diese Schnittstelle beinhaltet die folgenden Methoden sowie die Methoden, die von DOMMatrixReadOnly geerbt werden.

DOMMatrix.invertSelf(): Modifiziert die Matrix, indem sie invertiert wird. Wenn die Matrix nicht invertiert werden kann, werden alle ihre Komponenten auf NaN gesetzt, und is2D gibt false zurück.
DOMMatrix.multiplySelf(): Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix nachmultipliziert wird. Dies entspricht dem Punktprodukt A⋅B, wobei Matrix A die Quellmatrix ist und B die Matrix ist, die als Eingabe für die Methode angegeben wird. Gibt sich selbst zurück.
DOMMatrix.preMultiplySelf(): Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix vormultipliziert 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 das Zentrum am angegebenen Ursprung liegt. Gibt sich ebenfalls selbst zurück. Standardmäßig beträgt 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 auf den gegebenen Ursprung. Gibt sich selbst zurück.
DOMMatrix.rotateSelf(): Modifiziert die Matrix, indem sie um jede Achse um die angegebene Anzahl von Grad rotiert wird. Gibt sich selbst zurück.
DOMMatrix.rotateAxisAngleSelf(): Modifiziert die Matrix, indem sie um den angegebenen Winkel um den gegebenen Vektor rotiert wird. Gibt sich selbst zurück.
DOMMatrix.rotateFromVectorSelf(): Modifiziert die Matrix, indem sie um den Winkel zwischen dem angegebenen Vektor und (1, 0) rotiert wird. Gibt sich selbst zurück.
DOMMatrix.setMatrixValue(): Ersetzt den Inhalt der Matrix durch die Matrix, die durch die angegebene Transformation oder Transformationen beschrieben wird. Gibt sich selbst zurück.
DOMMatrix.skewXSelf(): Modifiziert die Matrix durch Anwendung der angegebenen Schertransformation entlang der X-Achse. Gibt sich selbst zurück.
DOMMatrix.skewYSelf(): Modifiziert die Matrix durch Anwendung der angegebenen Schertransformation entlang der Y-Achse. Gibt sich selbst zurück.

Statische Methoden

Diese Schnittstelle erbt Methoden von DOMMatrixReadOnly.

fromFloat32Array(): Erstellt ein neues veränderbares DOMMatrix-Objekt, das ein Array von Gleitkommazahlen mit einfacher Genauigkeit (32-Bit) erhält. Wenn das Array sechs Werte hat, ist das Ergebnis eine 2D-Matrix; wenn das Array 16 Werte hat, ist das Ergebnis eine 3D-Matrix. Andernfalls wird eine TypeError-Ausnahme ausgelöst.
fromFloat64Array(): Erstellt ein neues veränderbares DOMMatrix-Objekt, das ein Array von Gleitkommazahlen mit doppelter Genauigkeit (64-Bit) erhält. Wenn das Array sechs Werte hat, ist das Ergebnis eine 2D-Matrix; wenn das Array 16 Werte hat, ist das Ergebnis eine 3D-Matrix. Andernfalls wird eine TypeError-Ausnahme ausgelöst.
fromMatrix(): Erstellt ein neues veränderbares DOMMatrix-Objekt, das eine vorhandene Matrix oder ein Objekt erhält, das die Werte für seine Eigenschaften bereitstellt.

Nutzungshinweise

Die Matrix, die durch die DOMMatrix-Schnittstelle definiert wird, besteht aus vier Zeilen zu je vier Spalten. Es liegt außerhalb des Umfangs dieses Artikels, die zugrunde liegende Mathematik zu erklären, aber diese 4×4-Größe reicht aus, 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 ausmachen:

\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 ]

Die DOMMatrix-Schnittstelle ist darauf ausgelegt, dass sie für alle Matrizen innerhalb des Markups verwendet wird.

Spezifikationen

Specification
Geometry Interfaces Module Level 1 # DOMMatrix