DOMMatrix

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die Schnittstelle DOMMatrix stellt 4×4-Matrizen dar, die sich für 2D- und 3D-Operationen einschließlich Rotation und Translation eignen. Sie ist eine veränderbare Version der Schnittstelle DOMMatrixReadOnly. Die Schnittstelle ist in Web-Workern verfügbar.

WebKitCSSMatrix und SVGMatrix sind Aliase für DOMMatrix.

Konstruktor

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

Instanzeigenschaften

Diese Schnittstelle erbt Eigenschaften von DOMMatrixReadOnly, wobei einige dieser Eigenschaften veränderbar sind.

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

Gleitkommawerte mit doppelter Genauigkeit, die jeweils eine Komponente einer 4×4-Matrix darstellen. Dabei bilden m11 bis m14 die erste Spalte, m21 bis m24 die zweite Spalte und so weiter.

a, b, c, d, e, f

Gleitkommawerte mit doppelter Genauigkeit, die die für 2D-Rotationen und -Translationen erforderlichen Komponenten einer 4×4-Matrix darstellen. Sie sind Aliase für bestimmte Komponenten einer 4×4-Matrix, wie unten dargestellt.

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

Statische Methoden

fromFloat32Array(): Erstellt ein neues DOMMatrix-Objekt aus einem Float32Array mit 6 oder 16 Gleitkommawerten einfacher Genauigkeit (32 Bit).
fromFloat64Array(): Erstellt ein neues DOMMatrix-Objekt aus einem Float64Array mit 6 oder 16 Gleitkommawerten doppelter Genauigkeit (64 Bit).
fromMatrix(): Erstellt ein neues DOMMatrix-Objekt aus einer vorhandenen Matrix oder einem Objekt, das die Werte für ihre Eigenschaften bereitstellt.

Instanzmethoden

Diese Schnittstelle umfasst die folgenden Methoden sowie die von DOMMatrixReadOnly geerbten Methoden.

DOMMatrix.invertSelf(): Verändert die Matrix, indem sie invertiert wird. Wenn sich die Matrix nicht invertieren lässt, werden alle ihre Komponenten auf NaN gesetzt und is2D gibt false zurück.
DOMMatrix.multiplySelf(): Verändert die Matrix, indem sie von rechts mit der angegebenen DOMMatrix multipliziert wird. Dies entspricht dem Matrixprodukt A⋅B, wobei Matrix A die Ausgangsmatrix und B die als Eingabe an die Methode übergebene Matrix ist. Gibt sich selbst zurück.
DOMMatrix.preMultiplySelf(): Verändert die Matrix, indem sie von links mit der angegebenen DOMMatrix multipliziert wird. Gibt sich selbst zurück.
DOMMatrix.translateSelf(): Verändert die Matrix, indem der angegebene Vektor angewendet wird. Der Standardvektor ist [0, 0, 0]. Gibt sich selbst zurück.
DOMMatrix.scaleSelf(): Verändert die Matrix durch Anwendung der angegebenen Skalierungsfaktoren, wobei das Zentrum am angegebenen Ursprung liegt. Standardmäßig beträgt der Skalierungsfaktor für alle drei Achsen 1 und der Ursprung ist (0, 0, 0). Gibt sich selbst zurück.
DOMMatrix.scale3dSelf(): Verändert die Matrix durch Anwendung des angegebenen Skalierungsfaktors auf alle drei Achsen, zentriert um den angegebenen Ursprung. Gibt sich selbst zurück.
DOMMatrix.rotateSelf(): Verändert die Matrix, indem sie um jede Achse um die angegebene Gradzahl gedreht wird. Gibt sich selbst zurück.
DOMMatrix.rotateAxisAngleSelf(): Verändert die Matrix, indem sie um den angegebenen Winkel um den angegebenen Vektor gedreht wird. Gibt sich selbst zurück.
DOMMatrix.rotateFromVectorSelf(): Verändert 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 die angegebenen Transformationen beschrieben wird. Gibt sich selbst zurück.
DOMMatrix.skewXSelf(): Verändert die Matrix durch Anwendung der angegebenen Schertransformation entlang der X-Achse. Gibt sich selbst zurück.
DOMMatrix.skewYSelf(): Verändert die Matrix durch Anwendung der angegebenen Schertransformation entlang der Y-Achse. Gibt sich selbst zurück.

Hinweise zur Verwendung

Die durch die Schnittstelle DOMMatrix definierte Matrix besteht aus vier Zeilen mit jeweils vier Spalten. Die zugrunde liegende Mathematik zu erläutern, würde den Rahmen dieses Artikels sprengen. Eine 4×4-Matrix reicht jedoch aus, um jede Transformation zu beschreiben, die auf 2D- oder 3D-Geometrien angewendet werden kann.

Hier sind die Positionen der 16 Elemente (m_11 bis m_44) dargestellt, aus denen die abstrakte 4×4-Matrix besteht:

\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 Schnittstelle DOMMatrix ist für die Verwendung mit sämtlichen Matrizen innerhalb von Markup konzipiert.

Spezifikationen

Spezifikation
Geometry Interfaces Module Level 1 # DOMMatrix

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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