Signatur
Beschreibung
DOMRectReadOnly.fromRect() ist eine statische Fabrikmethode. Sie nimmt ein beliebiges Objekt entgegen, das dem Wörterbuch DOMRectInit entspricht, also die Eigenschaften x, y, width und height hat. Daraus erzeugt sie ein neues DOMRectReadOnly. Fehlende Eigenschaften werden mit 0 belegt.
Die Methode ist praktisch, wenn Sie ein Rechteck aus vorhandenen Daten bauen wollen. Das können etwa Werte aus JSON, aus einem Canvas-Layout oder ein DOMRect von getBoundingClientRect() sein. Der Konstruktor new DOMRectReadOnly(x, y, width, height) braucht einzelne Argumente. fromRect() nimmt dagegen direkt ein Objekt entgegen. So lässt sich ein bestehendes Rechteck leicht als unveränderliche Kopie festhalten.
Das Ergebnis stellt zusätzlich die berechneten Eigenschaften top, right, bottom und left bereit. Alle Eigenschaften sind schreibgeschützt. Wenn Sie ein veränderbares Rechteck brauchen, verwenden Sie DOMRect.fromRect().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $rect | DOMRectInit | DOMRect | DOMRectReadOnly | Object | {} | Objekt mit den optionalen Eigenschaften x, y, width und height (jeweils number, Standardwert 0). Ohne Argument entsteht ein Rechteck, bei dem alle Werte 0 sind. |
Rückgabewert
Beispiele
Rechteck aus einem einfachen Objekt erzeugen
const rect = DOMRectReadOnly.fromRect({ x: 10, y: 20, width: 100, height: 50 });
console.log(rect.left, rect.top, rect.right, rect.bottom);
console.log(rect instanceof DOMRectReadOnly);Unveränderliche Momentaufnahme einer Elementposition
const box = document.querySelector('body');
// Position zum aktuellen Zeitpunkt als schreibgeschützte Kopie festhalten
const snapshot = DOMRectReadOnly.fromRect(box.getBoundingClientRect());
snapshot.width = 9999; // wird ignoriert, im strict mode TypeError
console.log(snapshot.width === box.getBoundingClientRect().width);Fehlende Werte und Überschneidungsprüfung
const a = DOMRectReadOnly.fromRect({ width: 50, height: 50 }); // x = y = 0
const b = DOMRectReadOnly.fromRect({ x: 40, y: 40, width: 30, height: 30 });
const intersects = (r1, r2) =>
r1.left < r2.right && r2.left < r1.right &&
r1.top < r2.bottom && r2.top < r1.bottom;
console.log(a.x, a.y, intersects(a, b));Aus JSON serialisieren und wiederherstellen
const original = DOMRectReadOnly.fromRect({ x: 5, y: 5, width: 20, height: 10 });
const json = JSON.stringify(original.toJSON());
const restored = DOMRectReadOnly.fromRect(JSON.parse(json));
console.log(json);
console.log(restored.right);// Wichtig · Fallstricke
- Negative Breite oder Höhe sind erlaubt. Dann gilt z. B.
left=x + width.left,top,rightundbottomgeben immer die richtig sortierten Kanten zurück. - Nur die Eigenschaften
x,y,widthundheightwerden ausgewertet. Die Wertetop,left,rightundbottomim übergebenen Objekt werden ignoriert. - Nicht-numerische Werte werden in Zahlen umgewandelt. Dabei kann
NaNentstehen, ohne dass ein Fehler geworfen wird. - Schreiben auf Eigenschaften hat keine Wirkung. Im strict mode, also auch in ES-Modulen, wird ein
TypeErrorgeworfen. - Kompatibilität: in allen aktuellen Browsern und in Web Workern verfügbar. Ältere Safari-Versionen vor 14.1 unterstützen
fromRect()nicht. Verwenden Sie dort den Konstruktornew DOMRectReadOnly(x, y, w, h). In Node.js gibt es die Methode nicht.