DOMQuad.p3 — Eigenschaft · JavaScript-Referenz

Signatur

get DOMQuad.p3

Beschreibung

DOMQuad.p3 gibt den dritten der vier Eckpunkte eines Vierecks (DOMQuad) als DOMPoint zurück. Die Punkte p1 bis p4 sind der Reihe nach angeordnet. Erzeugt man ein Quad mit DOMQuad.fromRect(), gilt: p1 ist oben links, p2 oben rechts, p3 unten rechts und p4 unten links.

Die Eigenschaft selbst ist schreibgeschützt: Man kann p3 kein neues Objekt zuweisen. Der zurückgegebene DOMPoint lässt sich aber verändern. Wenn du quad.p3.x oder quad.p3.y änderst, verformst du das Viereck direkt. Das wirkt sich auch auf das Ergebnis von getBounds() aus.

Nützlich ist p3 vor allem, wenn du mit transformierten Formen arbeitest, etwa nach einer Drehung, Scherung oder perspektivischen Verzerrung durch eine DOMMatrix. Nach so einer Transformation ist ein Rechteck meist kein achsenparalleles Rechteck mehr. Mit p1 bis p4 bekommst du dann trotzdem die genauen Eckpunkte, zum Beispiel für Kollisionsprüfungen, Hit-Tests oder zum Zeichnen auf einem Canvas.

Rückgabewert

Typ

DOMPoint

Beschreibung

Der dritte Eckpunkt des Vierecks mit den Eigenschaften x, y, z und w. Es wird bei jedem Zugriff dasselbe veränderbare Objekt zurückgegeben.

Beispiele

Untere rechte Ecke eines Rechtecks ermitteln

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

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

p3 = (110, 70, 0, 1)

Quad mit einer DOMMatrix transformieren

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

// Erst mit Faktor 2 skalieren, dann um (5, 5) verschieben
const matrix = new DOMMatrix().translate(5, 5).scale(2);

const transformed = new DOMQuad(
  matrix.transformPoint(quad.p1),
  matrix.transformPoint(quad.p2),
  matrix.transformPoint(quad.p3),
  matrix.transformPoint(quad.p4)
);

console.log(transformed.p3.x, transformed.p3.y);

225 145

Eckpunkt direkt verschieben und die Bounding-Box prüfen

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

// p3 ist schreibgeschützt, der DOMPoint selbst aber nicht
quad.p3.x = 200;
quad.p3.y = 120;

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

190 100

Eigenes Viereck anlegen und auf einem Canvas zeichnen

const quad = new DOMQuad(
  { x: 20, y: 20 },
  { x: 180, y: 40 },
  { x: 160, y: 140 },
  { x: 40, y: 120 }
);

const ctx = document.querySelector('canvas').getContext('2d');
ctx.beginPath();
for (const p of [quad.p1, quad.p2, quad.p3, quad.p4]) {
  ctx.lineTo(p.x, p.y);
}
ctx.closePath();
ctx.stroke();

console.log(quad.p3.toJSON());

{x: 160, y: 140, z: 0, w: 1}

// Wichtig · Fallstricke

Schreibgeschützt, aber veränderbar: quad.p3 = new DOMPoint() hat keine Wirkung (im Strict Mode gibt es einen TypeError). Die Koordinaten des zurückgegebenen Punkts lassen sich aber ändern, und das Quad ändert sich mit. Wenn du das nicht willst, erzeuge eine Kopie mit DOMPoint.fromPoint(quad.p3).
Der Konstruktor kopiert: new DOMQuad(p1, p2, p3, p4) übernimmt die Werte der übergebenen Punkte. Wenn du den ursprünglichen DOMPoint danach änderst, bleibt das Quad unverändert.
Welche Ecke p3 ist, hängt von der Erzeugung ab: Nur bei fromRect() ist p3 sicher die untere rechte Ecke. Bei eigenen Vierecken oder nach einer Drehung liegt p3 dort, wo die Eingabe bzw. die Transformation ihn hinlegt.
Rundungsfehler: Nach Drehungen mit DOMMatrix.rotate() können winzige Gleitkomma-Abweichungen entstehen, zum Beispiel 6.1e-15 statt 0. Vergleiche Koordinaten deshalb mit einer Toleranz.
Kompatibilität: DOMQuad gibt es in allen aktuellen Browsern. In Node.js ist es ohne Polyfill nicht vorhanden. Element.getBoxQuads(), das DOMQuad-Objekte für Elemente liefern würde, ist dagegen kaum unterstützt (nur experimentell in Firefox).

Siehe auch

DOMQuad DOMQuad.p1 DOMQuad.p2 DOMQuad.p4 DOMQuad.getBounds() DOMQuad.fromRect() DOMPoint