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.

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. Dieses Interface ist innerhalb von Web Workern verfügbar.

WebKitCSSMatrix und SVGMatrix sind Aliase für DOMMatrix.

DOMMatrixReadOnly DOMMatrix

Konstruktor

DOMMatrix()

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

Instanz-Eigenschaften

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

is2D Schreibgeschützt

Eine boolesche Markierung, deren Wert true ist, wenn die Matrix als 2D-Matrix initialisiert wurde. Wenn false, ist die Matrix 3D.

isIdentity Schreibgeschützt

Ein Boolean, dessen Wert 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 Versätze in jeder Richtung gleich sind).

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 darstellen, wobei m11 bis m14 die erste Spalte, m21 bis m24 die zweite Spalte usw. sind.

a, b, c, d, e, f

Gleitkommawerte mit doppelter Genauigkeit, die die Komponenten einer 4×4-Matrix darstellen, die erforderlich sind, um 2D-Rotationen und -Translationsdurchzuführen. Diese sind Aliase für spezifische Komponenten einer 4×4-Matrix, wie unten gezeigt.

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

Instanz-Methoden

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

DOMMatrix.invertSelf()

Modifiziert die Matrix, indem sie invertiert wird. Falls die Matrix nicht invertiert werden kann, werden all 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 Matrix A die Quellmatrix und B die Matrix ist, die als Eingabe für die Methode gegeben wird. Gibt sich selbst zurück.

DOMMatrix.preMultiplySelf()

Modifiziert die Matrix, indem sie mit der angegebenen DOMMatrix vorvermindert wird. Dies entspricht dem Skalarprodukt B⋅A, wobei Matrix A die Quellmatrix und B die Matrix ist, die als Eingabe für die Methode gegeben 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, mit dem Zentrum an einem angegebenen Ursprung. Gibt auch sich selbst zurück. 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()

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 sich selbst um jede Achse um die angegebene Anzahl Grad dreht. 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 mit der durch die angegebene Transformation oder die angegebenen Transformationen beschriebenen Matrix. Gibt sich selbst zurück.

DOMMatrix.skewXSelf()

Modifiziert die Matrix, indem die angegebene Verzerrungstransformation entlang der X-Achse angewendet wird. Gibt sich selbst zurück.

DOMMatrix.skewYSelf()

Modifiziert die Matrix, indem die angegebene Verzerrungstransformation 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, gegeben ein Array von Einzelpräzisions- (32-bit) Gleitkommawerten. 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, gegeben ein Array von Doppelpräzisions- (64-bit) Gleitkommawerten. 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, gegeben eine bestehende Matrix oder ein Objekt, das die Werte für seine Eigenschaften bereitstellt.

Gebrauchshinweise

Die durch das DOMMatrix-Interface definierte Matrix besteht aus vier Zeilen mit jeweils vier Spalten. Während es über den Rahmen dieses Artikels hinausgeht, die Mathematik dahinter zu erklären, reicht diese 4×4-Größe aus, um jede Transformation zu beschreiben, die Sie auf 2D- oder 3D-Geometrien anwenden möchten.

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

[m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\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 gestaltet, dass es für alle Matrizen innerhalb von Markups verwendet wird.

Spezifikationen

Specification
Geometry Interfaces Module Level 1
# DOMMatrix

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch