DOMMatrix: Methode setMatrixValue()
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.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die setMatrixValue()-Methode des DOMMatrix-Interfaces ersetzt den Inhalt der Matrix durch die durch die angegebenen Transformation oder Transformationen beschriebene Matrix und gibt sich selbst zurück.
Syntax
setMatrixValue(transformList)
Parameter
transformList-
Ein String. Sein Wert folgt der gleichen Syntax wie der Wert der CSS-Eigenschaft
transform.
Rückgabewert
Gibt sich selbst zurück; die DOMMatrix mit aktualisierten Werten.
Beispiele
In diesem Beispiel erstellen wir eine Matrix, wenden eine 3D-Transformation mit der DOMMatrix.translateSelf()-Methode an, setzen sie mit der setMatrixValue()-Methode zurück in eine 2D-Transformation und anschließend zurück in eine 3D-Transformation mit einem weiteren Aufruf der setMatrixValue()-Methode.
const matrix = new DOMMatrix();
console.log(matrix.toString()); // matrix(1, 0, 0, 1, 0, 0)
console.log(matrix.is2D); // true
matrix.translateSelf(30, 40, 50);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false
matrix.setMatrixValue("matrix(1, 0, 0, 1, 15, 45)");
console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45)
console.log(matrix.is2D); // true
matrix.setMatrixValue(
"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)",
);
console.log(matrix.toString()); // matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 40, 50, 1)
console.log(matrix.is2D); // false
Spezifikationen
| Spezifikation |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrix-setmatrixvalue |
Browser-Kompatibilität
Siehe auch
DOMMatrix.translateSelf()DOMMatrixReadOnly.is2D- CSS
matrix()Funktion - CSS
matrix3d()Funktion