DOMQuad.fromQuad() — Methode · JavaScript-Referenz

Signatur

DOMQuad.fromQuad(other)

Beschreibung

DOMQuad.fromQuad() erzeugt ein neues DOMQuad-Objekt aus einem Viereck, das durch vier Punkte beschrieben ist. Als Argument dient entweder ein vorhandenes DOMQuad oder ein einfaches Objekt im Format DOMQuadInit, also { p1, p2, p3, p4 }. Jeder Punkt ist dabei ein DOMPointInit-Objekt mit den optionalen Eigenschaften x, y, z und w.

Jeder Punkt wird intern mit DOMPoint.fromPoint() kopiert. Das Ergebnis ist deshalb eine tiefe Kopie: Wenn du die Punkte des neuen Vierecks änderst, bleibt das ursprüngliche Objekt unverändert. Das hilft, wenn du ein Viereck vor einer Transformation sichern oder aus serialisierten Daten (z. B. JSON, postMessage) wieder ein echtes DOMQuad mit Methoden wie getBounds() herstellen willst.

Im Unterschied zum Konstruktor new DOMQuad(p1, p2, p3, p4) erhält fromQuad() ein einzelnes Objekt mit benannten Punkten. Wenn du von einem Rechteck ausgehst, nimm stattdessen DOMQuad.fromRect().

Parameter

Name	Typ	Default	Beschreibung
$other	DOMQuad \| DOMQuadInit	{}	Objekt mit den Eigenschaften `p1`, `p2`, `p3` und `p4` (jeweils ein `DOMPointInit`). Fehlt ein Punkt, gilt `{ x: 0, y: 0, z: 0, w: 1 }`.

Rückgabewert

Typ

DOMQuad

Beschreibung

Ein neues DOMQuad mit Kopien der übergebenen Punkte.

Beispiele

Unabhängige Kopie eines Vierecks anlegen

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

const kopie = DOMQuad.fromQuad(original);
kopie.p1.x = 10; // ändert nur die Kopie

console.log(original.p1.x, kopie.p1.x);

0 10

DOMQuad nach JSON-Serialisierung wiederherstellen

const quad = new DOMQuad(
  { x: 20, y: 30 },
  { x: 120, y: 30 },
  { x: 120, y: 130 },
  { x: 20, y: 130 }
);

// z. B. in localStorage speichern oder per postMessage senden
const json = JSON.stringify(quad);

// Nach dem Parsen liegt nur ein einfaches Objekt vor – ohne Methoden
const daten = JSON.parse(json);
const wiederhergestellt = DOMQuad.fromQuad(daten);

const { x, y, width, height } = wiederhergestellt.getBounds();
console.log(x, y, width, height);

20 30 100 100

Fallstrick: fehlende Punkte werden zum Ursprung

// p4 wurde vergessen
const quad = DOMQuad.fromQuad({
  p1: { x: 10, y: 10 },
  p2: { x: 60, y: 10 },
  p3: { x: 60, y: 40 }
});

console.log(quad.p4.x, quad.p4.y, quad.p4.w);

const bounds = quad.getBounds();
console.log(bounds.x, bounds.y, bounds.width, bounds.height);

0 0 1 0 0 60 40

// Wichtig · Fallstricke

Fehlende Punkte werfen keinen Fehler. Sie werden still auf (0, 0, 0, 1) gesetzt, was die Begrenzungsbox aus getBounds() unbemerkt verfälschen kann. Prüfe Eingabedaten deshalb vorher.
Die Eigenschaften p1 bis p4 kannst du nicht neu zuweisen. Die enthaltenen DOMPoint-Objekte lassen sich aber ändern.
Die Methode ist nicht dasselbe wie der Konstruktor: new DOMQuad() erwartet vier einzelne Punkt-Argumente, fromQuad() ein Objekt mit benannten Punkten.
Kompatibilität: Chrome, Edge, Firefox und Safari unterstützen die Methode, der Internet Explorer nicht. In Node.js gibt es DOMQuad nicht ohne Polyfill.

Siehe auch

DOMQuad DOMQuad.fromRect() DOMQuad.prototype.getBounds() DOMQuad.prototype.toJSON() DOMPoint.fromPoint() DOMRect new TaskController()