Canvas应用缩放后如何正确计算画布坐标？

核心问题分析 #

你当前的坐标转换逻辑只适配缩放级别为1的情况，没有考虑translate和scale组合变换的逆运算。画布上下文的变换会改变像素的显示位置，需要将屏幕鼠标坐标反向应用这些变换，才能得到正确的画布原始像素索引。

修复步骤 #

1. 修正缩放函数的变换累积问题

每次缩放前先重置画布上下文的变换矩阵，避免多次缩放导致变换叠加混乱：

zoom(e: WheelEvent) {
  this.zoomLevel -= e.deltaY * 0.01;
  this.zoomLevel = Math.round(Math.max(1, Math.min(this.zoomLevel, 10)));
  this.resizeCanvas();

  const rect = this.canvas.getBoundingClientRect();

  if (this.zoomLevel == 1) {
    this.originX = 0;
    this.originY = 0;
  } else {
    this.originX = Math.round((e.clientX - rect.left) / (rect.right - rect.left) * this.dimensions[0]);
    this.originY = Math.round((e.clientY - rect.top) / (rect.bottom - rect.top) * this.dimensions[1]);
  }

  // 重置变换矩阵，避免多次缩放的变换累积
  this.ctx.setTransform(1, 0, 0, 1, 0, 0);
  // 重新应用平移和缩放变换
  this.ctx.translate(this.originX, this.originY);
  this.ctx.scale(this.zoomLevel, this.zoomLevel);
  this.ctx.translate(-this.originX, -this.originY);

  this.drawAllPixels();
}

2. 修正鼠标坐标转像素索引的计算逻辑

根据画布的变换矩阵，反向推导原始像素坐标：

onHover(e: any) {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  const rect = this.canvas.getBoundingClientRect();

  // 计算鼠标相对于canvas元素的位置
  const mouseRelativeX = mouseX - rect.left;
  const mouseRelativeY = mouseY - rect.top;

  // 反向应用变换，得到原始像素坐标
  const pixelX = Math.floor(
    (mouseRelativeX - this.originX * (1 - this.zoomLevel)) / this.zoomLevel
  );
  const pixelY = Math.floor(
    (mouseRelativeY - this.originY * (1 - this.zoomLevel)) / this.zoomLevel
  );

  // 确保坐标在画布有效范围内
  const clampedX = Math.max(0, Math.min(pixelX, this.dimensions[0] - 1));
  const clampedY = Math.max(0, Math.min(pixelY, this.dimensions[1] - 1));

  const p = this.pixelArr.find(item => item.x === clampedX && item.y === clampedY);
  this.drawPreviewPixel(clampedX, clampedY, p?.color);
}

原理说明 #

画布应用的变换逻辑是：
显示坐标 = (原始像素坐标 - originX) * zoomLevel + originX

逆变换（从显示坐标还原原始像素坐标）就是：
原始像素坐标 = (显示坐标 - originX * (1 - zoomLevel)) / zoomLevel

其中显示坐标就是鼠标相对于canvas元素的位置，通过这个逆变换就能在任意缩放和平移状态下，准确获取鼠标对应的原始像素索引。

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