如何在Tkinter中为图片绑定点击事件？逻辑电路模拟器开发问题

错误原因 #

你错误地给PhotoImage对象绑定鼠标事件，但PhotoImage只是图片数据的载体，并非Canvas上可交互的图形元素，所以不存在tag_bind或bind方法。正确的绑定目标是Canvas通过create_image创建出的图形元素（用返回的ID或自定义tag）。

修正方案及代码 #

以下是修改后的完整代码，关键修改点已标注：

from tkinter import *

class orGate:
    def __init__(self):
        self.filePath = 'Project programs/gate pictures/or.png'
        self.icon = None
        self.canvas_id = None  # 新增：保存Canvas元素ID

    def getFilePath(self):
        return self.filePath

    def makeIconBelongTo(self, icon):
        self.icon = icon

    def getIcon(self):
        return self.icon
    
    def setCanvasId(self, canvas_id):
        self.canvas_id = canvas_id
    
    def getCanvasId(self):
        return self.canvas_id

class Window:
    def __init__(self):
        self.root = Tk()
        self.root.title("Logic Circuit Simulator")

        # 工具区布局（保留原代码）
        self.toolFrame = LabelFrame(self.root, text="Tools", width=100, height=500)
        self.toolFrame.config(bg="lightgrey")
        self.toolFrame.grid(row=0, column=0, padx=5, pady=5)
        
        self.gatesLabelFrame = LabelFrame(self.toolFrame, text="Gates", width=5, height=1, borderwidth=1, relief="ridge")
        self.gatesLabelFrame.grid(row=0, column=0, padx=5, pady=10)

        self.workFrame = Frame(self.root, width=1000, height=550)
        self.workFrame.grid(row=0, column=1, padx=5, pady=5)

        self.visualFrame = LabelFrame(self.workFrame, text="Workspace", width=1000, height=500)
        self.visualFrame.config(bg="lightgrey")
        self.visualFrame.grid(row=1, column=0, padx=5, pady=5)

        self.optionsLabelFrame = LabelFrame(self.workFrame, text="Options", width= 1000, height=30)
        self.optionsLabelFrame.config(bg="lightgrey")
        self.optionsLabelFrame.grid(row=0, column=0, padx=5, pady=5)
    
        self.workspace = Canvas(self.visualFrame, bg="lightgrey", width=1000, height=500)
        self.workspace.grid(row=0, column=0, padx=5, pady=5)
    
        orButton = Button(self.gatesLabelFrame, text="OR", command=lambda:self.createOrGate(), relief="groove")
        orButton.grid(row=2, column=0, padx=5, pady=5)

        self.gates = []  # 改为直接存储gate对象，无需单独存icon
        self.selectedObject = None


    def runWindow(self):
        return self.root.mainloop()
    

    def makeSelected(self, gate):
        self.selectedObject = gate
        print(f"选中了OR门对象：{gate}")
        print("selection made")


    def createOrGate(self):
        orGateObject = orGate()
        
        orIcon = PhotoImage(file=orGateObject.getFilePath())
        # 改进：将图片存在gate对象里，避免垃圾回收，同时支持多个门
        orGateObject.makeIconBelongTo(orIcon)

        # 保存create_image返回的Canvas元素ID
        canvas_id = self.workspace.create_image(500, 250, image=orGateObject.getIcon())
        orGateObject.setCanvasId(canvas_id)

        self.gates.append(orGateObject)

        # 关键：给Canvas元素绑定点击事件，直接传递gate对象
        self.workspace.tag_bind(canvas_id, '<Button-1>', lambda e, g=orGateObject: self.makeSelected(g))
        
        print(self.selectedObject)
        

Window = Window()
Window.runWindow()

关键修改说明 #

1. 绑定对象修正：不再给PhotoImage绑定事件，而是给create_image返回的Canvas元素ID绑定事件，用self.workspace.tag_bind方法。
2. 图片保存优化：将PhotoImage对象存在对应的orGate实例中，避免多次创建门时覆盖图片，同时防止垃圾回收导致图片消失。
3. 选中逻辑简化：点击事件直接传递对应的gate对象，不用再通过icon遍历匹配，效率更高。
4. 新增Canvas ID存储：在orGate类中添加canvas_id属性，方便后续对门元素进行移动、删除等操作。

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