Canvas信息获取及缩放绘图时坐标校正问题咨询

嘿，我明白你现在遇到的痛点——缩放画布后，鼠标坐标总是对不上，画出来的东西不在预想的位置对吧？这个问题其实是因为你没有正确地将屏幕坐标逆变换映射回原始画布坐标，单纯用高度比例相乘肯定不够，因为还要考虑平移偏移和组合变换的影响。让我一步步给你拆解解决方案：

一、核心问题：坐标逆变换的正确姿势 #

当你对画布进行缩放（ctx.scale()）和平移（ctx.translate()）后，画布上下文的坐标系已经被修改了。而鼠标事件返回的clientX/clientY是相对于屏幕的坐标，要得到原始画布上的正确位置，需要做两步转换：

1. 先得到鼠标相对于Canvas元素的坐标 #

首先要排除Canvas元素在页面中的位置偏移，还要考虑元素本身的CSS缩放（比如你用transform: scale()放大了Canvas元素）。用getBoundingClientRect()可以精准获取元素的视口位置和缩放后的尺寸：

const rect = canvas.getBoundingClientRect();
// 计算鼠标在Canvas元素内的相对坐标（已修正元素的CSS缩放）
const elemX = (event.clientX - rect.left) / (rect.width / canvas.width);
const elemY = (event.clientY - rect.top) / (rect.height / canvas.height);

这里rect.width / canvas.width就是元素的CSS缩放比例，用它来修正坐标，得到的elemX/elemY是相对于Canvas原始像素尺寸的坐标，但还没考虑上下文的变换。

2. 逆应用画布上下文的变换矩阵 #

画布上下文的变换（缩放、平移）会形成一个变换矩阵，我们需要对elemX/elemY应用逆矩阵，才能得到原始画布的坐标。现代Canvas API提供了getTransform()和DOMMatrix来处理这个：

function getOriginalCanvasCoords(event, canvas, ctx) {
  const rect = canvas.getBoundingClientRect();
  const elemX = (event.clientX - rect.left) / (rect.width / canvas.width);
  const elemY = (event.clientY - rect.top) / (rect.height / canvas.height);
  
  // 获取当前上下文的变换矩阵，然后创建它的逆矩阵
  const transform = ctx.getTransform();
  const inverseMatrix = new DOMMatrix(transform).invertSelf();
  
  // 用逆矩阵转换坐标
  const originalPoint = inverseMatrix.transformPoint(new DOMPoint(elemX, elemY));
  return { x: originalPoint.x, y: originalPoint.y };
}

调用这个函数，你就能拿到缩放平移后，鼠标在原始画布上的准确位置了！

二、为什么你之前的方法无效？ #

你尝试用(zoomHeight/screenHeight)来校正，只考虑了单一的缩放比例，但忽略了：

• 画布的平移偏移量（拖拽后的位置）
• 缩放和平移是组合变换，不能简单用比例相乘，必须用矩阵逆变换来处理
• 没有区分Canvas元素的CSS缩放和上下文的变换（这是两个不同的缩放层级）

三、Canvas关键信息获取指南 #

针对你问的Canvas相关信息获取，整理了常用的几个点：

• 画布原始像素尺寸：canvas.width和canvas.height（这是绘图的实际像素区域，和元素的CSS尺寸无关）
• 元素在页面中的位置/缩放尺寸：canvas.getBoundingClientRect()，返回包含left/top（视口位置）、width/height（缩放后的元素尺寸）的对象
• 上下文当前变换状态：ctx.getTransform()，返回DOMMatrix对象，其中a/d是x/y缩放比例，e/f是x/y平移偏移量
• 绘制状态管理：ctx.save()保存当前上下文状态（变换、样式等），ctx.restore()恢复到上一次保存的状态，这在缩放平移绘图时非常有用

四、完整示例：缩放+拖拽+绘图的基础框架 #

给你一个极简的可运行示例，整合了上面的所有逻辑：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 初始化画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 缩放和平移参数
let scale = 1;
let offsetX = 0;
let offsetY = 0;
let isDragging = false;
let isDrawing = false;
let lastDrawX, lastDrawY;

// 鼠标拖拽画布
canvas.addEventListener('mousedown', (e) => {
  if (e.button === 2) { // 右键拖拽画布
    isDragging = true;
    const rect = canvas.getBoundingClientRect();
    lastDrawX = e.clientX - rect.left;
    lastDrawY = e.clientY - rect.top;
  } else if (e.button === 0) { // 左键绘图
    const coords = getOriginalCanvasCoords(e, canvas, ctx);
    isDrawing = true;
    lastDrawX = coords.x;
    lastDrawY = coords.y;
    ctx.beginPath();
    ctx.moveTo(lastDrawX, lastDrawY);
  }
});

canvas.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const rect = canvas.getBoundingClientRect();
    const dx = e.clientX - rect.left - lastDrawX;
    const dy = e.clientY - rect.top - lastDrawY;
    // 修正拖拽偏移量（考虑元素缩放）
    offsetX += dx / (rect.width / canvas.width);
    offsetY += dy / (rect.height / canvas.height);
    lastDrawX = e.clientX - rect.left;
    lastDrawY = e.clientY - rect.top;
    redrawCanvas();
  } else if (isDrawing) {
    const coords = getOriginalCanvasCoords(e, canvas, ctx);
    ctx.lineTo(coords.x, coords.y);
    ctx.stroke();
    lastDrawX = coords.x;
    lastDrawY = coords.y;
  }
});

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

// 滚轮缩放画布
canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  // 获取鼠标在原始画布上的位置（作为缩放中心）
  const mouseCoords = getOriginalCanvasCoords(e, canvas, ctx);
  // 调整缩放比例
  const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
  scale *= zoomFactor;
  // 调整偏移量，保证鼠标位置不变
  offsetX = mouseCoords.x - (mouseCoords.x - offsetX) * zoomFactor;
  offsetY = mouseCoords.y - (mouseCoords.y - offsetY) * zoomFactor;
  redrawCanvas();
});

// 重绘画布
function redrawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  // 应用缩放和平移
  ctx.translate(offsetX, offsetY);
  ctx.scale(scale, scale);
  
  // 这里可以绘制你的内容，比如一个测试矩形
  ctx.fillStyle = '#4285F4';
  ctx.fillRect(50, 50, 100, 100);
  
  ctx.restore();
}

// 获取原始画布坐标的工具函数
function getOriginalCanvasCoords(event, canvas, ctx) {
  const rect = canvas.getBoundingClientRect();
  const elemX = (event.clientX - rect.left) / (rect.width / canvas.width);
  const elemY = (event.clientY - rect.top) / (rect.height / canvas.height);
  
  const transform = ctx.getTransform();
  const inverseMatrix = new DOMMatrix(transform).invertSelf();
  const originalPoint = inverseMatrix.transformPoint(new DOMPoint(elemX, elemY));
  
  return { x: originalPoint.x, y: originalPoint.y };
}

// 禁止右键菜单
canvas.addEventListener('contextmenu', (e) => e.preventDefault());

这个示例支持右键拖拽画布、滚轮缩放、左键绘图，所有操作下的坐标都是准确的。

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