DOMMatrix: scaleSelf() 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 scaleSelf() Methode der DOMMatrix-Schnittstelle ist eine veränderbare Transformationsmethode, die eine Matrix durch Anwendung eines angegebenen Skalierungsfaktors modifiziert, zentriert auf dem angegebenen Ursprung, mit einem Standardursprung von (0, 0), und gibt die skalierte Matrix zurück.

Um eine Matrix zu skalieren, ohne sie zu verändern, siehe DOMMatrixReadOnly.scale(), die eine neue skalierte Matrix erstellt, während das Original unverändert bleibt.

Syntax

scaleSelf()
scaleSelf(scaleX)
scaleSelf(scaleX, scaleY)
scaleSelf(scaleX, scaleY, scaleZ)
scaleSelf(scaleX, scaleY, scaleZ, originX)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY)
scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

Parameter

scaleX Optional: Ein Multiplikator für den Skalierungswert auf der x-Achse. Falls nicht angegeben, beträgt der Standardwert 1.
scaleY Optional: Ein Multiplikator für den Skalierungswert auf der y-Achse. Falls nicht angegeben, entspricht der Standardwert dem von scaleX.
scaleZ Optional: Ein Multiplikator für den Skalierungswert auf der z-Achse. Wenn dieser Wert nicht 1 ist, wird die resultierende Matrix 3D sein.
originX Optional: Eine x-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, beträgt der Standardwert 0.
originY Optional: Eine y-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, beträgt der Standardwert 0.
originZ Optional: Eine z-Koordinate für den Ursprung der Transformation. Falls kein Ursprung angegeben ist, beträgt der Standardwert 0. Wenn dieser Wert nicht 0 ist, wird die resultierende Matrix 3D sein.

Rückgabewert

Gibt sich selbst zurück; eine DOMMatrix.

Wenn eine Skalierung auf der z-Achse angewendet wird, wird die Matrix eine 4✕4 3D-Matrix sein.

Beispiele

Dieses SVG enthält zwei halbtransparente Quadrate, eines rot und eines blau, die beide am Dokumentursprung positioniert sind:

html

<svg viewBox="0 0 50 50" height="200">
  <rect width="25" height="25" fill="#ff000099" />
  <rect id="transformed" width="25" height="25" fill="#0000ff99" />
</svg>

Dieses JavaScript erstellt zuerst eine Matrix und skaliert dann die Matrix zu einer, die die Breite halbiert und die Höhe verdoppelt, unter Verwendung der Methode scaleSelf().

Die Matrix wird dann auf das blaue Quadrat als transform angewendet, was dessen Abmessungen und Position verändert. Das rote Quadrat bleibt unverändert.

const matrix = new DOMMatrix();
matrix.scaleSelf(0.5, 2);

document
  .querySelector("#transformed")
  .setAttribute("transform", matrix.toString());

Spezifikationen

Spezifikation
Geometry Interfaces Module Level 1 # dom-dommatrix-scaleself

Browser-Kompatibilität

Siehe auch

DOMMatrixReadOnly.scale()
DOMMatrix.scale3dSelf()
CSS transform Eigenschaft und die scaleSelf() und matrix() Funktionen
CSS-Transformationen Modul
SVG transform Attribut
CanvasRenderingContext2D Schnittstelle transform() Methode

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden