Python Tkinter 开发单骑士棋盘时骑士图片显示异常问题排查

现有实现逻辑 #

项目包含两个核心文件：

• createBoard.py：负责生成8*8棋盘、初始化骑士图像、绑定格子点击回调
• Knight.py：负责实现骑士的位置移动逻辑
  现有核心实现代码如下：

1. 全局图像初始化与点击回调（createBoard.py）

   img = ImageTk.PhotoImage(Image.open("knightImage.gif"))
   def click(cell):
       position = getPosition(cell, cells)
       removePreviousPosition(cells)
       goToPosition(cells, position, img)
   

2. 移动逻辑实现（Knight.py）

   def removePreviousPosition(cells):
       for row in range(8):
           for col in range(8):
               (cells[row][col])["image"]=""
   
   def goToPosition(cells, position, img):
       row = position[0]
       col = position[1]
       (cells[row][col])["image"]=img
   

3. 棋盘格子生成逻辑

   cells = []
   for row in range(8):
       cells.append([])
       for col in range(8):
           cell = Button(window)
           cell.config(height=3, width=6)
           if (row+col)%2==0:
               cell.config(bg="#f0d9b5")
           else: 
               cell.config(bg="#b58863")
           cell.grid(row=row, column=col)
           cell.configure(command=lambda putCell=cell: click(putCell))
           cells[row].append(cell)
   

实际运行现象 #

• 全量清空棋盘格子图片的逻辑运行完全正常，无残留错位
• 给目标格子设置骑士图片时，控件不会显示预期的骑士图案，而是出现错乱的异常像素块
• 项目已配置__init__.py初始化文件，单骑士的移动逻辑不存在多棋子冲突

问题根因 #

异常显示是Tkinter框架的两个常见机制共同触发的：

• 给Button的image属性赋值空字符串时，组件底层不会立刻清理上一次绑定的图像渲染缓存，只会在下次重绘时延迟触发属性变更，容易出现旧缓存与新图像的叠加重绘，形成错乱像素
• PhotoImage对象如果没有被持有持续的强引用，会被Python垃圾回收机制提前销毁，渲染时读取到已经被释放的内存块，就会显示无规律的花屏像素

修复方案 #

• 修改removePreviousPosition函数，清空图片时用None替代空字符串，强制触发渲染缓存清理，避免旧缓存残留：

  def removePreviousPosition(cells):
      for row in range(8):
          for col in range(8):
              cells[row][col].configure(image=None)
  

• 修改goToPosition函数，给承载骑士图像的格子本身绑定图像对象的强引用，避免PhotoImage被垃圾回收：

  def goToPosition(cells, position, img):
      row = position[0]
      col = position[1]
      target_cell = cells[row][col]
      # 在控件实例上保存图像引用，防止被GC回收
      target_cell.knight_img = img
      target_cell.configure(image=img)
  

• 调整Button尺寸配置：当Button承载图像时，height和width参数的计数单位为像素，之前设置的height=3, width=6对应实际像素尺寸极小，容易导致图像拉伸失真。建议根据骑士图的实际像素大小调整按钮尺寸，或移除固定尺寸参数，让按钮自动适配图像大小。

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