DOMMatrixReadOnly: scale() Methode

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 scale() Methode der DOMMatrixReadOnly Schnittstelle erstellt eine neue Matrix, die das Ergebnis der ursprünglichen Matrix mit einer angewendeten Skalierungstransformation ist.

In diesem Artikel

Syntax

js
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.

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:

html
<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.

js
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());