DOMMatrixReadOnly
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 DOMMatrixReadOnly
-Schnittstelle repräsentiert eine schreibgeschützte 4×4-Matrix, die sich für 2D- und 3D-Operationen eignet. Die DOMMatrix
-Schnittstelle — die auf DOMMatrixReadOnly
basiert — fügt Veränderlichkeit hinzu, wodurch Sie die Matrix nach ihrer Erstellung ändern können.
Diese Schnittstelle sollte innerhalb von Web-Arbeitern verfügbar sein, wobei einige Implementierungen dies noch nicht erlauben.
Konstruktor
DOMMatrixReadOnly()
-
Erstellt ein neues
DOMMatrixReadOnly
-Objekt.
Instanz-Eigenschaften
Diese Schnittstelle erbt keine Eigenschaften.
is2D
Schreibgeschützt-
Ein Boolescher Wert, der
true
ist, wenn die Matrix als 2D-Matrix initialisiert wurde. Wennfalse
, ist die Matrix 3D. isIdentity
Schreibgeschützt-
Ein Boolescher Wert, der
true
ist, wenn die Matrix die Einheitsmatrix ist. Die Einheitsmatrix ist eine Matrix, in der jeder Wert0
ist, außer denen auf der Hauptdiagonale von der oberen linken bis zur unteren rechten Ecke (mit anderen Worten, wo die Offsets in jede 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
bism14
die erste Spalte sind,m21
bism24
die zweite Spalte usw. 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 -Übersetzungen durchzuführen. Dies 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 erbt keine Methoden. Keine der folgenden Methoden ändert die Originalmatrix.
DOMMatrixReadOnly.flipX()
-
Gibt eine neue
DOMMatrix
zurück, die durch Spiegeln der Quellmatrix um ihre X-Achse erstellt wurde. Dies entspricht der Multiplikation der Matrix mitDOMMatrix(-1, 0, 0, 1, 0, 0)
. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.flipY()
-
Gibt eine neue
DOMMatrix
zurück, die durch Spiegeln der Quellmatrix um ihre Y-Achse erstellt wurde. Dies entspricht der Multiplikation der Matrix mitDOMMatrix(1, 0, 0, -1, 0, 0)
. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.inverse()
-
Gibt eine neue
DOMMatrix
zurück, die durch Invertieren der Quellmatrix erstellt wurde. Die Originalmatrix wird nicht verändert. DOMMatrixReadOnly.multiply()
-
Gibt eine neue
DOMMatrix
zurück, die durch Berechnung des Skalarprodukts der Quellmatrix und der angegebenen Matrix erstellt wurde:A⋅B
. Wenn keine Matrix als Multiplikator angegeben wird, wird die Matrix mit einer Matrix multipliziert, in der jedes Element0
ist, außer der unteren rechten Ecke und dem Element direkt darüber und links davon:m33
undm34
. Diese haben den Standardwert1
. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.rotateAxisAngle()
-
Gibt eine neue
DOMMatrix
zurück, die durch Drehen der Quellmatrix um den angegebenen Vektor um den angegebenen Winkel erstellt wurde. Die Originalmatrix wird nicht verändert. DOMMatrixReadOnly.rotate()
-
Gibt eine neue
DOMMatrix
zurück, die durch Drehen der Quellmatrix um jeden ihrer Achsen um die angegebene Anzahl von Grad erstellt wurde. Die Originalmatrix wird nicht verändert. DOMMatrixReadOnly.rotateFromVector()
-
Gibt eine neue
DOMMatrix
zurück, die durch Drehen der Quellmatrix um den Winkel zwischen dem angegebenen Vektor und(1, 0)
erstellt wurde. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.scale()
-
Gibt eine neue
DOMMatrix
zurück, die durch Skalieren der Quellmatrix um die für jede Achse angegebene Menge erstellt wurde, zentriert auf den angegebenen Ursprung. Standardmäßig werden die X- und Z-Achsen mit1
skaliert, und die Y-Achse hat keinen Standardskalierungswert. Der Standardursprung ist(0, 0, 0)
. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.scale3d()
-
Gibt eine neue
DOMMatrix
zurück, die durch Skalieren der Quell-3D-Matrix um den gegebenen Faktor entlang all ihrer Achsen, zentriert auf den angegebenen Ursprungsort, erstellt wurde. Der Standardursprung ist(0, 0, 0)
. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.scaleNonUniform()
Veraltet-
Gibt eine neue
DOMMatrix
zurück, die durch Anwenden der angegebenen Skalierung auf die X-, Y- und Z-Achsen, zentriert am angegebenen Ursprung, erstellt wurde. Standardmäßig beträgt der Skalenfaktor der Y- und Z-Achsen jeweils1
, aber der Skalierungsfaktor für X muss angegeben werden. Der Standardursprung ist(0, 0, 0)
. Die Originalmatrix wird nicht verändert. DOMMatrixReadOnly.skewX()
-
Gibt eine neue
DOMMatrix
zurück, die durch Anwenden der angegebenen Schertransformation auf die Quellmatrix entlang ihrer X-Achse erstellt wurde. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.skewY()
-
Gibt eine neue
DOMMatrix
zurück, die durch Anwenden der angegebenen Schertransformation auf die Quellmatrix entlang ihrer Y-Achse erstellt wurde. Die Originalmatrix wird nicht modifiziert. DOMMatrixReadOnly.toFloat32Array()
-
Gibt ein neues
Float32Array
zurück, das alle 16 Elemente (m11
,m12
,m13
,m14
,m21
,m22
,m23
,m24
,m31
,m32
,m33
,m34
,m41
,m42
,m43
,m44
), die die Matrix bilden, enthält. Die Elemente werden in der Matrix als Fließkommazahlen einfacher Präzision in Spalten-Major-Ordnung (colexographischer Zugriff oder "colex") gespeichert. (Mit anderen Worten, die erste Spalte von oben nach unten, dann die zweite Spalte usw.) DOMMatrixReadOnly.toFloat64Array()
-
Gibt ein neues
Float64Array
zurück, das alle 16 Elemente (m11
,m12
,m13
,m14
,m21
,m22
,m23
,m24
,m31
,m32
,m33
,m34
,m41
,m42
,m43
,m44
), die die Matrix bilden, enthält. Die Elemente werden in der Matrix als Fließkommazahlen doppelte Präzision in Spalten-Major-Ordnung (colexographischer Zugriff oder "colex") gespeichert. (Mit anderen Worten, die erste Spalte von oben nach unten, dann die zweite Spalte usw.) DOMMatrixReadOnly.toJSON()
-
Gibt eine JSON-Darstellung des
DOMMatrixReadOnly
-Objekts zurück. DOMMatrixReadOnly.toString()
-
Erstellt und gibt eine String-Darstellung der Matrix in der CSS-Matrix-Syntax zurück, unter Verwendung der geeigneten CSS-Matrix-Notation.
DOMMatrixReadOnly.transformPoint()
-
Transformiert den angegebenen Punkt unter Verwendung der Matrix und gibt ein neues
DOMPoint
-Objekt zurück, das den transformierten Punkt enthält. Weder die Matrix noch der Originalpunkt werden verändert. DOMMatrixReadOnly.translate()
-
Gibt eine neue
DOMMatrix
zurück, die eine durch die Übersetzung der Quellmatrix mit dem angegebenen Vektor berechnete Matrix enthält. Standardmäßig ist der Vektor(0, 0, 0)
. Die Originalmatrix wird nicht geändert.
Statische Methoden
fromFloat32Array()
-
Erstellt ein neues veränderliches
DOMMatrix
-Objekt aus einem Array einzelpräziser (32-Bit) Gleitkommazahlen. 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 eineTypeError
-Ausnahme ausgelöst. fromFloat64Array()
-
Erstellt ein neues veränderliches
DOMMatrix
-Objekt aus einem Array doppelter Präzision (64-Bit) Gleitkommazahlen. 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 eineTypeError
-Ausnahme ausgelöst. fromMatrix()
-
Erstellt ein neues veränderliches
DOMMatrix
-Objekt aus einer vorhandenen Matrix oder einem Objekt, das die Werte für seine Eigenschaften bereitstellt. Wenn keine Matrix angegeben wird, wird die Matrix mit jedem Element auf0
initialisiert, außer der unteren rechten Ecke und dem Element direkt darüber und links davon:m33
undm34
. Diese haben den Standardwert1
.
Spezifikationen
Specification |
---|
Geometry Interfaces Module Level 1 # DOMMatrix |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Der veränderliche Matrixtyp,
DOMMatrix
, der auf dieser Schnittstelle basiert. - Die CSS-
matrix()
undmatrix3d()
funktionale Notation, die von dieser Schnittstelle generiert werden kann, um in einem CSS-transform
verwendet zu werden.