DOMPointReadOnly.toJSON() — Methode · JavaScript-Referenz

Signatur

DOMPointReadOnly.prototype.toJSON()

Beschreibung

Die Methode toJSON() wandelt ein DOMPointReadOnly (oder ein davon abgeleitetes DOMPoint) in ein gewöhnliches JavaScript-Objekt um. Das Ergebnis enthält die vier Koordinaten x, y, z und w als eigene, aufzählbare Eigenschaften.

Nötig ist das, weil die Koordinaten bei DOMPointReadOnly als Getter auf dem Prototyp liegen und keine eigenen Eigenschaften der Instanz sind. Ohne toJSON() würde JSON.stringify() nur {} liefern. Da JSON.stringify() eine vorhandene toJSON()-Methode automatisch aufruft, lassen sich Punkte direkt serialisieren, etwa zum Speichern in localStorage, zum Versand per fetch() oder für Protokollausgaben.

Das zurückgegebene Objekt ist eine unabhängige Momentaufnahme: Ändert man danach ein veränderbares DOMPoint, bleibt das Objekt unverändert. Mit DOMPoint.fromPoint() bzw. DOMPointReadOnly.fromPoint() lässt sich daraus später wieder ein Punkt erzeugen.

Rückgabewert

Typ

{ x: number, y: number, z: number, w: number }

Beschreibung

Ein einfaches Objekt (kein DOMPointReadOnly) mit den aktuellen Werten der Koordinaten x, y, z und w.

Beispiele

Punkt in ein einfaches Objekt umwandeln

const punkt = new DOMPointReadOnly(10, 20, 0, 1);
const obj = punkt.toJSON();

console.log(obj);
console.log(obj instanceof DOMPointReadOnly);

{ x: 10, y: 20, z: 0, w: 1 } false

Serialisieren mit JSON.stringify() und Wiederherstellen

const punkt = new DOMPoint(120.5, 48, 0, 1);

// JSON.stringify() ruft toJSON() automatisch auf
const json = JSON.stringify(punkt);
localStorage.setItem('letzterKlick', json);
console.log(json);

// Später: Punkt aus den gespeicherten Daten wiederherstellen
const daten = JSON.parse(localStorage.getItem('letzterKlick'));
const wiederhergestellt = DOMPoint.fromPoint(daten);
console.log(wiederhergestellt.x, wiederhergestellt.y);

{"x":120.5,"y":48,"z":0,"w":1} 120.5 48

Transformierte Mauskoordinaten an einen Server senden

const matrix = new DOMMatrix().translate(50, 25).scale(2);

document.addEventListener('click', async (event) => {
  const punkt = new DOMPoint(event.clientX, event.clientY)
    .matrixTransform(matrix);

  await fetch('/api/klicks', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ zeit: Date.now(), punkt })
  });
});

Momentaufnahme eines veränderbaren Punkts

const p = new DOMPoint(1, 2);
const snapshot = p.toJSON();

p.x = 99;
console.log(snapshot.x, p.x);

// Ohne toJSON wären die Koordinaten nicht sichtbar:
console.log(Object.keys(p).length, Object.keys(snapshot));

1 99 0 [ 'x', 'y', 'z', 'w' ]

// Wichtig · Fallstricke

Kein Punkt-Objekt: Der Rückgabewert hat keine Methoden wie matrixTransform(). Zum Weiterrechnen mit DOMPoint.fromPoint(obj) wieder einen Punkt erzeugen.
Spread und Object.assign(): { ...punkt } ergibt {}, weil die Koordinaten Getter auf dem Prototyp sind. Zum Kopieren punkt.toJSON() verwenden.
Sonderwerte: Enthält eine Koordinate NaN oder Infinity, liefert toJSON() diese Werte korrekt, JSON.stringify() macht daraus aber null.
structuredClone(): DOMPoint-Objekte sind serialisierbar und lassen sich auch per postMessage() oder structuredClone() übertragen, ohne den Umweg über JSON.
Kompatibilität: In allen modernen Browsern verfügbar und auch in Web Workern nutzbar. Der Internet Explorer unterstützt die Geometry-Interfaces nicht. In Node.js gibt es DOMPoint nicht von Haus aus.

Siehe auch

DOMPointReadOnly DOMPoint DOMPointReadOnly.fromPoint() DOMPointReadOnly.matrixTransform() DOMRectReadOnly.toJSON() JSON.stringify() PaymentResponse.toJSON()