为何简易Tkinter交互图像组件无法正常工作？

问题描述 #

用Tkinter做交互图像时遇到异常：代码本该创建白色窗口，拖动鼠标时降下“快门”显示黑色背景，但运行后窗口完全没变化。测试发现给move_shutter方法加global image后功能正常，但搞不懂为啥局部变量会导致这种问题。

原代码如下：

import tkinter as tk
import numpy as np
from PIL import Image, ImageTk

root = tk.Tk()
array = np.ones((500, 500)) * 255
canvas = tk.Canvas(root, width=500, height=500)
image = ImageTk.PhotoImage(image=Image.fromarray(array))
canvas.pack()
canvas.create_image(0, 0, anchor="nw", image=image)

def move_shutter(event):
    """Change and redraw the image each time the mouse is moved with the left button down."""
    array[:event.y] = 0
    image = ImageTk.PhotoImage(image=Image.fromarray(array))
    canvas.pack()
    canvas.create_image(0, 0, anchor="nw", image=image)

canvas.bind("<B1-Motion>", move_shutter)
root.mainloop()

问题原因 #

1. 局部变量被垃圾回收：move_shutter里创建的image是局部变量，函数执行完后Python会立刻回收这个对象。Tkinter的PhotoImage必须有持久的Python引用才能显示——如果引用被销毁，底层的图像资源也会被释放，画布自然看不到变化。
2. 冗余代码无效：每次拖动都调用canvas.pack()完全没用，布局方法只需要初始化时调用一次。
3. 重复创建图像元素：每次拖动都用create_image()会在画布上叠加新图像，旧图像没被删除，会浪费内存。

修复方案 #

方案1：用全局变量（你测试有效的方式） #

在函数开头声明global image，让内部的image指向全局变量，避免被回收，同时改用itemconfig更新已有图像：

import tkinter as tk
import numpy as np
from PIL import Image, ImageTk

root = tk.Tk()
array = np.ones((500, 500)) * 255
canvas = tk.Canvas(root, width=500, height=500)
image = ImageTk.PhotoImage(image=Image.fromarray(array))
canvas.pack()
# 保存图像元素ID，方便后续更新
img_id = canvas.create_image(0, 0, anchor="nw", image=image)

def move_shutter(event):
    global image
    array[:event.y] = 0
    image = ImageTk.PhotoImage(image=Image.fromarray(array))
    # 更新已有图像，而非重复创建
    canvas.itemconfig(img_id, image=image)

canvas.bind("<B1-Motion>", move_shutter)
root.mainloop()

方案2：用类管理引用（更优雅的工程化方式） #

全局变量在大型项目里容易出问题，推荐用类封装组件和状态，自然保留引用：

import tkinter as tk
import numpy as np
from PIL import Image, ImageTk

class ShutterApp:
    def __init__(self, root):
        self.root = root
        self.array = np.ones((500, 500)) * 255
        self.canvas = tk.Canvas(root, width=500, height=500)
        self.canvas.pack()
        self.image = ImageTk.PhotoImage(image=Image.fromarray(self.array))
        self.img_id = self.canvas.create_image(0, 0, anchor="nw", image=self.image)
        self.canvas.bind("<B1-Motion>", self.move_shutter)
    
    def move_shutter(self, event):
        self.array[:event.y] = 0
        self.image = ImageTk.PhotoImage(image=Image.fromarray(self.array))
        self.canvas.itemconfig(self.img_id, image=self.image)

if __name__ == "__main__":
    root = tk.Tk()
    app = ShutterApp(root)
    root.mainloop()

关于Tkinter引用机制的说明 #

你猜的完全正确——Tkinter不会主动持有PhotoImage的Python引用，它只存一个指向底层Tk图像的指针。如果Python层面的PhotoImage对象被垃圾回收（比如局部变量在函数结束后销毁），底层的Tk图像也会被销毁，画布就显示不出图像了。

所以必须给PhotoImage留一个持久引用：可以用全局变量、类的实例属性，甚至把它绑定到画布对象上（比如canvas.image = image），只要有长期存在的对象持有它，就不会被回收。

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