首页 > 解决方案 > 如何通过键事件绑定更新 tkinter 类中的图像?

问题描述

按下右箭头或左箭头键时如何显示下一个图像和上一个图像?当我没有定义Example类时,我在一个简单的示例中完成了此操作,但当我想在下面的示例代码中执行此操作时失败。我在Example类中定义了两个静态方法来将左箭头和右箭头绑定到 GUI。它在打印事件时效果很好,但我不知道如何通过and更新image标签的选项。这是我的代码的一部分:configure(image = next_photo)configure(image = previous_photo)

current = 0
class Example(tk.Frame):
    def __init__(self, master):
        tk.Frame.__init__(self, master)
        self.master.bind('<Left>', self.left_key)
        self.master.bind('<Right>', self.right_key)
        image = Image.open(image_list[0])
        image = image.resize((800, 600),Image.ANTIALIAS)
        photo = ImageTk.PhotoImage(image)
        self.logo = tk.Label(self, text="Logo", background="orange")
        self.logo2 = tk.Label(self, image = photo)
        ############################################# ScrolledText ##########################################
        self.edit_space = tkst.ScrolledText(
                master = self,
                wrap   = 'word',  # wrap text at full words only
                width  = 50,      # characters
                height = 10,      # text lines
                bg='beige'        # background color of edit area
        )
        self.other1 = tk.Label(self, background="purple")
        self.other2 = tk.Label(self, background="yellow")
        self.other3 = tk.Label(self, background="pink")
        self.other4 = tk.Label(self, background="gray")
        self.main = tk.Frame(self, background="blue")
        self.logo.grid(row=0, column=0, rowspan=1, sticky="nsew")
        self.logo2.grid(row=1, column=0, rowspan=1, sticky="nsew")
        self.other1.grid(row=0, column=1, sticky="nsew")
        self.other2.grid(row=0, column=2, sticky="nsew")
        self.other3.grid(row=1, column=1, sticky="nsew")
        self.other4.grid(row=1, column=2, sticky="nsew")
        self.edit_space.grid(row=2, column=0, sticky="nsew")
        self.main.grid(row=2, column=2, columnspan=2, rowspan=6)
        for row in range(8):
            self.grid_rowconfigure(row, weight=1)
        for col in range(3):
            self.grid_columnconfigure(col, weight=1)
    @staticmethod
    def left_key(event):
        print(str(event) + " key pressed")
        global current, image_list
        if not (0 <= current + 1 < len(image_list)):
            print("This is the first image")
            return
        current += 1
        image = Image.open(image_list[current])
        image = image.resize((800, 600),Image.ANTIALIAS)
        photo = ImageTk.PhotoImage(image)
        # self.logo2 = tk.Label(self, image = photo)
        #self.logo2.configure(image = photo)
    @staticmethod
    def right_key(event):
        print(str(event) + " key pressed")
        global current, image_list
        if not (0 <= current - 1 < len(image_list)):
            print("This is the last image")
            return
        current -= 1
        image = Image.open(image_list[current])
        image = image.resize((800, 600),Image.ANTIALIAS)
        photo = ImageTk.PhotoImage(image)
        # self.logo2 = tk.Label(self, image = photo)
        #self.logo2.configure(image = photo)
if __name__ == "__main__":
    root = tk.Tk()
    Example(root).pack(fill="both", expand=True)
    root.geometry("800x400")
    root.mainloop()

标签: pythonpython-3.xtkinterpython-imaging-library

解决方案


主要问题是您photo在内部创建局部变量__init__()并将其用作logo2. 但是在执行photo后会被销毁,__init__()这将导致没有图像显示。

为了解决问题:

  • 使用self.photo而不是photo
  • 将 2 个静态方法left_key()right_key(), 更改为实例方法
  • 设置logo2内部left_key()和图像right_key()self.logo2.configure(image=self.photo)

此外,检查currentinsideleft_key()的值right_key()可能会导致问题:

  • left_key(),current > 0应该检查
  • right_key(),current < len(image_list)-1应该检查

并且current这两种方法的调整方向是错误的:

  • left_key()应该减少current
  • right_key()应该增加current

推荐阅读