Signatur
Beschreibung
Die Eigenschaft p2 gibt den zweiten der vier Eckpunkte eines DOMQuad als DOMPoint zurück. Ein DOMQuad beschreibt ein beliebiges Viereck mit den Punkten p1 bis p4. Es kann auch ein Viereck sein, das nicht rechtwinklig ist, zum Beispiel ein Rechteck nach einer Drehung, Scherung oder perspektivischen Transformation.
Wird das Viereck mit DOMQuad.fromRect() erzeugt, gilt diese Reihenfolge: p1 ist oben links (x, y), p2 oben rechts (x + width, y), p3 unten rechts und p4 unten links. p2 steht also für die rechte Seite der Oberkante.
Die Eigenschaft selbst ist schreibgeschützt. Du kannst p2 also kein anderes Objekt zuweisen. Das zurückgegebene DOMPoint-Objekt ist aber veränderbar, und es ist bei jedem Zugriff dasselbe Objekt ([SameObject]). Änderst du quad.p2.x oder quad.p2.y, änderst du damit direkt das Viereck. Methoden wie getBounds() berücksichtigen solche Änderungen sofort.
Typische Einsatzfälle sind Geometrie-Berechnungen für Canvas- und SVG-Zeichnungen, Kollisionsprüfungen und Hit-Tests bei transformierten Elementen. Außerdem kannst du einzelne Eckpunkte mit DOMMatrix.transformPoint() umrechnen.
Rückgabewert
x, y, z und w. Das Objekt ist veränderbar und direkt mit dem DOMQuad verbunden.Beispiele
Obere rechte Ecke eines Rechtecks auslesen
const quad = DOMQuad.fromRect({ x: 10, y: 20, width: 100, height: 50 });
// p2 entspricht (x + width, y)
const { x, y } = quad.p2;
console.log(`Obere rechte Ecke: ${x}, ${y}`);Eckpunkt verschieben und Begrenzungsrahmen neu berechnen
const quad = DOMQuad.fromRect({ x: 10, y: 20, width: 100, height: 50 });
// Das DOMPoint-Objekt ist veränderbar – die Änderung wirkt direkt auf das Viereck
quad.p2.x = 150;
const bounds = quad.getBounds();
console.log(bounds.x, bounds.y, bounds.width, bounds.height);Eckpunkt mit einer DOMMatrix transformieren
const quad = DOMQuad.fromRect({ x: 10, y: 20, width: 100, height: 50 });
// Erst skalieren (Faktor 2), dann um 30 px nach rechts verschieben
const matrix = new DOMMatrix().translate(30, 0).scale(2);
const transformed = matrix.transformPoint(quad.p2);
console.log(transformed.x, transformed.y);Konstruktor kopiert die übergebenen Punkte
const corner = new DOMPoint(100, 0);
const quad = new DOMQuad(
{ x: 0, y: 0 },
corner,
{ x: 100, y: 100 },
{ x: 0, y: 100 }
);
corner.x = 999; // ändert nur das Original
console.log(quad.p2.x); // die Kopie im Quad bleibt unverändert
console.log(quad.p2 === corner);// Wichtig · Fallstricke
- Schreibgeschützt, aber veränderbar:
quad.p2 = new DOMPoint()funktioniert nicht. Im nicht-strikten Modus wird die Zuweisung stillschweigend ignoriert, im strikten Modus löst sie einenTypeErroraus. Die Koordinaten des zurückgegebenen Punkts kannst du dagegen direkt ändern. - Kopie beim Erzeugen:
new DOMQuad(p1, p2, p3, p4)undDOMQuad.fromQuad()legen neueDOMPoint-Objekte an. Spätere Änderungen an den ursprünglich übergebenen Punkten wirken sich nicht auf das Viereck aus. - Reihenfolge der Ecken: Dass
p2oben rechts liegt, gilt nur fürfromRect()bzw. für Vierecke, die entsprechend aufgebaut wurden. Beim Konstruktor bestimmst du die Reihenfolge selbst. - Homogene Koordinaten: Nach perspektivischen Transformationen kann
wungleich 1 sein. Bei Bedarf teilst duxundydurchw. - Kompatibilität:
DOMQuadwird in allen modernen Browsern unterstützt und ist auch in Web Workern verfügbar, in Node.js jedoch nicht.element.getBoxQuads(), dasDOMQuad-Objekte für Elemente liefert, gibt es bislang nur in Firefox (teils hinter einem Schalter).