Signatur
Beschreibung
Die statische Methode DOMPointReadOnly.fromPoint() erzeugt einen neuen, schreibgeschützten Punkt im 2D- oder 3D-Koordinatenraum. Als Quelle dient ein Objekt, das dem DOMPointInit-Wörterbuch entspricht, also optional die Eigenschaften x, y, z und w besitzt. Das kann ein einfaches Objektliteral sein, aber auch ein bestehender DOMPoint oder DOMPointReadOnly.
Die Methode eignet sich besonders, um aus veränderlichen Daten (z. B. einem DOMPoint oder Mauskoordinaten) eine unveränderliche Momentaufnahme zu erzeugen. Da Eigenschaften eines DOMPointReadOnly nicht überschrieben werden können, lässt sich so verhindern, dass anderer Code versehentlich Koordinaten ändert.
Fehlende Eigenschaften werden mit Standardwerten belegt: x, y und z mit 0, die perspektivische Komponente w mit 1. Zusätzliche Eigenschaften des Quellobjekts werden ignoriert. Das Ergebnis ist immer eine neue, unabhängige Kopie – spätere Änderungen an der Quelle wirken sich nicht aus.
Typische Einsatzgebiete sind Geometrie-Berechnungen zusammen mit DOMMatrix (z. B. matrixTransform()), Canvas- und SVG-Anwendungen sowie WebXR.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $sourcePoint | DOMPointInit | DOMPoint | DOMPointReadOnly | object | {} | Objekt mit den optionalen numerischen Eigenschaften x, y, z (Standard jeweils 0) und w (Standard 1). Wird der Parameter weggelassen, entsteht der Punkt (0, 0, 0, 1). |
Rückgabewert
DOMPointReadOnly-Objekt mit den aus sourcePoint übernommenen bzw. standardmäßig belegten Koordinaten.Beispiele
Punkt aus einem Objektliteral erzeugen
const punkt = DOMPointReadOnly.fromPoint({ x: 100, y: 50 });
console.log(punkt.x, punkt.y, punkt.z, punkt.w);
console.log(punkt instanceof DOMPointReadOnly);Unveränderliche Kopie eines DOMPoint anlegen
const beweglich = new DOMPoint(10, 20, 30);
const snapshot = DOMPointReadOnly.fromPoint(beweglich);
// Quelle ändern – der Snapshot bleibt unberührt
beweglich.x = 999;
// Schreibversuch wird ignoriert (im Strict Mode: TypeError)
try {
'use strict';
snapshot.x = 5;
} catch (e) {
console.log('Nicht änderbar:', e.constructor.name);
}
console.log(beweglich.x, snapshot.x);Mausposition festhalten und transformieren
const canvas = document.querySelector('canvas');
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const klick = DOMPointReadOnly.fromPoint({
x: event.clientX - rect.left,
y: event.clientY - rect.top
});
// Um 45° drehen und um 2 skalieren
const matrix = new DOMMatrix().rotate(45).scale(2);
const transformiert = klick.matrixTransform(matrix);
console.log('Original:', klick.toJSON());
console.log('Transformiert:', transformiert.x.toFixed(1), transformiert.y.toFixed(1));
});// Wichtig · Fallstricke
- Nur lesbar: Zuweisungen an
x,y,zoderwwerden im Sloppy Mode stillschweigend ignoriert und werfen in Klassen, Modulen und im Strict Mode einenTypeError. Brauchen Sie einen veränderlichen Punkt, nehmen SieDOMPoint.fromPoint(). - Standardwert von
wist1, nicht0. Das ist wichtig für homogene Koordinaten bei Matrix-Transformationen. - Nicht-numerische Werte werden nach den WebIDL-Regeln in
unrestricted doubleumgewandelt;'abc'ergibt z. B.NaN, ohne dass ein Fehler geworfen wird. matrixTransform()gibt einen neuen (veränderlichen)DOMPointzurück, keinenDOMPointReadOnly.- Kompatibilität: unterstützt in allen aktuellen Browsern (Chrome, Edge, Firefox, Safari) und in Web Workern; der Internet Explorer unterstützt die Methode nicht. In Node.js gibt es sie nicht nativ.