如何使用JavaScript获取缩放后点的原始位置

方案一：鼠标点击坐标转原始画布坐标 #

将鼠标在页面上的点击位置，转换为缩放前的原始画布坐标，直接和存储的点位置对比。

// 鼠标点击事件处理函数
function handleCanvasClick(e) {
  // 已知参数（替换为你的实际值）
  const scale = 1.5; // 当前缩放比例
  const canvasLeft = document.getElementById('yourCanvas').offsetLeft; // 画布页面左偏移
  const canvasTop = document.getElementById('yourCanvas').offsetTop; // 画布页面上偏移
  const newOriginLeft = 80; // 缩放后的新原点相对于原始画布的左偏移
  const newOriginTop = 60; // 缩放后的新原点相对于原始画布的上偏移

  // 计算鼠标在画布内的相对坐标
  const mouseCanvasX = e.pageX - canvasLeft;
  const mouseCanvasY = e.pageY - canvasTop;

  // 转换为原始画布坐标
  const originalX = (mouseCanvasX - newOriginLeft) / scale;
  const originalY = (mouseCanvasY - newOriginTop) / scale;

  // 此处用originalX、originalY和存储的点位置对比，执行后续操作
  // 示例：if (Math.abs(originalX - storedPoint.x) < 5 && Math.abs(originalY - storedPoint.y) < 5) { ... }
}

方案二：原始点坐标转缩放后画布坐标 #

将存储的原始点位置，转换为缩放后的画布坐标，和鼠标点击的画布内坐标对比。

// 存储的原始点数据
const storedPoint = { x: 100, y: 100 };

// 已知参数（替换为你的实际值）
const scale = 1.5;
const canvasLeft = document.getElementById('yourCanvas').offsetLeft;
const canvasTop = document.getElementById('yourCanvas').offsetTop;
const newOriginLeft = 80;
const newOriginTop = 60;

// 转换为缩放后的画布内坐标
const scaledCanvasX = storedPoint.x * scale + newOriginLeft;
const scaledCanvasY = storedPoint.y * scale + newOriginTop;

// 如果需要和鼠标页面坐标对比，加上画布的页面偏移
const scaledPageX = scaledCanvasX + canvasLeft;
const scaledPageY = scaledCanvasY + canvasTop;

// 此处用scaledCanvasX/scaledCanvasY（或scaledPageX/scaledPageY）和鼠标坐标对比

关键注意事项 #

• 确保所有坐标参数的基准统一，全部使用像素单位
• 若画布使用了CSS缩放（如transform: scale()），需确保scale变量对应绘图逻辑中的缩放比例，而非CSS缩放值
• 调试时可打印转换前后的坐标值，验证是否符合预期

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