Signatur
Beschreibung
Die proprietäre Methode window.webkitConvertPointFromPageToNode() nimmt einen Punkt in Seitenkoordinaten und gibt dieselbe Stelle im lokalen Koordinatensystem eines Knotens zurück. Seitenkoordinaten zählen ab der linken oberen Ecke des Dokuments, also wie pageX/pageY bei Maus-Events. Der Ursprung des lokalen Systems liegt an der linken oberen Ecke der Box des Elements. Dabei werden auch CSS-Transformationen (z. B. rotate(), scale()) des Elements und seiner Vorfahren berücksichtigt. Das ist der Vorteil gegenüber einer einfachen Differenz mit getBoundingClientRect().
Typische Einsatzfälle waren Zeichenflächen, Drag-and-drop oder Treffertests auf gedrehten bzw. skalierten Elementen: Man will wissen, wo innerhalb des Elements geklickt wurde. Das Gegenstück ist window.webkitConvertPointFromNodeToPage().
Die Methode gehörte nie zu einem Standard. In Chromium wurde sie längst entfernt, Firefox hat sie nie unterstützt. Für neuen Code verwendet man getBoundingClientRect() zusammen mit DOMMatrix bzw. getComputedStyle().transform. Die Methode ist hier nur dokumentiert, damit man Altcode verstehen und migrieren kann.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $node Pflicht | Node | Der Knoten (meist ein Element), in dessen lokales Koordinatensystem umgerechnet wird. |
|
| $point Pflicht | WebKitPoint | Ein Punkt in Seitenkoordinaten, erzeugt mit new WebKitPoint(x, y). |
Rückgabewert
WebKitPoint mit den Eigenschaften x und y im Koordinatensystem von node.Beispiele
Klickposition innerhalb eines Elements (Altcode)
const box = document.querySelector('#canvas-box');
box.addEventListener('click', (event) => {
// Funktioniert nur in alten WebKit-Browsern
const pagePoint = new WebKitPoint(event.pageX, event.pageY);
const local = window.webkitConvertPointFromPageToNode(box, pagePoint);
console.log(`Lokal: ${local.x}, ${local.y}`);
});Funktionserkennung mit modernem Ersatz
const pageToNode = (node, pageX, pageY) => {
if (typeof window.webkitConvertPointFromPageToNode === 'function' &&
typeof window.WebKitPoint === 'function') {
const p = window.webkitConvertPointFromPageToNode(node, new WebKitPoint(pageX, pageY));
return { x: p.x, y: p.y };
}
// Ersatz ohne Transformationen: Seiten- in Viewport-Koordinaten umrechnen
const rect = node.getBoundingClientRect();
return {
x: pageX - (rect.left + window.scrollX),
y: pageY - (rect.top + window.scrollY)
};
};
const el = document.querySelector('#target');
document.addEventListener('pointerdown', (e) => {
console.log(pageToNode(el, e.pageX, e.pageY));
});Moderner Ersatz mit DOMMatrix für transformierte Elemente
// Berücksichtigt die Transformation des Elements selbst (Vorfahren nicht)
const pageToLocal = (el, pageX, pageY) => {
const style = getComputedStyle(el);
const matrix = new DOMMatrix(style.transform === 'none' ? undefined : style.transform);
// Ursprung von transform-origin in Seitenkoordinaten bestimmen
const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
const left = el.offsetLeft;
const top = el.offsetTop;
const pt = new DOMPoint(pageX - left - ox, pageY - top - oy);
const local = matrix.inverse().transformPoint(pt);
return { x: local.x + ox, y: local.y + oy };
};
const rotated = document.querySelector('.rotated');
rotated.addEventListener('click', (e) => {
console.log(pageToLocal(rotated, e.pageX, e.pageY));
});// Wichtig · Fallstricke
- Nicht standardisiert und veraltet: Die Methode steht in keiner Spezifikation. In Chromium wurde sie entfernt, Firefox hatte sie nie. Nicht in Produktionscode verwenden.
- Nur mit einem
WebKitPoint-Objekt aufrufbar. Ein einfaches Objekt wie{x, y}funktioniert nicht, undWebKitPointselbst gibt es ebenfalls nur in alten WebKit-Umgebungen. - Immer zuerst per Funktionserkennung prüfen (
typeof window.webkitConvertPointFromPageToNode === 'function'), sonst droht einTypeError. - Wichtig: Die Methode erwartet Seitenkoordinaten (
pageX/pageY), keine Viewport-Koordinaten (clientX/clientY). Wer beides verwechselt, erhält auf gescrollten Seiten falsche Werte. - Moderne Ersatzlösungen:
getBoundingClientRect(),DOMMatrix/DOMPointsowieoffsetX/offsetYbei Maus-Events. Die in der CSSOM-View-Spezifikation vorgeschlagene MethodeconvertPointFromNode()ist in keinem Browser allgemein verfügbar.