Tkinter Canvas 如何在顶部绘制文本?

在 Tkinter 的 Canvas 上绘制文本非常简单，我们可以使用 create_text 方法来完成这个任务。create_text 方法允许我们指定文本的位置、内容以及字体等属性。为了确保文本绘制在顶部，我们可以设置 y 坐标接近 Canvas 的顶部。

1、问题背景

在使用 Tkinter 创建状态栏时，我们需要在画布上绘制文本信息。但是，当我们使用 Canvas.create_rectangle() 函数绘制背景时，文本会被遮挡住。这是一个常见的 Tkinter 问题，因为默认情况下，后绘制的元素会覆盖之前绘制的元素。

2、解决方案

方法一

一种常见的解决方法是使用 Canvas.lift() 函数，将文本元素的层次提高到背景元素之上。如下面的代码所示：

class Statusbar(Canvas):
    '''Creates a statusbar widget'''
    def __init__(self, master = None, **options):
        if not master: master = Tk()
        self.master, self.options = master, options
        self.barFill, self.addText, self.value = self.options.get('barFill', 'red'), self.options.get('addText', True), 0
        for option in ('barFill', 'addText'):
            if option in self.options: del self.options[option]
        Canvas.__init__(self, master, **self.options)
        self.offset = self.winfo_reqwidth() / 100
        self.height = self.winfo_reqwidth()
        if self.addText: self.text = self.create_text(self.winfo_reqwidth()/2, self.winfo_reqheight()/2, text = '0%')
        self.bar = self.create_rectangle(0, 0, self.value, self.height, fill = self.barFill)

    def setValue(self, value):
        '''Sets the value of the status bar as a percent'''
        self.value = value * self.offset
        self.coords(self.bar, 0, 0, self.value, self.height)
        if self.addText: self.itemconfigure(self.text, text = str(self.value/self.offset) + '%')
        self.lift(self.text, self.bar)

    def change(self, value):
        '''Changes the value as a percent'''
        self.value += (value * self.offset)
        self.coords(self.bar, 0, 0, self.value, self.height)
        if self.addText: self.itemconfigure(self.text, text = str(self.value/self.offset) + '%')
        self.lift(self.text, self.bar)

方法二

另一种解决方法是使用 Canvas.tag_raise() 函数，将文本元素的标签提升到背景元素之上。如下面的代码所示：

class Statusbar(Canvas):
    '''Creates a statusbar widget'''
    def __init__(self, master = None, **options):
        if not master: master = Tk()
        self.master, self.options = master, options
        self.barFill, self.addText, self.value = self.options.get('barFill', 'red'), self.options.get('addText', True), 0
        for option in ('barFill', 'addText'):
            if option in self.options: del self.options[option]
        Canvas.__init__(self, master, **self.options)
        self.offset = self.winfo_reqwidth() / 100
        self.height = self.winfo_reqwidth()
        if self.addText: self.text = self.create_text(self.winfo_reqwidth()/2, self.winfo_reqheight()/2, text = '0%', tags='text')
        self.bar = self.create_rectangle(0, 0, self.value, self.height, fill = self.barFill, tags='bar')

    def setValue(self, value):
        '''Sets the value of the status bar as a percent'''
        self.value = value * self.offset
        self.coords(self.bar, 0, 0, self.value, self.height)
        if self.addText: self.itemconfigure(self.text, text = str(self.value/self.offset) + '%')
        self.tag_raise('text', 'bar')

    def change(self, value):
        '''Changes the value as a percent'''
        self.value += (value * self.offset)
        self.coords(self.bar, 0, 0, self.value, self.height)
        if self.addText: self.itemconfigure(self.text, text = str(self.value/self.offset) + '%')
        self.tag_raise('text', 'bar')

通过使用上述代码，我们可以确保文本始终位于背景元素之上，从而解决文本被遮挡的问题。