new DOMPoint() — Methode · JavaScript-Referenz

Signatur

new DOMPoint(x, y, z, w)

Beschreibung

Der Konstruktor DOMPoint() erzeugt einen Punkt im 2D- oder 3D-Koordinatenraum. Alle vier Argumente sind optional. Fehlende Werte für x, y und z werden zu 0, fehlt w, wird es zu 1. Im Gegensatz zu DOMPointReadOnly lassen sich die Eigenschaften eines DOMPoint nach dem Erzeugen ändern.

Gebraucht wird DOMPoint vor allem zusammen mit DOMMatrix: Mit point.matrixTransform(matrix) oder matrix.transformPoint(point) rechnet man Koordinaten zwischen Koordinatensystemen um, etwa bei CSS-Transformationen, auf dem Canvas (ctx.getTransform()) oder in SVG. Auch DOMQuad und manche Canvas-Methoden wie roundRect() nehmen DOMPoint-Objekte oder gleichwertige Objekte entgegen.

Willst du einen Punkt aus einem vorhandenen Objekt wie {x, y} erzeugen, nimmst du besser die statische Methode DOMPoint.fromPoint() statt den Konstruktor mit einzelnen Werten aufzurufen.

Parameter

Name	Typ	Default	Beschreibung
$x	number	0	Die `x`-Koordinate des Punkts.
$y	number	0	Die `y`-Koordinate des Punkts.
$z	number	0	Die `z`-Koordinate (Tiefe) des Punkts.
$w	number	1	Die Perspektivkomponente (homogene Koordinate). Bei normalen Punkten bleibt sie `1`.

Rückgabewert

Typ

DOMPoint

Beschreibung

Ein neues, veränderbares DOMPoint-Objekt mit den angegebenen Werten.

Beispiele

Punkte mit Standardwerten erzeugen

const origin = new DOMPoint();
const p2d = new DOMPoint(100, 50);
const p3d = new DOMPoint(10, 20, 30);

console.log(origin.x, origin.y, origin.z, origin.w);
console.log(p2d.toJSON());

// Werte lassen sich nachträglich ändern
p3d.z = 5;
console.log(p3d.z);

0 0 0 1 { x: 100, y: 50, z: 0, w: 1 } 5

Punkt mit einer DOMMatrix transformieren

// Um 90° drehen und dann um (10, 0) verschieben
const matrix = new DOMMatrix().translate(10, 0).rotate(90);
const point = new DOMPoint(5, 0);

const result = point.matrixTransform(matrix);
console.log(Math.round(result.x), Math.round(result.y));

10 5

Mausposition in Canvas-Koordinaten umrechnen

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(200, 100);
ctx.scale(2, 2);

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const screenPoint = new DOMPoint(
    event.clientX - rect.left,
    event.clientY - rect.top
  );
  // Inverse Transformation: Bildschirm -> Zeichenkoordinaten
  const inverse = ctx.getTransform().invertSelf();
  const local = screenPoint.matrixTransform(inverse);
  console.log(`Lokal: ${local.x.toFixed(1)}, ${local.y.toFixed(1)}`);
});

z. B. bei Klick auf (220, 120): Lokal: 10.0, 10.0

// Wichtig · Fallstricke

Standardwert von w: w ist standardmäßig 1 und nicht 0. Setzt du w auf 0, behandeln Transformationen den Wert als Richtungsvektor, Verschiebungen wirken dann nicht mehr.
Typumwandlung: Die Argumente werden in Zahlen umgewandelt. new DOMPoint('5') ergibt x = 5, Werte, die sich nicht umwandeln lassen, ergeben NaN. Es wird kein Fehler ausgelöst.
Nur mit new: Ohne new löst der Aufruf einen TypeError aus.
matrixTransform() gibt immer einen neuen Punkt zurück, der ursprüngliche Punkt bleibt unverändert.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt, auch in Web Workers. Den älteren, nicht standardisierten WebKitPoint solltest du nicht mehr verwenden. In Node.js gibt es DOMPoint nicht von Haus aus.

Siehe auch

DOMPoint DOMPointReadOnly DOMPoint.fromPoint() DOMPointReadOnly.prototype.matrixTransform() DOMMatrix DOMQuad DOMRect