DOMMatrix (WebKitCSSMatrix)

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

Die DOMMatrix-Schnittstelle repräsentiert 4×4-Matrizen, die sich für 2D- und 3D-Operationen wie Rotation und Translation eignen. Sie ist eine veränderbare Version der DOMMatrixReadOnly-Schnittstelle.

WebKitCSSMatrix und SVGMatrix sind Aliase für DOMMatrix.

Diese Schnittstelle sollte innerhalb von Web-Workern verfügbar sein, obwohl einige Implementierungen dies bisher noch nicht erlauben.

Konstruktor

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

Instanz-Eigenschaften

Diese Schnittstelle erbt Eigenschaften von DOMMatrixReadOnly, obwohl einige dieser Eigenschaften so verändert werden, dass sie veränderbar sind.

is2D Schreibgeschützt

Ein boolesches Flag, dessen Wert true ist, wenn die Matrix als 2D-Matrix initialisiert wurde. Wenn false, ist die Matrix 3D.

isIdentity Schreibgeschützt

Ein boolescher Wert, der true ist, wenn die Matrix die Einheitsmatrix ist. Die Einheitsmatrix ist eine, in der jeder Wert 0 ist, außer denen auf der Hauptdiagonale von der oberen linken zur unteren rechten Ecke (mit anderen Worten, wo die Offsets in jeder Richtung gleich sind).

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

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

a, b, c, d, e, f

Doppelgenaue Gleitkommawerte, die die Komponenten einer 4×4-Matrix darstellen, die für die Durchführung von 2D-Rotationen und -Translationen erforderlich sind. 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

Diese Schnittstelle umfasst die folgenden Methoden sowie die Methoden, die sie 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 nachmultipliziert wird. Dies entspricht dem Skalarprodukt A⋅B, wobei die Matrix A die Quelldatenmatrix ist und B die Matrix ist, die als Eingabe für die Methode angegeben ist. Gibt sich selbst zurück.
DOMMatrix.preMultiplySelf(): Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix vorgemultipliziert wird. Dies entspricht dem Skalarprodukt B⋅A, wobei die Matrix A die Quelldatenmatrix ist und B die Matrix ist, die als Eingabe für die Methode angegeben ist. 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, mit dem Mittelpunkt an der angegebenen Ursprungsstelle. Gibt sich auch 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 dem angegebenen Ursprung. Gibt sich selbst zurück.
DOMMatrix.rotateSelf(): Modifiziert die Matrix, indem sie um jede Achse um die angegebene Anzahl von Graden rotiert wird. Gibt sich selbst zurück.
DOMMatrix.rotateAxisAngleSelf(): Modifiziert die Matrix, indem sie um den angegebenen Winkel um den angegebenen 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 angegebenen Transformation oder Transformationen beschrieben wird. Gibt sich selbst zurück.
DOMMatrix.skewXSelf(): Modifiziert die Matrix, indem die angegebene Scherungstransformation entlang der X-Achse angewendet wird. Gibt sich selbst zurück.
DOMMatrix.skewYSelf(): Modifiziert die Matrix, indem die angegebene Scherungstransformation entlang der Y-Achse angewendet wird. 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 einzelpräzisen (32-Bit) Gleitkommawerten 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 doppelpräzisen (64-Bit) Gleitkommawerten 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 bestehende Matrix oder ein Objekt erhält, das die Werte für seine Eigenschaften bereitstellt.

Verwendungshinweise

Die durch die DOMMatrix-Schnittstelle definierte Matrix besteht aus vier Zeilen mit jeweils vier Spalten. Während es über den Rahmen dieses Artikels hinausgeht, die zugrunde liegende Mathematik zu erklären, reicht diese 4×4-Größe 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 abstrakte 4×4-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 ]

Die DOMMatrix-Schnittstelle ist mit der Absicht gestaltet, dass sie für alle Matrizen innerhalb von Markup verwendet wird.

Spezifikationen

Specification
Geometry Interfaces Module Level 1 # DOMMatrix

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Das nicht veränderbare Gegenstück, DOMMatrixReadOnly