DOMQuad.getBounds() — Methode · JavaScript-Referenz

Signatur

DOMQuad.prototype.getBounds()

Beschreibung

getBounds() berechnet die achsenparallele Begrenzungsbox (Bounding Box) eines Vierecks. Aus den x- und y-Koordinaten der vier Punkte p1 bis p4 wird jeweils das Minimum und Maximum bestimmt. Das Ergebnis ist ein neues DOMRect mit x = min(x), y = min(y), width = max(x) − min(x) und height = max(y) − min(y).

Nützlich ist das vor allem, wenn ein Rechteck durch eine Transformation (Drehung, Scherung, Perspektive) zu einem beliebigen Viereck geworden ist und man trotzdem eine einfache Rechteckfläche braucht, etwa für eine grobe Kollisionsprüfung, Hit-Testing, Clipping, Dirty-Region-Berechnungen im Canvas oder die Positionierung von Tooltips.

Die Methode verändert das DOMQuad nicht. Sie liefert bei jedem Aufruf eine neue, unabhängige DOMRect-Instanz, die den Zustand der Punkte zum Zeitpunkt des Aufrufs widerspiegelt. Ändert man später die Punkte, muss man getBounds() erneut aufrufen.

Rückgabewert

Typ

DOMRect

Beschreibung

Ein neues DOMRect, dessen x, y, width und height das kleinste achsenparallele Rechteck um die vier Eckpunkte beschreiben.

Beispiele

Begrenzungsbox eines schiefen Vierecks

const quad = new DOMQuad(
  { x: 10, y: 0 },
  { x: 50, y: 20 },
  { x: 40, y: 60 },
  { x: 0, y: 40 }
);

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

0 0 50 60

Gedrehtes Rechteck: Bounding Box nach Transformation

const rect = new DOMRect(0, 0, 100, 50);
const matrix = new DOMMatrix().rotate(45);

// Alle vier Ecken des Rechtecks transformieren
const src = DOMQuad.fromRect(rect);
const rotated = new DOMQuad(
  matrix.transformPoint(src.p1),
  matrix.transformPoint(src.p2),
  matrix.transformPoint(src.p3),
  matrix.transformPoint(src.p4)
);

const b = rotated.getBounds();
console.log([b.x, b.y, b.width, b.height].map(n => n.toFixed(2)).join(', '));

-35.36, 0.00, 106.07, 106.07

Grobe Kollisionsprüfung zweier Vierecke

const overlaps = (a, b) =>
  a.left < b.right && a.right > b.left &&
  a.top < b.bottom && a.bottom > b.top;

const ship = new DOMQuad({ x: 0, y: 0 }, { x: 30, y: 10 }, { x: 20, y: 40 }, { x: -10, y: 30 });
const rock = DOMQuad.fromRect({ x: 25, y: 35, width: 20, height: 20 });

// Schnelle Vorprüfung per Bounding Box, exakter Test erst bei Treffer
console.log(overlaps(ship.getBounds(), rock.getBounds()));

true

// Wichtig · Fallstricke

Nur eine Näherung: Die Box ist achsenparallel. Bei gedrehten Vierecken ist sie oft deutlich größer als die eigentliche Fläche. Als exakter Kollisionstest taugt sie daher nicht, als schnelle Vorprüfung aber schon.
Die w-Komponente wird ignoriert: In die Berechnung gehen nur x und y der Punkte ein. Homogene Koordinaten mit w ≠ 1, etwa nach perspektivischen Transformationen, werden nicht durch w geteilt. Diese Normierung muss man bei Bedarf vorher selbst vornehmen.
NaN pflanzt sich fort: Ist eine Koordinate NaN, enthält auch das Ergebnis NaN-Werte.
Veraltete Eigenschaft bounds: Ältere Spezifikationsentwürfe und alte Firefox-Versionen hatten eine Eigenschaft quad.bounds. Nutze stattdessen getBounds().
Kompatibilität: DOMQuad und getBounds() funktionieren in allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) sowie in Web Workern. Die DOM-Methode getBoxQuads(), die DOMQuad-Objekte für Elemente liefert, gibt es dagegen praktisch nur in Firefox.

Siehe auch

DOMQuad DOMQuad.fromRect() DOMQuad.fromQuad() DOMRect DOMPoint Element.getBoundingClientRect()