Canvas缩放与平移时的渲染问题排查求助

核心问题分析 #

• 画布坐标错误：硬编码canvas.top = canvas.offsetTop + 220完全偏离实际鼠标位置，导致滚动缩放时的定位逻辑彻底失效。
• 图像比例失衡：直接通过intensity累加调整宽高的方式，破坏了图像原始宽高比，引发顶部区域变形。
• 重复加载图片：每次调用createImage都新建Image对象重复加载图片，性能差且绘制逻辑混乱。
• 缩放定位逻辑错误：偏移量计算未结合鼠标相对画布的比例与缩放比例，无法实现围绕鼠标点的精准缩放平移。

修正后的代码 #

HTML #

<canvas class="canvas"></canvas>

CSS #

.canvas {
  cursor: pointer;
  border: 1px solid #ccc; /* 可选，方便查看画布边界 */
}

JavaScript #

const canvas = document.querySelector('.canvas');
canvas.width = 500;
canvas.height = 325;
const ctx = canvas.getContext('2d');

// 预加载图片，仅加载一次
const img = new Image();
img.src = 'https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg';

// 初始化参数
let scale = 1; // 缩放比例，1为原始大小
let offsetX = 0; // 图像偏移X
let offsetY = 0; // 图像偏移Y
let mouseX = 0; // 鼠标在画布内的X坐标
let mouseY = 0; // 鼠标在画布内的Y坐标

// 统一绘制函数
function drawImage() {
  // 清除画布旧内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 计算缩放后的图像宽高
  const scaledWidth = img.width * scale;
  const scaledHeight = img.height * scale;
  // 绘制带偏移的缩放图像
  ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight);
}

// 记录鼠标在画布内的实时位置
canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
});

// 滚轮缩放逻辑
canvas.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止页面滚动干扰

  // 控制缩放速度
  const scaleDelta = e.deltaY > 0 ? 0.9 : 1.1;
  // 计算缩放前鼠标点对应的原始图像坐标
  const imgPointX = (mouseX - offsetX) / scale;
  const imgPointY = (mouseY - offsetY) / scale;
  
  // 更新缩放比例并限制范围
  scale *= scaleDelta;
  scale = Math.max(0.5, Math.min(5, scale));
  
  // 重新计算偏移，确保鼠标点始终在原位置
  offsetX = mouseX - imgPointX * scale;
  offsetY = mouseY - imgPointY * scale;
  
  drawImage();
});

// 鼠标进出控制页面滚动
canvas.addEventListener('mouseover', () => {
  document.body.style.overflow = 'hidden';
});
canvas.addEventListener('mouseleave', () => {
  document.body.style.overflow = 'visible';
});

// 图片加载完成后初始化绘制
img.onload = drawImage;

关键改进点 #

• 预加载图片：仅创建一次Image对象，避免重复加载浪费资源。
• 比例化缩放：用scale比例控制图像大小，严格保持原始宽高比，彻底解决变形问题。
• 精准定位：缩放时先计算鼠标对应的原始图像坐标，再更新偏移量，确保缩放围绕鼠标点进行，实现对应区域的缩放平移。
• 动态坐标获取：使用getBoundingClientRect()实时获取画布位置，避免硬编码偏移导致的定位错误。
• 缩放范围限制：设置缩放比例上下限，避免过度缩放引发异常。

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