DOMQuad.p1 — Eigenschaft · JavaScript-Referenz

Signatur

DOMQuad.p1

Beschreibung

p1 ist einer der vier Eckpunkte (p1 bis p4) eines DOMQuad. Ein DOMQuad beschreibt ein beliebiges Viereck, zum Beispiel ein Rechteck, das mit einer DOMMatrix gedreht, geschert oder perspektivisch verzerrt wurde. Die Ecken sind der Reihe nach angeordnet. Wird das Viereck mit DOMQuad.fromRect() aus einem Rechteck erzeugt, ist p1 die linke obere Ecke (x, y). Danach folgen die übrigen Ecken im Uhrzeigersinn: p2 rechts oben, p3 rechts unten, p4 links unten.

Die Eigenschaft selbst ist schreibgeschützt. Man kann p1 also kein neues Objekt zuweisen. Das zurückgegebene Objekt ist aber ein veränderbarer DOMPoint und kein DOMPointReadOnly. Außerdem liefert jeder Zugriff dasselbe Objekt ([SameObject]). Ändert man quad.p1.x oder quad.p1.y, ändert sich deshalb direkt das Viereck, und ein späterer Aufruf von getBounds() berücksichtigt die neuen Werte.

Typische Einsatzgebiete sind Geometrie-Berechnungen: Man bestimmt, wo ein transformiertes Element auf dem Bildschirm liegt, prüft Treffer (Hit-Testing) oder zeichnet in Canvas oder SVG Umrisse gedrehter Elemente nach. Da DOMPoint auch z und w kennt, lassen sich 3D- und perspektivische Transformationen abbilden.

Rückgabewert

Typ

DOMPoint

Beschreibung

Die erste Ecke des Vierecks als veränderbarer DOMPoint mit x, y, z und w. Jeder Zugriff liefert dasselbe Objekt. Wurde beim Konstruktor kein Punkt angegeben, ist der Wert {x: 0, y: 0, z: 0, w: 1}.

Beispiele

Viereck aus vier Punkten erzeugen und p1 auslesen

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

const { x, y, z, w } = quad.p1;
console.log(quad.p1 instanceof DOMPoint);
console.log(x, y, z, w);

true 10 20 0 1

p1 eines Rechtecks ist die linke obere Ecke

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

console.log(`p1: (${quad.p1.x}, ${quad.p1.y})`);
console.log(`p3: (${quad.p3.x}, ${quad.p3.y})`);

p1: (50, 30) p3: (250, 130)

p1 direkt verändern – getBounds() berücksichtigt die Änderung

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

// Gleiches Objekt bei jedem Zugriff
console.log(quad.p1 === quad.p1);

// Ecke nach links oben ziehen
quad.p1.x = -20;
quad.p1.y = -10;

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

// Neu zuweisen geht nicht (wird ignoriert bzw. TypeError im Strict Mode)
// quad.p1 = new DOMPoint(5, 5);

true -20 -10 120 60

Gedrehtes Rechteck: Position der ersten Ecke berechnen

const rect = { x: 0, y: 0, width: 100, height: 100 };
// Um 45° um die Mitte (50, 50) drehen
const matrix = new DOMMatrix()
  .translate(50, 50)
  .rotate(45)
  .translate(-50, -50);

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

console.log(rotated.p1.x.toFixed(2), rotated.p1.y.toFixed(2));

50.00 -20.71

// Wichtig · Fallstricke

Schreibgeschützt, aber veränderbar: quad.p1 = … hat keine Wirkung und löst im Strict Mode einen TypeError aus. Die Koordinaten des Punkts (quad.p1.x usw.) lassen sich dagegen direkt ändern, und das Viereck ändert sich mit. Wer einen unabhängigen Punkt braucht, sollte ihn mit DOMPoint.fromPoint(quad.p1) kopieren.
Reihenfolge der Ecken: Nur bei fromRect() ist p1 sicher die linke obere Ecke. Beim Konstruktor oder bei fromQuad() ist p1 einfach der erste übergebene Punkt, egal wo er liegt.
Homogene Koordinaten: Nach perspektivischen Transformationen kann w ungleich 1 sein. Für die Bildschirmkoordinaten muss man dann x / w und y / w rechnen.
Kompatibilität: DOMQuad und p1 gibt es in allen aktuellen Browsern, auch in Web Workern. Element.getBoxQuads(), die natürliche Quelle für solche Vierecke, ist dagegen nicht standardübergreifend verfügbar (bisher nur Firefox). In der Praxis baut man DOMQuad-Objekte deshalb meist selbst aus getBoundingClientRect() und einer DOMMatrix.

Siehe auch

DOMQuad DOMQuad.p2 DOMQuad.p3 DOMQuad.p4 DOMQuad.getBounds() DOMQuad.fromRect() DOMPoint DOMMatrix