DOMPoint.fromPoint() — Methode · JavaScript-Referenz

Signatur

DOMPoint.fromPoint(sourcePoint)

Beschreibung

DOMPoint.fromPoint() erzeugt ein neues DOMPoint-Objekt aus einem Quellpunkt. Die Quelle muss kein echter DOMPoint sein: Jedes Objekt, das dem Wörterbuch DOMPointInit entspricht, reicht aus, also auch ein einfaches Objekt wie { x: 10, y: 20 }. Fehlende Koordinaten werden ergänzt: x, y und z mit 0, w mit 1.

Die Methode eignet sich gut, um eine unabhängige, veränderbare Kopie eines Punktes zu erzeugen, etwa aus einem schreibgeschützten DOMPointReadOnly. Außerdem wandelt sie Koordinaten aus eigenen Datenstrukturen wie Mausdaten oder JSON in einen DOMPoint um, der sich dann mit matrixTransform() durch eine DOMMatrix transformieren lässt.

Das Ergebnis ist immer ein neues Objekt. Änderungen daran wirken sich nicht auf die Quelle aus. Wer nur lesen will, kann stattdessen DOMPointReadOnly.fromPoint() verwenden, das ein unveränderliches Objekt liefert.

Parameter

Name	Typ	Default	Beschreibung
$sourcePoint	DOMPointInit \| DOMPoint \| DOMPointReadOnly	{}	Objekt mit den optionalen Eigenschaften `x`, `y`, `z` (Standardwert je `0`) und `w` (Standardwert `1`). Fehlt das Argument, entsteht der Punkt `(0, 0, 0, 1)`.

Rückgabewert

Typ

DOMPoint

Beschreibung

Ein neues, veränderbares DOMPoint-Objekt mit den Koordinaten der Quelle bzw. den Standardwerten.

Beispiele

Punkt aus einfachem Objekt erzeugen

const p = DOMPoint.fromPoint({ x: 100, y: 50 });
console.log(p.x, p.y, p.z, p.w);

100 50 0 1

Veränderbare Kopie eines schreibgeschützten Punktes

const readOnly = new DOMPointReadOnly(10, 20);
const copy = DOMPoint.fromPoint(readOnly);
copy.x += 5; // erlaubt, da DOMPoint veränderbar ist
console.log(readOnly.x, copy.x);

10 15

Mausposition mit einer Matrix transformieren

const matrix = new DOMMatrix().translate(50, 0).rotate(90);

document.addEventListener('click', (event) => {
  const point = DOMPoint.fromPoint({ x: event.clientX, y: event.clientY });
  const transformed = point.matrixTransform(matrix);
  console.log(`Transformiert: ${transformed.x.toFixed(1)}, ${transformed.y.toFixed(1)}`);
});

z. B. "Transformiert: -150.0, 100.0" bei Klick auf (100, 200)

// Wichtig · Fallstricke

Nicht-numerische Werte werden in Zahlen umgewandelt. Aus { x: 'abc' } entsteht x = NaN, ein Fehler wird dabei nicht geworfen.
Die Methode ist statisch. Ein Aufruf über eine Instanz wie point.fromPoint() funktioniert nicht.
Die Quelle wird nicht verändert. Das Ergebnis ist eine flache Kopie der vier Zahlenwerte.
Die Methode wird von allen modernen Browsern unterstützt, auch in Web Workern. Im alten Edge (EdgeHTML) und im Internet Explorer fehlt sie. Node.js stellt DOMPoint nicht standardmäßig bereit.

Siehe auch

DOMPoint DOMPointReadOnly.fromPoint() DOMPointReadOnly.matrixTransform() DOMMatrix DOMRect.fromRect() CropTarget.fromElement() new PointerEvent()