切换拼图框架尺寸时Canvas重复绘制计算的Bug修复求助

常见问题根源 #

• 尺寸切换时未清除旧的事件监听/定时器：比如绑定的鼠标事件、requestAnimationFrame循环未取消，导致新旧实例同时执行绘制逻辑
• 类实例未销毁/重置状态：切换尺寸后旧实例未被回收，仍在后台运行并触发计算
• 绘制函数无防抖/重复触发：尺寸切换操作触发多次重绘请求，导致递进式重复计算
• Canvas上下文未重置：切换尺寸后未清空画布、重置变换矩阵，残留旧绘制内容

具体修复步骤 #

1. 清理旧实例与事件监听 #

在切换尺寸前，强制销毁旧的拼图类实例，避免残留逻辑运行：

// 假设你的拼图类为PuzzleGame，实例存在全局引用中
if (window.currentPuzzle) {
  // 取消动画循环
  cancelAnimationFrame(window.currentPuzzle.animationId);
  // 移除绑定的事件监听（如鼠标点击、拖拽）
  const canvas = document.getElementById('puzzleCanvas');
  canvas.removeEventListener('mousedown', window.currentPuzzle.handleMouseDown);
  // 清空实例引用
  window.currentPuzzle = null;
}
// 创建新尺寸的实例
window.currentPuzzle = new PuzzleGame(targetSize);

2. 重置Canvas上下文状态 #

在新实例初始化时，强制清空画布并重置上下文：

class PuzzleGame {
  constructor(size) {
    this.size = size;
    this.canvas = document.getElementById('puzzleCanvas');
    this.ctx = this.canvas.getContext('2d');
    
    // 重置画布尺寸（根据你的需求调整）
    this.canvas.width = 450;
    this.canvas.height = 450;
    
    // 清空画布并重置变换矩阵
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
    
    // 初始化新尺寸的拼图数据
    this.initPuzzleData();
  }
}

3. 避免重复触发绘制 #

将绘制逻辑改为按需执行，而非持续循环：

// 仅在拼图状态变化或尺寸切换时调用绘制
draw() {
  // 每次绘制前先清空画布
  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  
  // 绘制拼图块的核心逻辑
  this.puzzlePieces.forEach(piece => {
    this.ctx.drawImage(piece.img, piece.x, piece.y, piece.width, piece.height);
  });
}

// 示例：仅在初始化或块移动时调用draw()
this.initPuzzleData = () => {
  // 生成新尺寸的拼图块数据
  // ...
  // 绘制一次
  this.draw();
}

4. 排查函数调用逻辑 #

• 检查尺寸切换的触发函数（如按钮点击事件），确保没有重复创建实例或多次调用初始化方法
• 排查全局变量：如果拼图数据存在全局对象中，切换尺寸时需完全重置，避免新旧数据混合

额外排查技巧 #

• 打开浏览器控制台（F12），查看是否有重复输出的日志，定位重复执行的函数
• 使用Chrome DevTools的Performance面板录制尺寸切换过程，直观查看重复调用的函数
• 检查是否有自定义防抖/节流函数未正确生效，导致多次触发初始化

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