DOMMatrixReadOnly.inverse() — Methode · JavaScript-Referenz

Signatur

DOMMatrixReadOnly.prototype.inverse()

Beschreibung

Die Methode inverse() berechnet die inverse Matrix einer DOMMatrixReadOnly bzw. DOMMatrix und gibt sie als neue DOMMatrix zurück. Multipliziert man eine Matrix mit ihrer Inversen, erhält man (bis auf Rundungsfehler) die Einheitsmatrix. Die Inverse macht eine Transformation also rückgängig: Aus einer Verschiebung um (100, 50) wird eine Verschiebung um (-100, -50), aus einer Skalierung um 2 wird eine Skalierung um 0,5.

In der Praxis braucht man das vor allem, um Koordinaten zurückzurechnen. Ein typischer Fall: Man hat auf einem Canvas gezoomt, verschoben oder gedreht und möchte wissen, welcher Punkt im Zeichenkoordinatensystem unter dem Mauszeiger liegt. Dazu nimmt man die aktuelle Transformation (ctx.getTransform()), bildet die Inverse und wendet sie mit transformPoint() auf die Bildschirmkoordinaten an. Dasselbe gilt für CSS-Transformationen von Elementen, etwa beim Drag-and-drop in gedrehten oder skalierten Containern.

Da inverse() nicht verändert, sondern eine Kopie liefert, funktioniert die Methode auch auf unveränderlichen DOMMatrixReadOnly-Objekten. Wer die Matrix direkt verändern möchte, nimmt stattdessen DOMMatrix.prototype.invertSelf().

Ist die Matrix nicht invertierbar (Determinante 0, z. B. bei einer Skalierung um 0), wird keine Ausnahme geworfen. Stattdessen sind alle Komponenten der Ergebnismatrix NaN und is2D ist false.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Eine neue, veränderbare DOMMatrix, die die Inverse der Ausgangsmatrix ist. Ist die Matrix nicht invertierbar, sind alle Komponenten NaN und is2D ist false.

Beispiele

Verschiebung und Skalierung umkehren

const verschiebung = new DOMMatrix().translate(100, 50);
const umkehr = verschiebung.inverse();

console.log(umkehr.toString());
console.log(verschiebung.toString()); // Original bleibt unverändert

const skalierung = new DOMMatrixReadOnly().scale(2);
console.log(skalierung.inverse().toString());

matrix(1, 0, 0, 1, -100, -50) matrix(1, 0, 0, 1, 100, 50) matrix(0.5, 0, 0, 0.5, 0, 0)

Mausposition in Canvas-Koordinaten umrechnen

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 300;
document.body.append(canvas);
const ctx = canvas.getContext('2d');

// Ansicht: um 200/150 verschoben, 2-fach gezoomt
ctx.translate(200, 150);
ctx.scale(2, 2);

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

  // Inverse der aktuellen Transformation auf den Klickpunkt anwenden
  const welt = ctx.getTransform().inverse().transformPoint(bildschirm);
  console.log(`Weltkoordinate: ${welt.x}, ${welt.y}`);
});
// Klick bei (300, 250) im Canvas:

Weltkoordinate: 50, 50

Prüfen, ob die Umkehrung gelungen ist

const m = new DOMMatrix().translate(10, 20).rotate(30).scale(1.5);
const produkt = m.multiply(m.inverse());

// Rundungsfehler verhindern oft ein exaktes isIdentity
console.log(produkt.isIdentity);

const fastEinheit = (mat, eps = 1e-9) =>
  Math.abs(mat.a - 1) < eps && Math.abs(mat.b) < eps &&
  Math.abs(mat.c) < eps && Math.abs(mat.d - 1) < eps &&
  Math.abs(mat.e) < eps && Math.abs(mat.f) < eps;

console.log(fastEinheit(produkt));

false (je nach Rundung ggf. true) true

Nicht invertierbare Matrix erkennen

const flach = new DOMMatrix().scale(0, 1); // Determinante 0
const inv = flach.inverse();

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

const istInvertierbar = (mat) => !Number.isNaN(mat.inverse().m11);
console.log(istInvertierbar(flach));
console.log(istInvertierbar(new DOMMatrix().rotate(45)));

NaN false false true

// Wichtig · Fallstricke

Keine Ausnahme bei singulären Matrizen: Ist die Matrix nicht invertierbar, enthält das Ergebnis nur NaN-Werte und is2D wird false. Prüfe das Ergebnis vor der Weiterverwendung, sonst pflanzen sich NaN-Werte unbemerkt in weitere Berechnungen fort.
toString() wirft danach: Bei einer Matrix mit NaN- oder unendlichen Werten wirft toString() einen InvalidStateError. Das betrifft auch das Zuweisen an element.style.transform per Stringumwandlung.
Rundungsfehler: Wegen Gleitkommaarithmetik ergibt m.multiply(m.inverse()) oft keine exakte Einheitsmatrix. isIdentity kann daher false liefern, also besser mit einer Toleranz vergleichen.
Kopie statt Änderung: inverse() erzeugt bei jedem Aufruf ein neues Objekt. In heißen Schleifen (z. B. bei jedem pointermove) lohnt es sich, die Inverse einmal zu berechnen und zwischenzuspeichern, solange sich die Transformation nicht ändert. Alternativ verändert invertSelf() die Matrix direkt.
Kompatibilität: In allen modernen Browsern und in Web Workern verfügbar. Node.js bietet DOMMatrix nicht von Haus aus an, dort braucht man ein Polyfill oder eine Bibliothek (z. B. canvas).

Siehe auch

DOMMatrix.invertSelf() DOMMatrixReadOnly.multiply() DOMMatrixReadOnly.transformPoint() DOMMatrixReadOnly.isIdentity DOMMatrixReadOnly CanvasRenderingContext2D.getTransform() TaskAttributionTiming.toJSON()