如何在 CustomTkinter GUI 中实现放大/缩小功能

Question

我正在尝试向 Raspberry Pi 上的自定义 tkinter GUI 添加放大/缩小功能。由于 customtkinter 中缺乏对缩放小部件的内置支持，我正在努力实现这一目标。有没有人在customtkinter应用程序中成功实现了缩放功能，您能否提供有关如何根据用户输入动态调整小部件大小和重新定位小部件的指导或示例？我们将非常感谢您的帮助！

我尝试根据用户输入手动调整所有小部件的大小和位置。然而，事实证明这种方法很复杂并且容易出错，使得维护 GUI 的布局和功能变得困难。

我希望找到一种更简化的方法或内置函数来处理缩放功能，类似于移动应用程序上的捏合缩放，整个界面可以动态缩放。

Answer 1

您可以通过以编程方式调整小部件的大小和位置来响应用户输入来实现缩放效果。 （例如鼠标滚动事件或按钮按下。） 这是实现缩放功能的概念方法：

1. 比例因子计算： 定义确定缩放程度的比例因子。该因子将用于缩放尺寸 小部件。

2. 调整小部件尺寸和位置： 对于 GUI 中的每个小部件，您需要：

• 根据比例因子计算新尺寸。
• 重新定位小部件以保持布局一致性。

3. 事件绑定： 将放大/缩小操作绑定到用户事件，例如鼠标滚动或按钮单击。

import customtkinter as ctk
import tkinter as tk

class ZoomableApp(ctk.CTk):
    def __init__(self):
        super().__init__()
        
        self.zoom_factor = 1.0 # controls zoom level
        self.zoom_increment = 0.1
    # frame
        self.frame = ctk.CTkFrame(self)
        self.frame.pack(fill="both", expand=True)
        
    # excample widgets
        self.label = ctk.CTkLabel(self.frame, text="Zoomable Label", font=("Arial", 20))
        self.label.place(relx=0.5, rely=0.5, anchor="center")
        
        self.button = ctk.CTkButton(self.frame, text="Zoomable Button")
        self.button.place(relx=0.5, rely=0.6, anchor="center")
        
    # binds mouse wheel / +- for to zoom
        self.bind("<MouseWheel>", self.zoom)
        self.bind("<KeyPress-+>", self.zoom_in)
        self.bind("<KeyPress-minus>", self.zoom_out)
    
    def zoom(self, event):
        if event.delta > 0:
            self.zoom_in(event)
        else:
            self.zoom_out(event)
    
    def zoom_in(self, event):
        self.set_zoom(self.zoom_factor + self.zoom_increment)
    
    def zoom_out(self, event):
        self.set_zoom(self.zoom_factor - self.zoom_increment)
    
    def set_zoom(self, new_zoom_factor):
        if 0.5 <= new_zoom_factor <= 2.0:  # limits for zoom
            self.zoom_factor = new_zoom_factor
            self.update_widgets()
    # widgets get adjusted according to new zoom factor 
    def update_widgets(self): 
        new_font_size = int(20 * self.zoom_factor)
        self.label.configure(font=("Arial", new_font_size))
        
        self.button.configure(width=int(100 * self.zoom_factor), height=int(30 * self.zoom_factor))

        self.label.place_configure(relx=0.5, rely=0.5)
        self.button.place_configure(relx=0.5, rely=0.6)
        

if __name__ == "__main__":
    app = ZoomableApp()
    app.mainloop()