DOMMatrix.scaleSelf() — Methode · JavaScript-Referenz

Signatur

DOMMatrix.prototype.scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

Beschreibung

scaleSelf() ist die verändernde Variante von DOMMatrixReadOnly.prototype.scale(). Die Methode multipliziert die aktuelle Matrix von rechts mit einer Skalierungsmatrix (M = M × S) und schreibt das Ergebnis in dasselbe Objekt zurück. Es wird also keine neue Matrix erzeugt. Weil die Methode die Matrix selbst zurückgibt, kannst du mehrere Aufrufe verketten, etwa translateSelf(), rotateSelf() und scaleSelf().

Mit den optionalen Parametern originX, originY und originZ legst du den Ursprung der Skalierung fest. Intern entspricht das der Folge zum Ursprung verschieben → skalieren → zurückverschieben. So kannst du ein Objekt z. B. um seinen Mittelpunkt vergrößern statt um die linke obere Ecke. Das ist dasselbe Verhalten wie bei CSS transform-origin.

Typische Einsatzfälle sind Zoom-Funktionen in Canvas-Anwendungen, das Berechnen von CSS-Transformationen in JavaScript, bevor sie über element.style.transform gesetzt werden, und Geometrie-Berechnungen zusammen mit DOMPoint. Wenn scaleZ ungleich 1 ist oder ein originZ gesetzt wird, wird die Matrix zu einer 3D-Matrix (is2D === false).

Parameter

Name	Typ	Default	Beschreibung
$scaleX	number	1	Skalierungsfaktor entlang der X-Achse.
$scaleY	number	scaleX	Skalierungsfaktor entlang der Y-Achse. Wenn du ihn weglässt, wird der Wert von `scaleX` übernommen. Die Skalierung ist dann gleichmäßig.
$scaleZ	number	1	Skalierungsfaktor entlang der Z-Achse. Jeder Wert ungleich `1` macht die Matrix zu einer 3D-Matrix.
$originX	number	0	X-Koordinate des Ursprungs, um den skaliert wird.
$originY	number	0	Y-Koordinate des Ursprungs, um den skaliert wird.
$originZ	number	0	Z-Koordinate des Ursprungs, um den skaliert wird.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Dieselbe DOMMatrix-Instanz, auf der die Methode aufgerufen wurde, jetzt skaliert. Deshalb kannst du Aufrufe verketten.

Beispiele

Gleichmäßig und ungleichmäßig skalieren

const m = new DOMMatrix();
m.scaleSelf(2); // scaleY übernimmt den Wert von scaleX
console.log(m.toString());

const n = new DOMMatrix().scaleSelf(2, 0.5);
console.log(n.toString());
console.log(m === m.scaleSelf(1)); // gibt dieselbe Instanz zurück

matrix(2, 0, 0, 2, 0, 0) matrix(2, 0, 0, 0.5, 0, 0) true

Um den Mittelpunkt eines Elements skalieren

const box = document.querySelector('.box');
const { width, height } = box.getBoundingClientRect();

// Das Element ist z. B. 100×100 px groß, der Mittelpunkt liegt bei (50, 50)
const m = new DOMMatrix().scaleSelf(2, 2, 1, width / 2, height / 2);

console.log(m.toString());
box.style.transformOrigin = '0 0'; // Den Ursprung übernimmt die Matrix
box.style.transform = m.toString();

matrix(2, 0, 0, 2, -50, -50)

Zoom im Canvas mit verketteten Transformationen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const view = new DOMMatrix();

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
  // Mausposition in Weltkoordinaten umrechnen und dort zoomen
  const p = view.inverse().transformPoint(new DOMPoint(e.offsetX, e.offsetY));
  view.scaleSelf(factor, factor, 1, p.x, p.y);

  ctx.resetTransform();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setTransform(view);
  ctx.fillRect(50, 50, 100, 60);
}, { passive: false });

3D-Skalierung ändert is2D

const m = new DOMMatrix().translateSelf(100, 50).scaleSelf(3);
console.log(m.toString(), m.is2D);

m.scaleSelf(1, 1, 2);
console.log(m.is2D);

matrix(3, 0, 0, 3, 100, 50) true false

// Wichtig · Fallstricke

Verändert das Objekt: scaleSelf() überschreibt die Matrix. Wenn du das Original noch brauchst, verwende DOMMatrixReadOnly.prototype.scale(), die eine neue Matrix liefert, oder kopiere vorher mit DOMMatrix.fromMatrix(m).
Reihenfolge beachten: Die Skalierung wird von rechts multipliziert. Bei translateSelf(100, 50).scaleSelf(3) werden Punkte also zuerst skaliert und danach verschoben. Die Verschiebung selbst wird nicht skaliert.
Veraltete Signatur: Ältere Spezifikationsstände kannten scaleSelf(scale, originX, originY). Wer den Ursprung setzen will, muss heute scaleY und scaleZ explizit angeben, z. B. scaleSelf(2, 2, 1, 50, 50). Sonst wird 50 als Y-Faktor gelesen.
Die Z-Achse macht die Matrix zu 3D: scaleZ !== 1 oder originZ !== 0 setzt is2D auf false. toString() liefert dann matrix3d(...), und Canvas 2D ignoriert die 3D-Anteile.
Kompatibilität: Die Methode wird in allen aktuellen Browsern und in Web Workers unterstützt. Node.js stellt DOMMatrix nicht nativ bereit, dafür brauchst du Polyfills bzw. Bibliotheken wie canvas oder jsdom. scaleNonUniformSelf() ist veraltet und wird durch scaleSelf() ersetzt.

Siehe auch

DOMMatrix DOMMatrixReadOnly.scale() DOMMatrix.scale3dSelf() DOMMatrix.translateSelf() DOMMatrix.rotateSelf() DOMMatrix.multiplySelf() DOMMatrixReadOnly.transformPoint()