DOMMatrixReadOnly.flipY() — Methode · JavaScript-Referenz

Signatur

DOMMatrixReadOnly.prototype.flipY()

Beschreibung

flipY() multipliert die aktuelle Matrix von rechts mit der Spiegelungsmatrix matrix(1, 0, 0, -1, 0, 0). Das Ergebnis ist eine neue DOMMatrix. Die ursprüngliche Matrix bleibt unverändert. Das Ergebnis ist gleichwertig mit scale(1, -1).

Geometrisch werden dabei die y-Werte aller Punkte negiert, bevor die bisherige Transformation greift. In den Matrixwerten heißt das: c und d (bzw. m21–m24) wechseln das Vorzeichen, alle anderen Werte bleiben gleich. Bei einer 2D-Matrix bleibt is2D weiterhin true.

Typische Einsatzfälle: ein mathematisches Koordinatensystem mit nach oben zeigender y-Achse im Canvas (dort zeigt die y-Achse standardmäßig nach unten), das vertikale Spiegeln von Grafiken und Sprites und das Umrechnen zwischen Koordinatensystemen, etwa bei WebGL-Texturen oder PDF-Koordinaten.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Eine neue Matrix: die ursprüngliche Matrix multipliziert mit matrix(1, 0, 0, -1, 0, 0).

Beispiele

Einheitsmatrix spiegeln

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

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

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

Reihenfolge bei verketteten Transformationen

const m = new DOMMatrix().translate(10, 20).flipY();
console.log(m.toString());

// Erst wird gespiegelt (5, 5) → (5, -5), dann verschoben → (15, 15)
const p = m.transformPoint(new DOMPoint(5, 5));
console.log(p.x, p.y);

matrix(1, 0, 0, -1, 10, 20) 15 15

Canvas mit mathematischem Koordinatensystem (y nach oben)

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

// Ursprung nach unten links verschieben, dann y-Achse umdrehen
const math = new DOMMatrix()
  .translate(0, canvas.height)
  .flipY();

ctx.setTransform(math);

// Parabel y = x² / 100 zeichnen, die jetzt nach oben geöffnet ist
ctx.beginPath();
for (let x = 0; x <= canvas.width; x++) {
  const y = (x * x) / 100;
  x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.stroke();

// Wichtig · Fallstricke

Name verwirrt leicht: flipY() negiert die y-Koordinaten. Geometrisch ist das eine Spiegelung an der x-Achse, also eine vertikale Spiegelung. Für eine horizontale Spiegelung gibt es flipX().
Keine veränderliche Variante: Eine Methode flipYSelf() gibt es nicht. Um eine DOMMatrix direkt zu ändern, verwendet man matrix.scaleSelf(1, -1).
Reihenfolge: Die Spiegelung wird von rechts multipliziert und wirkt deshalb auf Punkte vor den bisherigen Transformationen. translate(...).flipY() ergibt etwas anderes als flipY().translate(...).
Text und Bilder, die in einem gespiegelten Canvas gezeichnet werden, stehen auf dem Kopf. Dafür die Transformation vorübergehend mit save()/restore() zurücksetzen.
Kompatibilität: wird von allen aktuellen Browsern unterstützt und steht auch in Web Workern zur Verfügung. Ältere WebKit-Versionen kennen nur WebKitCSSMatrix, dort fehlt flipY().

Siehe auch

DOMMatrixReadOnly.flipX() DOMMatrixReadOnly.scale() DOMMatrix.scaleSelf() DOMMatrixReadOnly.transformPoint() DOMMatrixReadOnly CanvasRenderingContext2D.setTransform() StylePropertyMapReadOnly.keys()