如何打造既半透明又显示不透明文本的窗口？一步步解决

windows

2024-03-20 14:34:01

如何打造半透明窗口却显示不透明文本？

前言

在窗口设计中，有时候你想要创建一个既半透明又显示不透明文本的窗口。这个问题看起来很简单，但解决起来却有点棘手。本篇文章将引导你一步步解决这个问题，并提供详细的代码示例。

技术选择

对于本教程，我们将使用 Tkinter，这是一个用于创建用户界面的 Python 库。Tkinter 因其跨平台支持、易用性和广泛的文档而闻名。虽然还有其他库可以用来创建半透明窗口，但 Tkinter 是初学者的绝佳选择。

问题诊断

创建半透明窗口和不透明文本的关键在于使用正确的 Tkinter 属性。使用 -alpha 属性可以设置窗口的透明度，使用画布可以创建不透明文本。

解决方案

要解决这个问题，我们需要按照以下步骤进行：

使用 -alpha 属性设置窗口的透明度。
使用画布在窗口中创建文本窗口小部件。
调整画布的大小以适合窗口。
将文本窗口小部件绑定到拖动事件。

代码示例

以下是修改后的 Tkinter 代码，用于创建半透明窗口并显示不透明文本：

import tkinter as tk

class DraggableWindow(tk.Toplevel):
    def __init__(self, master=None, width=300, height=200, transparency=0.75, bg_color="white", text="New window",
                 text_color='black', text_size=12, text_font=('Arial', 12)):
        super().__init__(master)

        # 窗口属性
        self.width = width
        self.height = height
        self.transparency = transparency
        self.bg_color = bg_color
        self.border_radius = 0

        # 文本属性
        self.text_content = text
        self.text_color = text_color
        self.text_size = text_size
        self.text_font = text_font

        # 设置窗口属性
        self.overrideredirect(True)  # 移除窗口装饰
        self.geometry(f'{self.width}x{self.height}')  # 设置初始尺寸
        self.attributes('-alpha', self.transparency)  # 设置初始透明度

        # 创建画布
        self.canvas = tk.Canvas(self, bg=self.bg_color, bd=0, highlightthickness=0)
        self.canvas.pack(expand=True, fill='both')

        # 创建文本窗口小部件
        self.text_id = self.canvas.create_text(
            self.width // 2, self.height // 2,
            text=self.text_content,
            fill=self.text_color,
            font=self.text_font,
            anchor='center'
        )

        # 调整画布大小
        self.canvas.config(width=self.width, height=self.height)

        # 绑定拖动事件
        self.canvas.bind('<ButtonPress-1>', self.start_drag)
        self.canvas.bind('<B1-Motion>', self.on_drag)

        # 创建上下文菜单
        self.context_menu = tk.Menu(self, tearoff=0)
        self.context_menu.add_command(label='Settings', command=self.show_settings)
        self.context_menu.add_command(label='Hide', command=self.hide_window)
        self.context_menu.add_command(label='Close', command=self.close_window)
        self.context_menu.add_command(label='Remove', command=self.remove_window)

        # 绑定上下文菜单
        self.bind('<Button-3>', self.show_context_menu)

def create_window(master, **kwargs):
    window = DraggableWindow(master, **kwargs)
    window.toggle_topmost()  # 设置初始状态
    return window

if __name__ == '__main__':
    app = tk.Tk()
    app.withdraw()  # 隐藏主窗口

    window1 = create_window(app, width=300, height=200, text="Window 1", transparency=1)
    window2 = create_window(app, width=400, height=300, text="Window 2", text_color='red', bg_color="black", transparency=0.1)

    app.mainloop()