DOMMatrixReadOnly.flipX() — Methode · JavaScript-Referenz

Signatur

DOMMatrixReadOnly.prototype.flipX()

Beschreibung

flipX() multipliziert die aktuelle Matrix von rechts mit der Spiegelmatrix matrix(-1, 0, 0, 1, 0, 0). Dadurch wird bei jedem transformierten Punkt das Vorzeichen der x-Koordinate umgekehrt, bevor die bisherige Transformation angewendet wird. Optisch ist das eine horizontale Spiegelung. Die Achse, an der gespiegelt wird, ist die y-Achse des lokalen Koordinatensystems. Die MDN-Formulierung „um die x-Achse gespiegelt“ meint also, dass die x-Werte umgedreht werden.

Die Methode ändert die Ausgangsmatrix nicht. Sie gibt immer eine neue, veränderbare DOMMatrix zurück. Deshalb eignet sie sich gut für Verkettungen wie matrix.translate(w, 0).flipX(), ohne dass die ursprüngliche Matrix verloren geht.

Typische Einsätze sind gespiegelte Sprites und Bilder im Canvas, eine spiegelverkehrte Selfie-Vorschau einer Webcam, Layouts für Rechts-nach-links-Schreibrichtung oder das Berechnen gespiegelter Punkte mit transformPoint(). Das Ergebnis lässt sich direkt an CanvasRenderingContext2D.setTransform() übergeben oder über toString() als CSS-transform verwenden.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Eine neue DOMMatrix, die dem Produkt this × matrix(-1, 0, 0, 1, 0, 0) entspricht. Die Werte a/m11 und b/m12 (bei 3D auch m13 und m14) bekommen ein umgekehrtes Vorzeichen, alle anderen Werte bleiben gleich. is2D bleibt unverändert.

Beispiele

Einheitsmatrix spiegeln

const identity = new DOMMatrixReadOnly();
const flipped = identity.flipX();

console.log(flipped.toString());
console.log(identity.toString()); // Original bleibt unverändert
console.log(flipped instanceof DOMMatrix);

matrix(-1, 0, 0, 1, 0, 0) matrix(1, 0, 0, 1, 0, 0) true

Punkt horizontal spiegeln

const m = new DOMMatrixReadOnly([1, 0, 0, 1, 10, 20]).flipX();
console.log(m.toString());

const p = m.transformPoint({ x: 5, y: 3 });
console.log(p.x, p.y);

matrix(-1, 0, 0, 1, 10, 20) 5 23

Bild im Canvas spiegelverkehrt zeichnen (z. B. Selfie-Vorschau)

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const video = document.querySelector('video');

const drawMirrored = () => {
  // Erst an den rechten Rand verschieben, dann die x-Achse spiegeln
  const mirror = new DOMMatrix()
    .translate(canvas.width, 0)
    .flipX();

  ctx.setTransform(mirror);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  ctx.resetTransform();
  requestAnimationFrame(drawMirrored);
};

video.addEventListener('playing', drawMirrored);

Aktuelle CSS-Transformation eines Elements spiegeln

const card = document.querySelector('.card');
const current = new DOMMatrixReadOnly(getComputedStyle(card).transform);

card.style.transform = current.flipX().toString();

// Wichtig · Fallstricke

Keine Variante, die die Matrix direkt ändert: Es gibt kein flipXSelf(). Wer eine DOMMatrix direkt verändern will, nimmt matrix.scaleSelf(-1, 1), was auf dasselbe hinausläuft.
Reihenfolge beachten: Die Spiegelung wird von rechts multipliziert, wirkt also im lokalen Koordinatensystem vor den bisherigen Transformationen. translate(w, 0).flipX() spiegelt innerhalb der Breite w. flipX().translate(w, 0) verschiebt dagegen in die negative x-Richtung.
Negative Null: Aus Nullwerten wie b kann -0 werden. toString() gibt dafür 0 aus, aber ein Vergleich mit Object.is(m.b, 0) liefert false.
Wiederholte Aufrufe heben sich auf: Wer flipX() zweimal aufruft, bekommt wieder die Ausgangsmatrix.
Kompatibilität: Die Methode wird in allen modernen Browsern und in Web Workern unterstützt. Node.js stellt DOMMatrix nicht global bereit. Dort braucht man eine Bibliothek, z. B. aus dem Paket canvas.

Siehe auch

DOMMatrixReadOnly.flipY() DOMMatrixReadOnly.scale() DOMMatrix.scaleSelf() DOMMatrixReadOnly.transformPoint() DOMMatrixReadOnly.multiply() DOMMatrixReadOnly DOMMatrix CanvasRenderingContext2D.setTransform()