Window.webkitConvertPointFromNodeToPage() — Methode · JavaScript-Referenz

Signatur

Window.webkitConvertPointFromNodeToPage(node, point)

Beschreibung

Die proprietäre Methode window.webkitConvertPointFromNodeToPage() nimmt einen Punkt entgegen, der im lokalen Koordinatensystem eines Elements angegeben ist. Der Ursprung liegt dabei in der linken oberen Ecke des Elements. Zurück kommt derselbe Punkt in Seitenkoordinaten, also relativ zur linken oberen Ecke des gesamten Dokuments. Die Methode berücksichtigt auch CSS-Transformationen wie rotate(), scale() oder 3D-Transformationen, die auf dem Element oder seinen Vorfahren liegen.

Typische Einsatzfälle waren Tooltips, Drag-and-Drop-Markierungen oder Overlays, die genau an einem bestimmten Punkt innerhalb eines gedrehten oder skalierten Elements erscheinen sollten. Mit getBoundingClientRect() allein geht das nicht exakt, weil diese Methode nur das achsenparallele Begrenzungsrechteck liefert.

Die Gegenrichtung übernimmt window.webkitConvertPointFromPageToNode(). Beide Methoden gehörten nie zu einem Standard. Sie gab es nur in WebKit-basierten Browsern, und dort wurden sie inzwischen entfernt. In neuem Code sollten Sie sie nicht mehr verwenden. Nutzen Sie stattdessen getBoundingClientRect() zusammen mit window.scrollX/scrollY, oder berechnen Sie Transformationen selbst mit DOMMatrix.

Parameter

Name	Typ	Default	Beschreibung
$node Pflicht	Node		Der DOM-Knoten (meist ein `Element`), in dessen lokalem Koordinatensystem `point` angegeben ist.
$point Pflicht	WebKitPoint		Der umzurechnende Punkt, erzeugt mit `new WebKitPoint(x, y)`. Die Werte sind in CSS-Pixeln relativ zur linken oberen Ecke von `node` angegeben.

Rückgabewert

Typ

WebKitPoint

Beschreibung

Ein neuer WebKitPoint mit den Eigenschaften x und y. Er beschreibt dieselbe Position in Seitenkoordinaten, also relativ zum Dokumentursprung und nicht zum Viewport.

Beispiele

Einfache Umrechnung mit Funktionsprüfung

const box = document.querySelector('#box');

if (typeof window.webkitConvertPointFromNodeToPage === 'function' &&
    typeof WebKitPoint === 'function') {
  // Punkt 10/20 innerhalb von #box
  const local = new WebKitPoint(10, 20);
  const page = window.webkitConvertPointFromNodeToPage(box, local);
  console.log(`Seitenkoordinaten: ${page.x}, ${page.y}`);
} else {
  console.log('webkitConvertPointFromNodeToPage wird nicht unterstützt');
}

webkitConvertPointFromNodeToPage wird nicht unterstützt

Browserübergreifender Ersatz (ohne Transformationen)

// Ersatzfunktion: rechnet lokale Element- in Seitenkoordinaten um
const nodeToPage = (el, x, y) => {
  if (typeof window.webkitConvertPointFromNodeToPage === 'function') {
    const p = window.webkitConvertPointFromNodeToPage(el, new WebKitPoint(x, y));
    return { x: p.x, y: p.y };
  }
  const rect = el.getBoundingClientRect();
  return {
    x: rect.left + window.scrollX + x,
    y: rect.top + window.scrollY + y
  };
};

const box = document.createElement('div');
box.style.cssText = 'position:absolute;left:100px;top:50px;width:200px;height:100px';
document.body.append(box);

console.log(nodeToPage(box, 10, 20));

{ x: 110, y: 70 }

Tooltip an einem Punkt eines Elements platzieren

const target = document.querySelector('#chart');
const tooltip = document.querySelector('#tooltip');

const showTooltipAt = (localX, localY, text) => {
  const rect = target.getBoundingClientRect();
  const pageX = rect.left + window.scrollX + localX;
  const pageY = rect.top + window.scrollY + localY;

  tooltip.textContent = text;
  tooltip.style.position = 'absolute';
  tooltip.style.left = `${pageX}px`;
  tooltip.style.top = `${pageY}px`;
};

// Tooltip 40px rechts und 15px unterhalb der Ecke von #chart
showTooltipAt(40, 15, 'Maximalwert');

// Wichtig · Fallstricke

Nicht standardisiert und entfernt: Die Methode gab es nur in WebKit/Safari und kurzzeitig in frühen Chrome-Versionen. Firefox hat sie nie unterstützt. In aktuellen Browsern fehlt sie, auch der Konstruktor WebKitPoint existiert dort nicht mehr. Prüfen Sie daher immer mit typeof window.webkitConvertPointFromNodeToPage === 'function', ob sie vorhanden ist.
Seiten- statt Viewport-Koordinaten: Das Ergebnis bezieht sich auf das Dokument und nicht auf den sichtbaren Ausschnitt. Beim eigenen Ersatz müssen Sie deshalb window.scrollX/scrollY zu den Werten von getBoundingClientRect() addieren.
Transformationen: Der einfache Ersatz mit getBoundingClientRect() ist nur ohne Drehung oder Verzerrung exakt. Bei transformierten Elementen setzen Sie die Matrix aus getComputedStyle(el).transform mit DOMMatrix selbst zusammen und wenden sie über DOMPoint.matrixTransform() an.
Ungültige Argumente: Fehlt ein Argument oder ist es ungültig, liefern ältere Implementierungen null statt einer Ausnahme.

Siehe auch

Window.webkitConvertPointFromPageToNode() Element.getBoundingClientRect() Window.scrollX DOMMatrix DOMPoint Window.getDefaultComputedStyle() Window.requestFileSystem()