DOMMatrix.invertSelf() — Methode · JavaScript-Referenz

Signatur

DOMMatrix.prototype.invertSelf()

Beschreibung

invertSelf() berechnet die inverse Matrix einer DOMMatrix und schreibt das Ergebnis in das Objekt selbst. Es wird also keine neue Matrix angelegt. Eine Transformation, die mit der inversen Matrix verknüpft wird, ergibt die Einheitsmatrix. Mit der inversen Matrix lässt sich eine Transformation also rückgängig machen.

Typische Anwendungsfälle:

Bildschirm- bzw. Mauskoordinaten in das lokale Koordinatensystem eines transformierten Canvas, SVG-Elements oder CSS-Elements zurückrechnen.
Eine Kamera- oder View-Matrix in 2D- und 3D-Szenen aus der Welt-Matrix ableiten.
Eine Transformation aufheben, ohne alle einzelnen Schritte (Verschiebung, Drehung, Skalierung) rückwärts nachzubauen.

Die Methode verändert das Original. Das spart Speicher, zum Beispiel in Render-Schleifen, in denen sonst in jedem Frame neue Objekte entstehen würden. Soll die Ausgangsmatrix erhalten bleiben, verwendet man stattdessen DOMMatrixReadOnly.prototype.inverse(). Diese Methode liefert eine neue Matrix zurück.

Ist die Matrix singulär (Determinante 0, z. B. bei Skalierung mit 0), gibt es keine Inverse. In diesem Fall setzt invertSelf() alle 16 Komponenten auf NaN und is2D auf false. Es wird dabei keine Exception geworfen.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Dieselbe, jetzt invertierte DOMMatrix-Instanz (this). Dadurch lassen sich weitere …Self()-Aufrufe direkt anhängen. Ist die Matrix nicht invertierbar, enthalten alle Komponenten NaN.

Beispiele

Einfache 2D-Transformation invertieren

// Erst verschieben, dann skalieren
const m = new DOMMatrix().translate(10, 20).scale(2);
console.log(m.toString());

m.invertSelf(); // verändert m direkt
console.log(m.toString());

matrix(2, 0, 0, 2, 10, 20) matrix(0.5, 0, 0, 0.5, -5, -10)

Mausposition in Canvas-Weltkoordinaten umrechnen

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

// Szene verschoben, gedreht und gezoomt
ctx.translate(200, 150);
ctx.rotate(Math.PI / 4);
ctx.scale(1.5, 1.5);

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const screenPoint = new DOMPoint(event.clientX - rect.left, event.clientY - rect.top);

  // getTransform() liefert eine Kopie, invertSelf() darf sie also verändern
  const toWorld = ctx.getTransform().invertSelf();
  const worldPoint = toWorld.transformPoint(screenPoint);

  console.log(`Welt: ${worldPoint.x.toFixed(1)}, ${worldPoint.y.toFixed(1)}`);
});

z. B. bei Klick auf (200, 150): Welt: 0.0, 0.0

Nicht invertierbare Matrix erkennen

// Skalierung mit 0 → Determinante 0 → keine Inverse vorhanden
const flat = new DOMMatrix().scale(0, 1);
flat.invertSelf();

console.log(flat.a, flat.is2D);

const isValid = (matrix) => [matrix.m11, matrix.m22, matrix.m41].every(Number.isFinite);
console.log(isValid(flat));

NaN false false

invertSelf() vs. inverse()

const original = new DOMMatrix().rotate(30);

const copy = original.inverse();   // neue Matrix, original bleibt unverändert
const same = original.invertSelf(); // verändert original

console.log(copy === original); // false
console.log(same === original); // true

// Kontrolle: Matrix × Inverse ergibt ungefähr die Einheitsmatrix
const id = copy.multiply(original.inverse());
console.log(id.isIdentity || Math.abs(id.a - 1) < 1e-9);

false true true

// Wichtig · Fallstricke

Verändert das Original: Wer die Ausgangsmatrix später noch braucht, sollte inverse() verwenden oder vorher mit DOMMatrix.fromMatrix(m) eine Kopie anlegen.
Keine Exception bei singulären Matrizen: Das Ergebnis enthält dann nur NaN, und is2D wird false. Vor der Weiterverarbeitung, etwa mit transformPoint(), sollte man auf Number.isFinite() prüfen. Sonst ziehen sich die NaN-Werte unbemerkt durch alle folgenden Berechnungen.
Gleitkomma-Genauigkeit: Bei fast singulären Matrizen (sehr kleine Skalierungen) kann die Inverse numerisch instabil werden. isIdentity ist nach m.multiply(m.inverse()) wegen Rundungsfehlern oft false.
Nur auf DOMMatrix: DOMMatrixReadOnly hat kein invertSelf(), sondern nur inverse().
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari), auch in Web Workern. Ältere WebKit-Versionen kennen stattdessen den Alias WebKitCSSMatrix. In Node.js gibt es DOMMatrix nicht nativ. Dort helfen Polyfills, z. B. aus dem Paket canvas.

Siehe auch

DOMMatrix DOMMatrixReadOnly.inverse() DOMMatrix.multiplySelf() DOMMatrix.preMultiplySelf() DOMMatrixReadOnly.transformPoint() CanvasRenderingContext2D.getTransform() new TextEncoderStream()