DOMMatrixReadOnly.isIdentity — Eigenschaft · JavaScript-Referenz

Signatur

DOMMatrixReadOnly.isIdentity

Beschreibung

Die schreibgeschützte Eigenschaft isIdentity von DOMMatrixReadOnly (und damit auch von DOMMatrix) gibt an, ob die Matrix die Einheitsmatrix ist. Das ist der Fall, wenn alle Diagonalelemente (m11, m22, m33, m44) den Wert 1 haben und alle übrigen Elemente 0 sind. Eine solche Matrix verändert beim Anwenden auf Punkte oder Elemente nichts.

In der Praxis nutzt man isIdentity, um zu prüfen, ob ein Element überhaupt transformiert ist, etwa nach dem Auslesen von getComputedStyle(el).transform, oder um unnötige Rechenarbeit zu sparen: Ist die Matrix die Einheitsmatrix, kann man Punkt-Transformationen, Invertierungen oder Canvas-Aufrufe wie setTransform() überspringen.

Der Vergleich ist exakt. Schon kleinste Gleitkomma-Abweichungen, die z. B. nach einer Rotation um 360° oder nach mehreren Multiplikationen auftreten, führen zu false. Außerdem wird die Eigenschaft bei jedem Zugriff neu aus den aktuellen Werten berechnet und spiegelt bei einer veränderbaren DOMMatrix daher immer den aktuellen Zustand wider.

Beispiele

Einheitsmatrix erkennen

const identity = new DOMMatrixReadOnly();
console.log(identity.isIdentity);

const moved = new DOMMatrixReadOnly().translate(10, 20);
console.log(moved.isIdentity);

// Hin- und Rückverschiebung ergibt wieder die Einheitsmatrix
const back = moved.translate(-10, -20);
console.log(back.isIdentity);

true false true

Prüfen, ob ein Element per CSS transformiert ist

const box = document.querySelector('.box');
const { transform } = getComputedStyle(box);

// 'none' wird vom Konstruktor nicht akzeptiert, daher abfangen
const matrix = new DOMMatrixReadOnly(transform === 'none' ? undefined : transform);

if (matrix.isIdentity) {
  console.log('Element ist nicht transformiert');
} else {
  console.log('Aktive Transformation:', matrix.toString());
}

Element ist nicht transformiert

Gleitkomma-Falle bei Rotation

const m = new DOMMatrix().rotate(90).rotate(270);
console.log(m.isIdentity);
console.log(m.m12); // winziger Restfehler

// Toleranzbasierter Vergleich als Alternative
const isAlmostIdentity = (mat, eps = 1e-9) => {
  const id = new DOMMatrixReadOnly().toFloat64Array();
  return mat.toFloat64Array().every((v, i) => Math.abs(v - id[i]) < eps);
};
console.log(isAlmostIdentity(m));

false (je nach Browser ggf. true) -2.4492935982947064e-16 true

// Wichtig · Fallstricke

Exakter Vergleich: Rundungsfehler aus trigonometrischen Berechnungen (Rotation, Skew) führen schnell zu false, obwohl die Matrix visuell keine Wirkung hat. Für robuste Prüfungen einen Toleranzvergleich über toFloat64Array() verwenden.
Nur lesbar: Zuweisungen an isIdentity werden ignoriert (im Strict Mode TypeError). Um eine Matrix zurückzusetzen, eine neue DOMMatrix erzeugen.
Nicht verwechseln mit is2D: Eine 2D-Matrix ist nicht zwangsläufig die Einheitsmatrix, und is2D bleibt nach 3D-Operationen false, auch wenn diese sich gegenseitig aufheben. isIdentity prüft dagegen nur die Werte.
Der Konstruktor akzeptiert den CSS-Wert 'none' nicht, deshalb diesen Fall vorher abfangen.
Kompatibilität: In allen aktuellen Browsern und in Web Workern verfügbar; ältere WebKit-Versionen kannten nur WebKitCSSMatrix ohne diese Eigenschaft.

Siehe auch

DOMMatrixReadOnly DOMMatrix DOMMatrixReadOnly.is2D DOMMatrixReadOnly.prototype.inverse() DOMMatrixReadOnly.prototype.toFloat64Array() DOMMatrixReadOnly.prototype.transformPoint() TaskAttributionTiming.containerType