Signatur
Beschreibung
Die Methode toFloat64Array() wandelt eine DOMMatrix bzw. DOMMatrixReadOnly in ein flaches Float64Array mit genau 16 Einträgen um. Die Reihenfolge ist spaltenweise (column-major): m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44. Das ist dieselbe Anordnung, die auch WebGL und viele Mathe-Bibliotheken (z. B. gl-matrix) erwarten.
Anders als toFloat32Array() behält toFloat64Array() die volle Genauigkeit doppelter Genauigkeit bei, denn intern speichert DOMMatrix seine Werte ohnehin als 64-Bit-Gleitkommazahlen. Die Methode eignet sich deshalb gut, um eine Matrix ohne Genauigkeitsverlust zu serialisieren, zu vergleichen oder an eigene Rechenroutinen zu übergeben.
Auch eine 2D-Matrix (is2D === true) liefert immer 16 Werte: Die sechs 2D-Komponenten a–f landen auf m11, m12, m21, m22, m41 und m42; die übrigen Positionen sind mit den Werten der Einheitsmatrix (0 bzw. 1) belegt.
Das zurückgegebene Array ist eine Kopie: Änderungen daran wirken sich nicht auf die Matrix aus, und spätere Änderungen an einer DOMMatrix spiegeln sich nicht im Array wider.
Rückgabewert
Float64Array der Länge 16 mit den Matrixelementen in spaltenweiser Reihenfolge.Beispiele
2D-Matrix in ein Float64Array umwandeln
// 2D-Matrix aus den Komponenten a, b, c, d, e, f
const matrix = new DOMMatrix([1, 2, 3, 4, 5, 6]);
const werte = matrix.toFloat64Array();
console.log(werte.length);
console.log(Array.from(werte));Transformationskette auslesen
// Erst verschieben, dann skalieren
const transform = new DOMMatrix()
.translate(10, 20)
.scale(2);
const [m11, , , , , m22, , , , , , , m41, m42] = transform.toFloat64Array();
console.log({ m11, m22, m41, m42 });Matrix verlustfrei als JSON speichern und wiederherstellen
const original = new DOMMatrix('matrix(0.1, 0.2, 0.3, 0.4, 15.5, 42)');
// Serialisieren: Float64Array -> normales Array -> JSON
const json = JSON.stringify(Array.from(original.toFloat64Array()));
localStorage.setItem('ansicht', json);
// Wiederherstellen
const gespeichert = JSON.parse(localStorage.getItem('ansicht'));
const wiederhergestellt = DOMMatrix.fromFloat64Array(new Float64Array(gespeichert));
console.log(wiederhergestellt.a, wiederhergestellt.e, wiederhergestellt.f);Zwei Matrizen mit Toleranz vergleichen
const fastGleich = (m1, m2, eps = 1e-9) => {
const a = m1.toFloat64Array();
const b = m2.toFloat64Array();
return a.every((wert, i) => Math.abs(wert - b[i]) < eps);
};
const m1 = new DOMMatrix().rotate(90).rotate(-90);
const m2 = new DOMMatrix();
console.log(fastGleich(m1, m2));// Wichtig · Fallstricke
- Spaltenweise Reihenfolge: Der Index 12 und 13 enthält die Verschiebung (
m41/m42bzw.e/f) – nicht die Indizes 3 und 7, wie man bei zeilenweiser Denkweise erwarten könnte. - WebGL:
gl.uniformMatrix4fv()akzeptiert zwar auch 64-Bit-Arrays über Konvertierung, üblich und effizienter ist dort jedochtoFloat32Array(), da die GPU mit 32-Bit-Werten arbeitet. - Rundungsfehler: Nach Rotationen entstehen oft Werte wie
6.123e-17statt0. Vergleiche daher mit einer Toleranz statt mit===. - Wird das Array über
DOMMatrix.fromFloat64Array()mit 16 Elementen zurückgewandelt, ist die neue Matrix eine 3D-Matrix (is2D === false), auch wenn die Ausgangsmatrix 2D war. JSON.stringify()serialisiert typisierte Arrays als Objekt mit Index-Schlüsseln – vorher mitArray.from()umwandeln.- Kompatibilität: In allen aktuellen Browsern verfügbar (Chrome 61+, Firefox 33+, Safari 11+), auch in Web Workers; nicht in Node.js ohne Polyfill.