如何计算经平移、缩放、滚动后图像原始像素的点击位置

一、滚动条拖拽视图的坐标修正 #

滚动条的偏移是视图相对于画布的位移，不能用百分比计算偏移，必须结合缩放比例做线性叠加。正确的转换逻辑：

1. 先计算鼠标相对于滚动容器的位置（减去容器在屏幕上的偏移）
2. 加上滚动容器的scrollLeft/scrollTop，得到鼠标相对于画布原始左上角的位置
3. 除以当前缩放比例，得到原始像素坐标

示例代码（假设用原生JS实现）：

function getOriginalCoords(clientX, clientY) {
  const container = document.getElementById('grid-container');
  const containerRect = container.getBoundingClientRect();
  const scale = 2; // 当前缩放比例，根据实际值替换

  // 鼠标在容器内的相对位置
  const relX = clientX - containerRect.left;
  const relY = clientY - containerRect.top;

  // 结合滚动偏移和缩放比例计算原始坐标
  const originalX = (relX + container.scrollLeft) / scale;
  const originalY = (relY + container.scrollTop) / scale;

  return { x: originalX, y: originalY };
}

二、鼠标移出画布可见范围的坐标处理 #

问题出在鼠标移出后，未基于容器边界计算相对位置，而是依赖画布的事件触发范围。解决方式是维护全局的平移偏移量，统一处理滚动条拖拽和鼠标画布拖拽的位移：

1. 初始化全局平移变量：

let panOffsetX = 0;
let panOffsetY = 0;

2. 滚动条拖拽时，同步更新平移偏移：

container.addEventListener('scroll', () => {
  panOffsetX = container.scrollLeft;
  panOffsetY = container.scrollTop;
});

3. 鼠标拖拽画布平移时，更新平移偏移（通过mousedown/mousemove事件实现）：

let isDragging = false;
let lastMouseX, lastMouseY;

canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const dx = e.clientX - lastMouseX;
  const dy = e.clientY - lastMouseY;
  
  // 更新平移偏移，同步滚动条位置
  panOffsetX -= dx;
  panOffsetY -= dy;
  container.scrollLeft = panOffsetX;
  container.scrollTop = panOffsetY;

  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

4. 统一的坐标转换函数（无论鼠标是否在画布内都有效）：

function screenToCanvas(clientX, clientY) {
  const containerRect = container.getBoundingClientRect();
  const mouseXInContainer = clientX - containerRect.left;
  const mouseYInContainer = clientY - containerRect.top;
  
  return {
    x: (mouseXInContainer + panOffsetX) / scale,
    y: (mouseYInContainer + panOffsetY) / scale
  };
}

关于bbox与缩放交互的澄清 #

bbox（边界框）是画布元素的原始尺寸，缩放时是对整个bbox进行缩放，平移是改变视图相对于bbox的位置。坐标转换的核心是：屏幕坐标 → 容器内相对坐标 → 加上平移偏移得到bbox内的绝对坐标 → 除以缩放比例得到原始像素坐标。之前的错误大概率是混淆了平移偏移的方向，或者没有将滚动偏移和平移偏移统一维护。

不要依赖框架的canvasx/canvasy方法，自己封装转换函数能更清晰地控制每一步逻辑，方便排查问题。

内容的提问来源于stack exchange，提问作者Marco Cassar