Point — Schnittstelle · JavaScript-Referenz

Signatur

interface Point

Beschreibung

Das Interface Point beschreibt einen Punkt in einer Ebene. Es hat nur die zwei Eigenschaften x und y (Zahlen in CSS-Pixeln). In der Praxis gab es das Interface nur in WebKit-basierten Browsern und nur unter dem Namen WebKitPoint. Man erzeugte es mit new WebKitPoint(x, y).

Gebraucht wurde es vor allem von den ebenfalls proprietären Methoden window.webkitConvertPointFromNodeToPage() und window.webkitConvertPointFromPageToNode(). Damit ließen sich Koordinaten zwischen dem Koordinatensystem eines (eventuell per CSS transformierten) Elements und dem der Seite umrechnen.

Für neuen Code solltest du Point nicht mehr verwenden. Der standardisierte Ersatz ist DOMPoint bzw. DOMPointReadOnly. Beide kennen zusätzlich z und w und bieten die Methode matrixTransform(). Zusammen mit DOMMatrix und getBoundingClientRect() kannst du damit Koordinaten zuverlässig in allen modernen Browsern umrechnen.

Parameter

Name	Typ	Default	Beschreibung
$x	number	0	Horizontale Koordinate des Punkts (Konstruktor-Argument von `WebKitPoint` bzw. Eigenschaft `point.x`).
$y	number	0	Vertikale Koordinate des Punkts (Konstruktor-Argument von `WebKitPoint` bzw. Eigenschaft `point.y`).

Rückgabewert

Typ

Point

Beschreibung

Ein Objekt mit den änderbaren Zahlen-Eigenschaften x und y. In modernen Browsern ist stattdessen ein DOMPoint zu verwenden.

Beispiele

Punkt erzeugen – mit Fallback auf DOMPoint

// WebKitPoint gibt es nur in sehr alten WebKit-Browsern
const createPoint = (x, y) =>
  typeof window.WebKitPoint === 'function'
    ? new window.WebKitPoint(x, y)
    : new DOMPoint(x, y);

const p = createPoint(120, 45);
console.log(p.x, p.y);

120 45

Seitenkoordinaten in Elementkoordinaten umrechnen (moderner Ersatz)

// Früher: window.webkitConvertPointFromPageToNode(el, new WebKitPoint(x, y))
const pageToNode = (el, pageX, pageY) => {
  const rect = el.getBoundingClientRect();
  return new DOMPoint(
    pageX - (rect.left + window.scrollX),
    pageY - (rect.top + window.scrollY)
  );
};

document.addEventListener('click', (event) => {
  const local = pageToNode(document.body, event.pageX, event.pageY);
  console.log(`Lokal: ${local.x.toFixed(0)}, ${local.y.toFixed(0)}`);
});

Lokal: 230, 118 (je nach Klickposition)

Punkt mit einer Transformationsmatrix verschieben und drehen

// DOMPoint kann – anders als Point – Matrizen anwenden
const point = new DOMPoint(10, 0);
const matrix = new DOMMatrix().translate(50, 50).rotate(90);
const moved = point.matrixTransform(matrix);

console.log(Math.round(moved.x), Math.round(moved.y));

50 60

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: Point bzw. WebKitPoint war nie Teil einer Spezifikation. Chrome, Firefox und aktuelle Safari-Versionen kennen es nicht. Ein Aufruf von new WebKitPoint() wirft dort einen ReferenceError.
Es gibt keine globale Konstruktor-Funktion namens Point. Ein Aufruf von new Point() scheitert in allen Browsern, außer du hast selbst eine solche Klasse definiert.
Auch webkitConvertPointFromNodeToPage() und webkitConvertPointFromPageToNode() sind entfernt worden. Nutze stattdessen getBoundingClientRect(), DOMMatrix und DOMPoint.prototype.matrixTransform().
Prüfe vorhandene APIs immer per Feature-Erkennung (typeof window.WebKitPoint === 'function') und nicht anhand des User-Agent.
Bei Elementen mit CSS-Transformationen liefert getBoundingClientRect() nur den umschließenden Rahmen. Für exakte Umrechnungen musst du die Matrix aus getComputedStyle(el).transform invertieren.

Siehe auch

DOMPoint DOMPointReadOnly DOMMatrix DOMRect Element.getBoundingClientRect() Window.webkitConvertPointFromNodeToPage()