DOMMatrix: scaleSelf() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die scaleSelf() Methode der DOMMatrix Schnittstelle ist eine veränderliche Transformationsmethode, die eine Matrix durch Anwendung eines angegebenen Skalierungsfaktors modifiziert. Dies erfolgt zentriert auf einem gegebenen Ursprung, wobei der Standardursprung (0, 0) ist, und sie gibt die skalierten Matrix zurück.

Um eine Matrix zu skalieren, ohne sie zu verändern, siehe DOMMatrixReadOnly.scale(), die eine neue skalierte Matrix erstellt, während die ursprüngliche 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. Wenn nicht angegeben, ist der Standardwert 1.
scaleY Optional: Ein Multiplikator für den Skalierungswert auf der y-Achse. Wenn nicht angegeben, entspricht der Standardwert dem Wert von scaleX.
scaleZ Optional: Ein Multiplikator für den Skalierungswert auf der z-Achse. Wenn dieser Wert etwas anderes als 1 ist, wird die resultierende Matrix 3D.
originX Optional: Eine x-Koordinate für den Ursprung der Transformation. Wenn kein Ursprung angegeben ist, beträgt der Standardwert 0.
originY Optional: Eine y-Koordinate für den Ursprung der Transformation. Wenn kein Ursprung angegeben ist, beträgt der Standardwert 0.
originZ Optional: Eine z-Koordinate für den Ursprung der Transformation. Wenn kein Ursprung angegeben ist, beträgt der Standardwert 0. Wenn dieser Wert etwas anderes als 0 ist, wird die resultierende Matrix 3D.

Rückgabewert

Gibt sich selbst zurück; eine DOMMatrix.

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

Beispiele

Diese SVG enthält zwei halbtransparente Quadrate, eines rot und eines blau, die jeweils 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 mit der scaleSelf() Methode so, dass die Breite halbiert und die Höhe verdoppelt wird.

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

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

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

Spezifikationen

Specification
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

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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