new DOMQuad() — Methode · JavaScript-Referenz

Signatur

new DOMQuad(p1, p2, p3, p4)

Beschreibung

Der Konstruktor DOMQuad() erzeugt ein Viereck aus vier beliebigen Punkten im zwei- bzw. dreidimensionalen Raum. Anders als ein DOMRect muss ein DOMQuad nicht achsenparallel sein. Deshalb eignet er sich gut, um transformierte Rechtecke darzustellen, etwa ein Element nach einer Drehung, Scherung oder perspektivischen Transformation.

Jedes der vier Argumente ist ein DOMPointInit-Wörterbuch, also ein Objekt mit den optionalen Feldern x, y, z und w. Du kannst auch ein vorhandenes DOMPoint übergeben. Aus jedem Argument wird intern ein neues DOMPoint erzeugt und in den Eigenschaften p1 bis p4 abgelegt. Lässt du ein Argument weg, wird der Punkt (0, 0, 0, 1) verwendet.

Üblicherweise gibt man die Punkte im Uhrzeigersinn an, beginnend oben links: p1 oben links, p2 oben rechts, p3 unten rechts, p4 unten links. Der Konstruktor prüft das aber nicht. Mit getBounds() bekommst du danach das achsenparallele Begrenzungsrechteck als DOMRect, mit toJSON() eine serialisierbare Darstellung.

Parameter

Name	Typ	Default	Beschreibung
$p1	DOMPointInit \| DOMPoint	{x: 0, y: 0, z: 0, w: 1}	Erster Eckpunkt, üblicherweise oben links. Wird als neues `DOMPoint` in `quad.p1` abgelegt.
$p2	DOMPointInit \| DOMPoint	{x: 0, y: 0, z: 0, w: 1}	Zweiter Eckpunkt, üblicherweise oben rechts.
$p3	DOMPointInit \| DOMPoint	{x: 0, y: 0, z: 0, w: 1}	Dritter Eckpunkt, üblicherweise unten rechts.
$p4	DOMPointInit \| DOMPoint	{x: 0, y: 0, z: 0, w: 1}	Vierter Eckpunkt, üblicherweise unten links.

Rückgabewert

Typ

DOMQuad

Beschreibung

Ein neues DOMQuad-Objekt. Seine Eigenschaften p1 bis p4 enthalten die Eckpunkte als veränderbare DOMPoint-Objekte.

Beispiele

Viereck anlegen und Begrenzungsrechteck ermitteln

const quad = new DOMQuad(
  { x: 10, y: 20 },
  { x: 110, y: 20 },
  { x: 110, y: 70 },
  { x: 10, y: 70 }
);

const bounds = quad.getBounds();
console.log(bounds.x, bounds.y, bounds.width, bounds.height);
console.log(quad.p3.z, quad.p3.w); // Standardwerte

10 20 100 50 0 1

Gedrehtes Rechteck mit DOMMatrix berechnen

// Rechteck 100×50 um 90° um den Ursprung drehen
const matrix = new DOMMatrix().rotate(90);

const corners = [
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 50 },
  { x: 0, y: 50 }
].map((p) => matrix.transformPoint(p));

const rotated = new DOMQuad(...corners);
const { x, y, width, height } = rotated.getBounds();

// Runden wegen Gleitkomma-Ungenauigkeiten bei sin/cos
console.log([x, y, width, height].map(Math.round));

[-50, 0, 50, 100]

Punkte nachträglich verändern

const quad = DOMQuad.fromRect({ x: 0, y: 0, width: 20, height: 10 });
console.log(quad.p3.x, quad.p3.y);

// p1..p4 sind echte DOMPoint-Objekte und veränderbar
quad.p2.x = 40;
quad.p3.x = 40;
console.log(quad.getBounds().width);
console.log(JSON.stringify(quad.toJSON().p2));

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

// Wichtig · Fallstricke

Kopien statt Referenzen: Übergebene DOMPoint-Objekte werden kopiert. Änderst du den ursprünglichen Punkt später, wirkt sich das nicht auf den Quad aus. Änderungen an quad.p1 usw. wirken dagegen direkt.
Keine Formprüfung: Der Konstruktor akzeptiert beliebige Punkte, auch sich überschneidende oder deckungsgleiche. Eine Reihenfolge im Uhrzeigersinn ist nur eine Konvention.
getBounds() wertet nur x und y aus: z und w werden ignoriert, es findet also keine Perspektivdivision statt. Bei perspektivischen Matrizen musst du die Punkte vorher selbst durch w teilen.
Kein Rechteck-Argument: Der Konstruktor nimmt kein DOMRect an. Für Rechtecke gibt es DOMQuad.fromRect(), zum Kopieren eines anderen Quads DOMQuad.fromQuad().
Kompatibilität: Wird von allen aktuellen Browsern unterstützt und ist auch in Web Workers verfügbar. Node.js hat ihn nicht eingebaut. Ohne new aufgerufen, wirft er einen TypeError.

Siehe auch

DOMQuad DOMQuad.prototype.getBounds() DOMQuad.fromRect() DOMQuad.fromQuad() DOMPoint DOMRect DOMMatrix