求助：实现<canvas>画布的横竖双向自由滚动功能

嘿，我之前做类似的Canvas交互时也踩过这个坑！你说的“只能斜向滚动、鼠标交互异常”大概率是因为X/Y轴的偏移计算没有独立处理，或者鼠标坐标的逻辑出了问题。咱们一步步来修复：

核心问题分析 #

你之前实现横向滚动时，可能只处理了X轴的偏移，现在加Y轴时，很容易出现以下问题：

• 鼠标坐标计算错误（比如用了页面全局坐标而非Canvas相对坐标）
• X/Y轴的偏移量被互相干扰（比如把X轴的移动值加到了Y轴上）
• 画布变换时没有正确分离两个轴的偏移

正确的自由滚动实现代码 #

下面是经过验证的拖拽滚动逻辑，你可以直接适配到你的项目里：

// 维护画布的偏移量（X/Y轴独立）
let canvasOffsetX = 0;
let canvasOffsetY = 0;
let isDragging = false;
let lastMousePos = { x: 0, y: 0 };

const canvas = document.getElementById('floor-plan-canvas');
const ctx = canvas.getContext('2d');

// 鼠标按下：记录拖拽起始点
canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  const rect = canvas.getBoundingClientRect();
  // 计算鼠标相对于Canvas的真实坐标（处理Canvas的页面偏移）
  lastMousePos.x = e.clientX - rect.left;
  lastMousePos.y = e.clientY - rect.top;
});

// 鼠标移动：计算偏移并更新画布
canvas.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  
  const rect = canvas.getBoundingClientRect();
  const currentMousePos = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
  
  // 分别计算X/Y轴的移动差值，反向更新画布偏移（拖拽方向和画布移动一致）
  canvasOffsetX += currentMousePos.x - lastMousePos.x;
  canvasOffsetY += currentMousePos.y - lastMousePos.y;
  
  // 更新上一次鼠标位置
  lastMousePos = { ...currentMousePos };
  
  // 重新绘制平面图
  renderFloorPlan();
});

// 鼠标松开：停止拖拽
canvas.addEventListener('mouseup', () => {
  isDragging = false;
});
// 鼠标移出Canvas也要停止拖拽，避免异常
canvas.addEventListener('mouseleave', () => {
  isDragging = false;
});

// 核心绘制函数：先应用偏移，再绘制内容
function renderFloorPlan() {
  // 清空整个画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 保存当前画布状态，避免变换污染后续绘制
  ctx.save();
  // 应用X/Y轴的偏移变换
  ctx.translate(canvasOffsetX, canvasOffsetY);
  
  // --------------------------
  // 这里放你的展会平面图绘制逻辑
  // 示例：绘制几个展位
  drawBooth(100, 100, '展位A');
  drawBooth(400, 200, '展位B');
  drawBooth(200, 500, '展位C');
  // --------------------------
  
  // 恢复画布状态
  ctx.restore();
}

// 示例：绘制单个展位的辅助函数
function drawBooth(x, y, name) {
  ctx.fillStyle = '#2ECC71';
  ctx.fillRect(x, y, 200, 180);
  ctx.strokeStyle = '#FFFFFF';
  ctx.lineWidth = 2;
  ctx.strokeRect(x, y, 200, 180);
  ctx.fillStyle = '#FFFFFF';
  ctx.font = 'bold 18px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(name, x + 100, y + 95);
}

// 初始绘制
renderFloorPlan();

关键注意事项 #

1. 独立处理X/Y轴偏移
   一定要用两个独立变量canvasOffsetX和canvasOffsetY分别维护偏移，绝对不能把X和Y的计算混在一起，这是解决斜向滚动的核心。

2. 鼠标坐标要相对Canvas
   用getBoundingClientRect()获取Canvas在页面中的位置，把鼠标的clientX/Y转换成Canvas内部的相对坐标，否则页面滚动时会出现交互偏移。

3. 处理Canvas缩放场景
   如果你的Canvas用了CSS缩放（比如width: 100%; height: auto;），需要把鼠标坐标乘以缩放比例，保证拖拽速度和画布移动速度一致：

   const scaleX = canvas.width / rect.width;
   const scaleY = canvas.height / rect.height;
   lastMousePos.x = (e.clientX - rect.left) * scaleX;
   lastMousePos.y = (e.clientY - rect.top) * scaleY;
   

4. 拖拽状态的完整管理
   除了mouseup，还要监听mouseleave事件，防止鼠标移出Canvas后还继续触发滚动。

排查你现有代码的方向 #

如果你的代码还是有问题，检查这几点：

• 是不是之前的横向滚动代码里强制设置了canvasOffsetY = 0？
• 鼠标移动时的差值计算是不是把X和Y搞反了？
• 绘制时的translate是不是只传了X轴的值，或者把X/Y的偏移加在了一起？

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