JavaScript：将全局坐标转换至带transform的HTMLElement本地空间

安全阿岳

2026-7-28

全局鼠标坐标转带CSS Transform元素的本地坐标方案

当元素的父级应用了CSS transform（如scale）时，直接用常规方法计算坐标会出现偏差，这里提供一个和ActionScript 3中DisplayObject#globalToLocal功能完全一致的实现：

核心实现代码

function globalToLocal(element, globalX, globalY) {
  const ctm = element.getScreenCTM();
  if (!ctm) return { x: 0, y: 0 };

  const inverseMatrix = ctm.inverse();
  const globalPoint = new DOMPoint(globalX, globalY);
  const localPoint = globalPoint.matrixTransform(inverseMatrix);

  return { x: localPoint.x, y: localPoint.y };
}

代码说明

getScreenCTM()：获取元素到屏幕坐标系的完整变换矩阵，包含所有父级CSS transform的影响
inverse()：生成变换矩阵的逆矩阵，用于将全局坐标反向映射到元素本地坐标系
DOMPoint.matrixTransform()：通过逆矩阵完成坐标转换，得到元素内部的本地坐标

使用示例

// 监听鼠标点击事件，转换坐标
document.addEventListener('click', (e) => {
  const target = document.querySelector('.transformed-element');
  const localPos = globalToLocal(target, e.clientX, e.clientY);
  console.log(`本地坐标：x=${localPos.x.toFixed(2)}, y=${localPos.y.toFixed(2)}`);
});