DOMQuad.p4 — Eigenschaft · JavaScript-Referenz

Signatur

DOMQuad.p4

Beschreibung

Die Eigenschaft p4 eines DOMQuad liefert ein DOMPoint-Objekt, das den vierten der vier Eckpunkte des Vierecks darstellt. Ein DOMQuad beschreibt ein beliebiges Viereck, z. B. ein durch CSS-Transformationen gedrehtes oder verzerrtes Rechteck. Die vier Punkte p1 bis p4 werden der Reihe nach verbunden.

Wird das Viereck mit DOMQuad.fromRect() aus einem Rechteck erzeugt, gilt folgende Zuordnung: p1 = oben links, p2 = oben rechts, p3 = unten rechts und p4 = unten links, also (x, y + height).

Die Eigenschaft selbst ist schreibgeschützt: Man kann p4 kein neues Objekt zuweisen. Das gelieferte DOMPoint ist jedoch veränderbar, und es wird immer dasselbe Objekt zurückgegeben. Änderungen an quad.p4.x oder quad.p4.y wirken sich also direkt auf das Viereck aus, zum Beispiel auf das Ergebnis von getBounds().

Typische Einsatzgebiete sind Geometrieberechnungen für transformierte Elemente, Trefferprüfungen (Hit-Testing), Zeichnen auf Canvas und das Umrechnen von Koordinaten mit DOMMatrix.

Rückgabewert

Typ

DOMPoint

Beschreibung

Der vierte Eckpunkt des Vierecks mit den Eigenschaften x, y, z und w. Es ist ein veränderbares Objekt, das bei jedem Zugriff dasselbe bleibt.

Beispiele

Linke untere Ecke eines Rechtecks auslesen

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

const { x, y, z, w } = quad.p4;
console.log(`p4 = (${x}, ${y}, ${z}, ${w})`);

p4 = (10, 70, 0, 1)

Viereck über p4 verzerren und die Begrenzung neu berechnen

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

// p4 ist live: Das Ändern des Punktes verändert das Viereck direkt
quad.p4.x = 0;

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

0 20 110 50

Konstruktor: Punkte werden kopiert, fehlendes p4 bekommt Standardwerte

const ecke = new DOMPoint(0, 80);
const quad = new DOMQuad({ x: 0, y: 0 }, { x: 80, y: 0 }, { x: 80, y: 80 }, ecke);

ecke.x = 999; // betrifft das Viereck NICHT, denn es wurde eine Kopie angelegt
console.log(quad.p4.x, quad.p4 === ecke);

const ohneP4 = new DOMQuad({ x: 1, y: 1 });
console.log(ohneP4.p4.toJSON());

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

p4 mit einer DOMMatrix transformieren

const quad = DOMQuad.fromRect({ x: 0, y: 0, width: 100, height: 50 });
const drehung = new DOMMatrix().rotate(90);

const gedreht = drehung.transformPoint(quad.p4);
console.log(Math.round(gedreht.x), Math.round(gedreht.y));

-50 0

// Wichtig · Fallstricke

Nur lesbar: quad.p4 = new DOMPoint() hat keine Wirkung. Im Strict Mode (z. B. in ES-Modulen) löst die Zuweisung einen TypeError aus. Ändern Sie stattdessen die Koordinaten des vorhandenen Punktes.
Veränderbares Objekt: Wer quad.p4 an andere Stellen weitergibt, gibt eine Referenz weiter. Änderungen dort verändern auch das Viereck. Bei Bedarf mit DOMPoint.fromPoint(quad.p4) eine Kopie anlegen.
„Unten links“ gilt nur für fromRect(): Bei new DOMQuad(...) oder nach Transformationen kann p4 an jeder beliebigen Stelle liegen.
Wird im Konstruktor kein Wert für p4 übergeben, gilt (0, 0, 0, 1).
Kompatibilität: DOMQuad wird in allen modernen Browsern unterstützt und ist auch in Web Workern verfügbar. Die Methode Element.getBoxQuads(), die DOMQuad-Objekte für Elemente liefert, gibt es bisher nur in Firefox und nur experimentell.

Siehe auch

DOMQuad DOMQuad.p1 DOMQuad.p2 DOMQuad.p3 DOMQuad.prototype.getBounds() DOMPoint DOMMatrix