JavaScript Canvas旋转图像后鼠标点击坐标计算问题求助

问题核心：你当前的旋转操作是在绘制图像和标记时临时执行translate(中心)+rotate，但这个旋转没有被纳入canvas上下文的持久变换矩阵里。而getTransformedPoint只反转了拖拽、缩放带来的上下文变换，完全没考虑旋转的影响，所以旋转后鼠标坐标反转计算时漏掉了旋转的逆变换，导致标记位置偏移。

修复方案（统一变换管理，推荐） #

把旋转、缩放、拖拽都统一维护为canvas上下文的持久变换，这样所有操作的变换都能被getTransformedPoint正确反转，同时绘制时不需要再临时加旋转：

1. 修改drawImageToCanvas，不再临时做translate和rotate，直接用上下文当前的变换绘制：

function drawImageToCanvas() {
  // 重置画布并清除
  context.save();
  context.setTransform(1, 0, 0, 1, 0, 0);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.restore();

  // 绘制图像：以canvas中心为基准，先把图像的中心移到原点对应位置
  context.save();
  context.translate(-100, -100);
  context.drawImage(image, 0, 0, 200, 200);
  context.restore();

  drawPoints();
}

2. 修改旋转滑块的事件，把旋转操作加入到上下文的持久变换中（围绕canvas中心旋转）：

rotateSlider.addEventListener("input", function () {
  const angleDiff = this.value - rotationAngle;
  rotationAngle = this.value;
  
  // 围绕canvas中心执行旋转变换
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  context.translate(centerX, centerY);
  context.rotate((angleDiff * Math.PI) / 180);
  context.translate(-centerX, -centerY);
  
  drawImageToCanvas();
});

3. 修改drawPoints，不需要再临时做translate和rotate，直接用上下文变换绘制：

function drawPoints() {
  context.save();
  const radius = 10;
  context.lineWidth = 3;
  context.strokeStyle = "#FFFF00";
  context.filter = "none";
  points.forEach((item) => {
    context.beginPath();
    context.arc(item.x, item.y, radius, 0, 2 * Math.PI, false);
    context.stroke();
  });
  context.restore();
}

4. 重置按钮需要重置整个上下文变换：

buttonReset.addEventListener("click", function (event) {
  rotateSlider.value = 0;
  rotationAngle = 0;
  // 重置所有变换为初始状态
  context.setTransform(1, 0, 0, 1, 0, 0);
  drawImageToCanvas();
});

另一种快速修复（不重构变换逻辑） #

如果不想重构现有代码，只需要修改getTransformedPoint，手动加入旋转的逆变换计算：

function getTransformedPoint(x, y) {
  const centerX = canvas.width / 2;
  const centerY = canvas.height / 2;
  
  // 1. 将鼠标点转换为以canvas中心为原点的相对坐标
  const relativeX = x - centerX;
  const relativeY = y - centerY;
  
  // 2. 应用旋转角度的逆变换
  const rad = (-rotationAngle * Math.PI) / 180;
  const rotatedX = relativeX * Math.cos(rad) - relativeY * Math.sin(rad);
  const rotatedY = relativeX * Math.sin(rad) + relativeY * Math.cos(rad);
  
  // 3. 转换回原坐标系
  const preRotatedPoint = new DOMPoint(rotatedX + centerX, rotatedY + centerY);
  
  // 4. 再应用上下文现有变换的反转
  return context.getTransform().invertSelf().transformPoint(preRotatedPoint);
}

修改后，右键点击的标记就能正确匹配旋转后的图像位置了，旋转前的标记也依然会跟着图像正确旋转。

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