DOMMatrixReadOnly: scale() Methode
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 scale()
Methode der DOMMatrixReadOnly
Schnittstelle erstellt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix mit einer angewendeten Skalierungstransformation ist.
Syntax
scale(scaleX)
scale(scaleX, scaleY)
scale(scaleX, scaleY, scaleZ)
scale(scaleX, scaleY, scaleZ, originX)
scale(scaleX, scaleY, scaleZ, originX, originY)
scale(scaleX, scaleY, scaleZ, originX, originY, originZ)
Parameter
scaleX
-
Ein Multiplikator für den Skalierungswert auf der x-Achse.
scaleY
Optional-
Ein Multiplikator für den Skalierungswert auf der y-Achse. Wenn nicht angegeben, wird standardmäßig der Wert von
scaleX
verwendet. scaleZ
Optional-
Ein Multiplikator für den Skalierungswert auf der z-Achse. Wenn dieser Wert ungleich 1 ist, wird die resultierende Matrix 3D sein.
originX
Optional-
Eine x-Koordinate für den Ursprung der Transformation. Wenn kein Ursprung angegeben ist, wird standardmäßig 0 verwendet.
originY
Optional-
Eine y-Koordinate für den Ursprung der Transformation. Wenn kein Ursprung angegeben ist, wird standardmäßig 0 verwendet.
originZ
Optional-
Eine z-Koordinate für den Ursprung der Transformation. Wenn kein Ursprung angegeben ist, wird standardmäßig 0 verwendet. Wenn dieser Wert ungleich 0 ist, wird die resultierende Matrix 3D sein.
Rückgabewert
Gibt eine DOMMatrix
zurück, die eine neue Matrix enthält, die das Ergebnis der Matrix ist, bei der die x- und y-Dimensionen um den gegebenen Faktor skaliert werden, zentriert auf den angegebenen Ursprung. Die ursprüngliche Matrix wird nicht verändert.
Wenn eine Skalierung um die z-Achse angewendet wird, ist die resultierende Matrix eine 4✕4 3D-Matrix.
Beispiele
Dieses SVG enthält drei Quadrate – eins in Rot, eins in Blau und eins in Grün – die alle am Dokumentursprung positioniert sind:
<svg width="250" height="250" viewBox="0 0 25 25">
<rect width="25" height="25" fill="red" />
<rect id="transformed" width="25" height="25" fill="blue" />
<rect id="transformedOrigin" width="25" height="25" fill="green" />
</svg>
Dieses JavaScript erstellt zuerst eine Identitätsmatrix und verwendet dann die scale()
Methode, um eine neue Matrix mit einem einzelnen Parameter zu erstellen.
Wir prüfen, ob der Browser eine sechs Parameter scale()
Methode unterstützt, indem wir eine neue Matrix mit drei Parametern erstellen und ihre is2D
Eigenschaft beobachten. Wenn diese false
ist, dann wurde der dritte Parameter vom Browser als scaleZ
Parameter akzeptiert, was diese zu einer 3D-Matrix macht.
Wir erstellen dann eine neue Matrix, die um einen gegebenen Ursprung skaliert ist, entweder mit drei oder sechs Parametern, abhängig von der Browserunterstützung.
Diese neuen Matrizen werden dann auf die blauen und grünen Quadrate als transform
angewendet, was deren Dimensionen und Position verändert. Das rote Quadrat bleibt an seinem Platz.
const matrix = new DOMMatrixReadOnly();
const scaledMatrix = matrix.scale(0.5);
let scaledMatrixWithOrigin = matrix.scale(0.5, 25, 25);
// if the browser has interpreted these parameters as scaleX, scaleY, scaleZ, the resulting matrix is 3D
const browserExpectsSixParamScale = !scaledMatrixWithOrigin.is2D;
if (browserExpectsSixParamScale) {
scaledMatrixWithOrigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0);
}
document
.querySelector("#transformed")
.setAttribute("transform", scaledMatrix.toString());
document
.querySelector("#transformedOrigin")
.setAttribute("transform", scaledMatrixWithOrigin.toString());
Spezifikationen
Specification |
---|
Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-scale |