DOMQuad.fromRect() — Methode · JavaScript-Referenz

Signatur

DOMQuad.fromRect(other)

Beschreibung

Die statische Methode DOMQuad.fromRect() wandelt ein achsenparalleles Rechteck in ein Viereck (DOMQuad) um. Die vier Punkte werden im Uhrzeigersinn ab der linken oberen Ecke gesetzt:

p1 = (x, y)
p2 = (x + width, y)
p3 = (x + width, y + height)
p4 = (x, y + height)

Alle Punkte sind DOMPoint-Objekte mit z = 0 und w = 1. Anders als ein DOMRect kann ein DOMQuad auch beliebig gedrehte, gescherte oder perspektivisch verzerrte Vierecke darstellen. Deshalb ist fromRect() der typische Einstieg, wenn man ein Rechteck – etwa die Begrenzung eines Elements – mit einer DOMMatrix transformieren und anschließend dessen neue Eckpunkte oder die umschließende Box (getBounds()) bestimmen möchte.

Als Argument genügt jedes Objekt mit den Eigenschaften x, y, width und height (Dictionary DOMRectInit); ein echtes DOMRect ist nicht nötig. Fehlende Eigenschaften werden als 0 behandelt.

Parameter

Name	Typ	Default	Beschreibung
$other	DOMRectInit \| DOMRect \| DOMRectReadOnly	{}	Rechteck mit den Eigenschaften `x`, `y`, `width` und `height` (jeweils `number`, Standard `0`). Ohne Argument entsteht ein Viereck, dessen vier Punkte alle auf (0, 0) liegen.

Rückgabewert

Typ

DOMQuad

Beschreibung

Ein neues DOMQuad, dessen Punkte p1 bis p4 die Ecken des übergebenen Rechtecks sind.

Beispiele

Viereck aus einem Rechteck-Objekt erzeugen

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

for (const key of ['p1', 'p2', 'p3', 'p4']) {
  const { x, y } = quad[key];
  console.log(`${key}: (${x}, ${y})`);
}

p1: (10, 20) p2: (110, 20) p3: (110, 70) p4: (10, 70)

Rechteck drehen und umschließende Box berechnen

const quad = DOMQuad.fromRect(new DOMRect(0, 0, 100, 50));
const matrix = new DOMMatrix().rotate(90);

// Jeden Eckpunkt mit der Matrix transformieren
const rotated = new DOMQuad(
  matrix.transformPoint(quad.p1),
  matrix.transformPoint(quad.p2),
  matrix.transformPoint(quad.p3),
  matrix.transformPoint(quad.p4)
);

const b = rotated.getBounds();
console.log(
  Math.round(b.x), Math.round(b.y),
  Math.round(b.width), Math.round(b.height)
);

-50 0 50 100

Element-Begrenzung als Viereck weiterverarbeiten

const box = document.querySelector('#karte').getBoundingClientRect();
const quad = DOMQuad.fromRect(box);

// Beispiel: Ist ein Klickpunkt innerhalb der Grenzen?
document.addEventListener('click', (event) => {
  const bounds = quad.getBounds();
  const inside =
    event.clientX >= bounds.left && event.clientX <= bounds.right &&
    event.clientY >= bounds.top && event.clientY <= bounds.bottom;
  console.log(inside ? 'Klick auf Karte' : 'Klick daneben');
});

Klick auf Karte

// Wichtig · Fallstricke

Keine Live-Verknüpfung: Das erzeugte DOMQuad ist eine Kopie. Änderst du später das ursprüngliche DOMRect, bleibt das Viereck unverändert.
Negative Breite/Höhe werden nicht normalisiert: Die Punkte ergeben sich direkt aus x + width bzw. y + height. Erst getBounds() liefert wieder ein Rechteck mit positiver Ausdehnung.
Bei Transformationen (z. B. Drehung um 90°) entstehen Gleitkomma-Ungenauigkeiten wie 6.1e-15 statt 0 – vor Vergleichen runden.
DOMQuad besitzt keine eigene transform()-Methode; Punkte müssen einzeln mit DOMMatrix.prototype.transformPoint() umgerechnet werden.
Kompatibilität: In allen aktuellen Browsern verfügbar, auch in Web Workern. Der Internet Explorer unterstützt die Geometry-Schnittstellen nicht. In Node.js existiert DOMQuad nicht nativ.

Siehe auch

DOMQuad DOMQuad.fromQuad() DOMQuad.prototype.getBounds() DOMRect DOMPoint Element.prototype.getBoundingClientRect()