DOMQuad.toJSON() — Methode · JavaScript-Referenz

Signatur

DOMQuad.prototype.toJSON()

Beschreibung

Die Methode toJSON() wandelt ein DOMQuad in ein einfaches Objekt um. Es enthält die Eigenschaften p1, p2, p3 und p4, also die vier Eckpunkte des Vierecks. Jeder Punkt wird beim Serialisieren als Objekt mit x, y, z und w ausgegeben.

Direkt aufrufen musst du die Methode meist nicht. JSON.stringify() ruft toJSON() automatisch auf, sobald ein DOMQuad serialisiert wird. Ohne diese Methode käme bei Plattform-Objekten wie DOMQuad nur {} heraus, weil ihre Eigenschaften als Getter am Prototyp liegen und nicht als eigene Eigenschaften der Instanz.

Typische Einsätze sind das Speichern von Geometrie in localStorage, das Übertragen per postMessage() oder fetch() und das Protokollieren von Transformationsergebnissen. Aus den serialisierten Daten baust du mit DOMQuad.fromQuad() wieder ein vollwertiges DOMQuad.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit den Eigenschaften p1, p2, p3 und p4. Jede davon steht für einen Punkt mit x, y, z und w.

Beispiele

Viereck direkt serialisieren

const quad = new DOMQuad(
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 50 },
  { x: 0, y: 50 }
);

// JSON.stringify ruft toJSON() automatisch auf
console.log(JSON.stringify(quad.toJSON().p3));
console.log(JSON.stringify(quad));

{"x":100,"y":50,"z":0,"w":1} {"p1":{"x":0,"y":0,"z":0,"w":1},"p2":{"x":100,"y":0,"z":0,"w":1},"p3":{"x":100,"y":50,"z":0,"w":1},"p4":{"x":0,"y":50,"z":0,"w":1}}

In localStorage speichern und wiederherstellen

const quad = DOMQuad.fromRect({ x: 10, y: 20, width: 30, height: 40 });

// Speichern
localStorage.setItem('auswahl', JSON.stringify(quad));

// Später wiederherstellen
const daten = JSON.parse(localStorage.getItem('auswahl'));
const wiederhergestellt = DOMQuad.fromQuad(daten);

console.log(wiederhergestellt instanceof DOMQuad);
console.log(wiederhergestellt.p3.x, wiederhergestellt.p3.y);

true 40 60

Transformiertes Viereck an einen Server senden

const rechteck = { x: 0, y: 0, width: 200, height: 100 };
const matrix = new DOMMatrix().rotate(45);

// Eckpunkte einzeln transformieren
const quad = DOMQuad.fromRect(rechteck);
const gedreht = new DOMQuad(
  matrix.transformPoint(quad.p1),
  matrix.transformPoint(quad.p2),
  matrix.transformPoint(quad.p3),
  matrix.transformPoint(quad.p4)
);

const senden = async () => {
  const antwort = await fetch('/api/geometrie', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ form: gedreht })
  });
  console.log(antwort.status);
};

senden();

200 (abhängig vom Server)

// Wichtig · Fallstricke

Keine tiefe Kopie in reinen Werten: Je nach Implementierung (Web-IDL-Standard-toJSON) sind p1–p4 im Rückgabeobjekt noch DOMPoint-Instanzen. Erst JSON.stringify() wandelt sie in reine Zahlen-Objekte um. Wenn du garantiert reine Daten brauchst, nimm JSON.parse(JSON.stringify(quad)).
Das Ergebnis ist kein DOMQuad: Methoden wie getBounds() fehlen. Die Begrenzungsbox wird auch nicht mitserialisiert. Zum Wiederherstellen nutzt du DOMQuad.fromQuad().
Nicht-endliche Werte: NaN und Infinity in Koordinaten werden von JSON.stringify() zu null. Das Wiederherstellen ergibt dann 0 oder unerwartete Werte.
Für postMessage() und structuredClone() ist toJSON() nicht nötig. DOMQuad ist direkt serialisierbar (structured clone).
Kompatibilität: in allen aktuellen Browsern verfügbar, nicht im Internet Explorer. In Node.js gibt es DOMQuad nicht.

Siehe auch

DOMQuad DOMQuad.fromQuad() DOMQuad.fromRect() DOMQuad.getBounds() JSON.stringify() ContactAddress.toJSON()