DOMMatrix

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.

Das DOMMatrix-Interface repräsentiert 4×4-Matrizen, die für 2D- und 3D-Operationen wie Rotation und Translation geeignet sind. Es ist eine veränderbare Version des DOMMatrixReadOnly-Interfaces. Das Interface steht auch in Web-Workern zur Verfügung.

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 veränderbar gemacht wurden.

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

Fließkommawerte mit doppelter Genauigkeit, die jede Komponente einer 4×4-Matrix darstellen, wobei m11 bis m14 die erste Spalte sind, m21 bis m24 die zweite Spalte und so weiter.

a, b, c, d, e, f

Fließkommawerte mit doppelter Genauigkeit, die die Komponenten einer 4×4-Matrix darstellen, die benötigt werden, um 2D-Rotationen und -Translationen durchzuführen. Diese sind Aliase für spezifische Komponenten einer 4×4-Matrix, wie unten dargestellt.

`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 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 multipliziert wird. Dies entspricht dem Skalarprodukt A⋅B, wobei Matrix A die Quellmatrix und B die Matrix ist, die als Eingabe an die Methode übergeben wird. Gibt sich selbst zurück.
DOMMatrix.preMultiplySelf(): Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix vorvervielfacht wird. Gibt sich selbst zurück.
DOMMatrix.translateSelf(): Modifiziert die Matrix, indem sie den angegebenen Vektor anwendet. Der Standardvektor ist [0, 0, 0]. Gibt sich selbst zurück.
DOMMatrix.scaleSelf(): Modifiziert die Matrix, indem sie die angegebenen Skalierungsfaktoren anwendet, mit dem Ursprung an der angegebenen Stelle. Gibt sich selbst zurück. Standardmäßig ist der Skalierungsfaktor für alle drei Achsen 1, und der Ursprung ist (0, 0, 0). Gibt sich selbst zurück.
DOMMatrix.scale3dSelf(): Modifiziert die Matrix, indem sie den angegebenen Skalierungsfaktor auf alle drei Achsen anwendet, zentriert auf dem gegebenen Ursprung. Gibt sich selbst zurück.
DOMMatrix.rotateSelf(): Modifiziert die Matrix, indem sie um jeden Achse durch 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 gegebenen Vektor rotiert. 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 durch die angegebene Transformation oder Transformationen beschriebene Matrix. Gibt sich selbst zurück.
DOMMatrix.skewXSelf(): Modifiziert die Matrix, indem sie die angegebene Schertransformation entlang der X-Achse anwendet. Gibt sich selbst zurück.
DOMMatrix.skewYSelf(): Modifiziert die Matrix, indem sie die angegebene Schertransformation entlang der Y-Achse anwendet. Gibt sich selbst zurück.

Statische Methoden

fromFloat32Array(): Erstellt ein neues DOMMatrix-Objekt, gegeben ein Float32Array von 6 oder 16 Einzelpräzisions- (32-Bit) Fließkommawerten.
fromFloat64Array(): Erstellt ein neues DOMMatrix-Objekt, gegeben ein Float64Array von 6 oder 16 Doppelpräzisions- (64-Bit) Fließkommawerten.
fromMatrix(): Erstellt ein neues DOMMatrix-Objekt, gegeben eine bestehende Matrix oder ein Objekt, das die Werte für seine Eigenschaften bereitstellt.

Verwendungshinweise

Die durch das DOMMatrix-Interface definierte Matrix besteht aus vier Reihen mit je vier Spalten. Auch wenn es über den Rahmen dieses Artikels hinausgeht, die zugrunde liegende Mathematik zu erläutern, ist diese 4×4-Größe ausreichend, um jede Transformation zu beschreiben, die Sie auf 2D- oder 3D-Geometrien anwenden könnten.

Hier sind die Positionen der 16 Elemente (m_11 bis m_44), die die 4×4-Abstract-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 so konzipiert, dass es für alle Matrizen innerhalb von Markup verwendet wird.

Spezifikationen

Specification
Geometry Interfaces Module Level 1 # DOMMatrix

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden