Canvas鼠标居中缩放异常问题：调整画布尺寸与滚动条后缩放失效的解决请求

嘿，我明白你想实现类似Figma那种围绕鼠标居中缩放的效果，而且遇到了调整画布和滚动条后缩放逻辑混乱的问题，咱们一步步拆解解决这个问题。

首先先梳理你现有代码里的几个核心矛盾点：

• 你直接修改了canvas的物理宽高（canvas.width/canvas.height），这会强制重置画布上下文的所有变换状态，还会清空画布，这就是缩放逻辑被打乱的主要原因。
• 你没有结合滚动容器的滚动偏移计算鼠标位置，缩放时也没同步调整滚动条位置，导致视觉上内容偏移。
• 你想要用上下文变换实现缩放，但又同时修改画布物理尺寸，这两种实现逻辑本质上是冲突的。

接下来是针对你需求的具体解决方案：不直接resize画布，用上下文变换实现缩放，同时让滚动条正确适配缩放后的内容，保证缩放始终围绕鼠标（你当前模拟的位置）。

核心思路 #

保持canvas的物理尺寸固定（也就是canvas.width和canvas.height始终为初始的容器尺寸），通过Canvas上下文的scale和translate实现缩放绘制；同时动态设置canvas的CSS尺寸为原始尺寸乘以缩放比例，让滚动容器根据这个CSS尺寸自动生成正确的滚动条；最后在缩放时调整滚动容器的scrollLeft和scrollTop，让鼠标位置在缩放后保持在视口的同一位置，实现真正的居中缩放。

修改后的完整代码 #

HTML部分

<button onclick="zoom(event)">Zoom</button>
<div class="canvas-container">
  <canvas id="canvas" class="canvas"></canvas>
</div>

CSS部分

.canvas-container {
  box-sizing: border-box;
  height: 80vh;
  overflow: auto;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 2px solid red;
  position: relative;
}

.canvas {
  background-image: linear-gradient( rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, .08) 11px), linear-gradient(90deg, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, .08) 11px);
  background-size: 11px 11px, 11px 11px;
  box-sizing: border-box;
  border: 3px solid green;
  /* 初始时CSS尺寸与物理尺寸一致 */
}

JavaScript部分

let canvas;
let ctx;
let originalCanvasHeight, originalCanvasWidth;
let scale = 1;
// 记录画布的偏移量（用于上下文变换）
let offset = { x: 0, y: 0 };
// 获取滚动容器元素
let canvasContainer;

setTimeout(() => {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  canvasContainer = document.querySelector(".canvas-container");
  
  // 初始化画布物理尺寸为容器的初始可视尺寸
  originalCanvasWidth = canvasContainer.clientWidth;
  originalCanvasHeight = canvasContainer.clientHeight;
  canvas.width = originalCanvasWidth;
  canvas.height = originalCanvasHeight;
  
  // 初始化绘制内容
  drawContent();
}, 100);

// 统一绘制函数，每次缩放后调用
function drawContent() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 重置变换矩阵，避免累积变换导致异常
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  // 应用偏移和缩放变换
  ctx.translate(offset.x, offset.y);
  ctx.scale(scale, scale);
  
  // 绘制你的自定义内容
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 40, 40);
}

const zoom = (e) => {
  // 你模拟的鼠标位置（相对于物理画布的坐标）
  const mouseX = 70;
  const mouseY = 70;
  
  const zoomStep = 0.5;
  // 限制最小缩放比例，避免缩放过小导致内容消失
  const targetScale = Math.max(0.5, scale + (e.deltaY > 0 ? -zoomStep : zoomStep));
  const scaleFactor = targetScale / scale;
  
  // 获取滚动容器当前的滚动位置
  const scrollLeft = canvasContainer.scrollLeft;
  const scrollTop = canvasContainer.scrollTop;
  
  // 计算鼠标在视口中的相对位置（缩放后要保持这个位置不变）
  const viewportMouseX = mouseX * scale - scrollLeft;
  const viewportMouseY = mouseY * scale - scrollTop;
  
  // 计算新的偏移量，保证缩放后鼠标位置仍对应原内容位置
  offset.x = mouseX - (mouseX - offset.x) * scaleFactor;
  offset.y = mouseY - (mouseY - offset.y) * scaleFactor;
  
  // 计算缩放后需要设置的滚动位置，让鼠标保持在视口原位置
  const newScrollLeft = mouseX * targetScale - viewportMouseX;
  const newScrollTop = mouseY * targetScale - viewportMouseY;
  
  // 更新全局缩放比例
  scale = targetScale;
  
  // 设置canvas的CSS尺寸，让滚动容器生成正确的滚动条范围
  canvas.style.width = `${originalCanvasWidth * scale}px`;
  canvas.style.height = `${originalCanvasHeight * scale}px`;
  
  // 同步更新滚动位置
  canvasContainer.scrollLeft = newScrollLeft;
  canvasContainer.scrollTop = newScrollTop;
  
  // 重新绘制内容
  drawContent();
};

关键修改点说明 #

1. 分离物理尺寸与CSS尺寸：

   • 物理尺寸（canvas.width/canvas.height）固定为初始值，避免上下文状态被重置，保证绘制坐标系稳定。
   • CSS尺寸动态跟随缩放比例变化，滚动容器会自动根据这个尺寸计算滚动条的可滚动范围。

2. 滚动位置同步调整：

   • 缩放时计算滚动容器需要调整的scrollLeft和scrollTop，确保鼠标位置在缩放前后在视口中的相对位置不变，视觉上实现围绕鼠标居中缩放。

3. 统一绘制逻辑：

   • 把绘制逻辑抽离到drawContent函数，每次缩放后重置变换矩阵再重新绘制，避免重复代码和变换累积异常。

4. 缩放比例限制：

   • 给targetScale添加最小限制，防止缩放过小导致内容完全不可见。

这样修改后，你就能实现类似Figma的缩放效果：围绕鼠标（你模拟的位置）居中缩放，滚动条自动适配缩放后的内容尺寸，而且不会因为调整画布尺寸导致缩放逻辑失效。

备注：内容来源于stack exchange，提问作者Lyes