7.1 tkinter Canvas 的幾個例子

先載入必備的包：

from tkinter import Tk, ttk, PhotoImage, Canvas
from tkinter import Menu, StringVar, filedialog, Listbox

1 一個可以滾動的畫布

class App(Tk):
    def __init__(self):
        super().__init__()
        self._set_scroll()
        self._create_canvas()
        self._scroll_command()
        self._create_button()
        self.canvas.create_window((0, 0), window=self.frame,
                                  anchor='nw')
        self.layout()
        self.bind("<Configure>", self.resize)
        self.update_idletasks()
        self.minsize(self.winfo_width(), self.winfo_height())

    def _set_scroll(self):
        self.scroll_x = ttk.Scrollbar(orient='horizontal')
        self.scroll_y = ttk.Scrollbar(orient='vertical')

    def _create_canvas(self):
        self.canvas = Canvas(width=300, height=100,
                             xscrollcommand=self.scroll_x.set,
                             yscrollcommand=self.scroll_y.set)

    def _scroll_command(self):
        self.scroll_x['command'] = self.canvas.xview
        self.scroll_y['command'] = self.canvas.yview

    def _create_button(self):
        self.frame = ttk.Frame(self.canvas)
        self.button = ttk.Button(self.frame, text="載入圖片",
                                 command=self.load_image)

    def layout(self):
        self.button.grid()
        self.canvas.grid(row=0, column=0, sticky="nswe")
        self.scroll_x.grid(row=1, column=0, sticky="we")
        self.scroll_y.grid(row=0, column=1, sticky="ns")
        self.rowconfigure(0, weight=1)
        self.columnconfigure(0, weight=1)

    def resize(self, event):
        region = self.canvas.bbox('all')
        self.canvas.configure(scrollregion=region)

    def load_image(self):
        self.button.destroy()
        self.image = PhotoImage(file="python.gif")
        ttk.Label(self.frame, image=self.image).grid()


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

create_window 方法將框架添加到可滾動畫布坟比。第一個參數(shù)是放置與窗口選項(xiàng)一起傳遞的小部件的位置燕差。由于 Canvas 小控件的 x 軸和 y 軸從左上角開始吼过，因此我們將框架置于 $(0,0)$ 位置桐罕，并且還將其與該角對齊藻肄，并帶有 anchor='nw'。當(dāng)主窗口調(diào)整大小時饱亮，綁定到 <Configure> 事件將幫助我們正確重新配置畫布兆旬。為了獲得容器的實(shí)際大小吧凉，我們必須強(qiáng)制幾何管理器通過調(diào)用update_idletasks 來繪制所有子小部件隧出。此方法在所有小部件類中都可用，并強(qiáng)制 Tkinter 處理所有掛起的空閑事件阀捅，如重新繪制和幾何重新計(jì)算胀瞪。要輕松重新計(jì)算，可以使用 bbox 方法與 all 常數(shù)饲鄙。這將返回整個"canvas"微件的邊界框凄诞。

效果圖：

圖1 提供載入圖片的按鈕

點(diǎn)擊按鈕將銷毀按鈕并載入圖片，可以使用滑塊查看圖片：

圖2 點(diǎn)擊按鈕載入圖片

2 顯示鼠標(biāo)的坐標(biāo)

class App(Tk):
    def __init__(self):
        super().__init__()
        self.title("canvas 基礎(chǔ)")

        self.canvas = Canvas(bg="white")
        self.label = ttk.Label()
        self.canvas.bind("<Motion>", self.mouse_motion)
        self.canvas.grid()
        self.label.grid()

    def mouse_motion(self, event):
        self.label['text'] = f"鼠標(biāo)位置: ({event.x}, {event.y})"


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

效果圖：

圖2 顯示鼠標(biāo)的位置

3 畫線

class LineForm(ttk.LabelFrame):
    arrows = ('none', 'first', 'last', 'both')
    colors = ("black", "red", "blue", "green")

    def __init__(self, master=None, **kw):
        super().__init__(master, text="線條的選擇", **kw)
        self.create_var()
        self.set_arrow()
        self.set_color()
        self.set_line()
        self.layout()
        self.arrow.set(self.arrows[0])
        self.color.set(self.colors[0])
        self.line_width.set(1)

    def create_var(self):
        self.arrow = StringVar()
        self.color = StringVar()

    def set_arrow(self):
        self.arrow_label = ttk.Label(self, text="Arrow style")
        self.arrow_option = ttk.OptionMenu(self, self.arrow, *self.arrows)

    def set_color(self):
        self.color_label = ttk.Label(self, text="Fill color")
        self.color_option = ttk.OptionMenu(self, self.color, *self.colors)

    def set_line(self):
        self.line_width_label = ttk.Label(self, text="Line width")
        self.line_width = ttk.Spinbox(self, from_=1, to=5, width=5)

    def layout(self):
        self.arrow_label.grid(sticky='w', row=0, column=0)
        self.arrow_option.grid(row=0, column=1, pady=10)
        self.color_label.grid(sticky='w', row=1, column=0)
        self.color_option.grid(row=1, column=1, pady=10)
        self.line_width_label.grid(sticky='w', row=2, column=0)
        self.line_width.grid(row=2, column=1, pady=10)

    def get_value(self, var_name):
        if var_name == 'arrow':
            return self.arrow.get()
        elif var_name == 'color':
            return self.color.get()
        elif var_name == 'line_width':
            return int(self.line_width.get())


class App(Tk):
    def __init__(self):
        super().__init__()
        self.title("Basic canvas")
        self.line_start = None
        self.form = LineForm()
        self.canvas = Canvas(bg="white")
        self.canvas.bind("<Button-1>", self.draw)

        self.form.grid(row=0, column=0, padx=10, pady=10)
        self.canvas.grid(row=0, column=1)

    def draw(self, event):
        x, y = event.x, event.y
        if not self.line_start:
            self.line_start = (x, y)
        else:
            x_origin, y_origin = self.line_start
            self.line_start = None
            line = (x_origin, y_origin, x, y)
            arrow, color, width = [self.form.get_value(name)
                                   for name in ('arrow', 'color', 'line_width')]
            self.canvas.create_line(*line, arrow=arrow,
                                    fill=color, width=width)


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

顯示效果：

圖3 不同格式的線

4 畫出文本

class App(Tk):
    def __init__(self):
        super().__init__()
        self.title("Canvas text items")
        self.geometry("300x100")

        self.var = StringVar()
        self.entry = ttk.Entry(self, textvariable=self.var)
        self.canvas = Canvas(self, bg="white")

        self.entry.pack(pady=5)
        self.canvas.pack()
        self.update()

        w, h = self.canvas.winfo_width(), self.canvas.winfo_height()
        options = {"font": "courier", "fill": "blue",
                   "activefill": "red"}
        self.text_id = self.canvas.create_text((w/2, h/2), **options)
        self.var.trace("w", self.write_text)

    def write_text(self, *args):
        self.canvas.itemconfig(self.text_id, text=self.var.get())


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

圖4 畫出文本

畫出不同的形狀

class App(Tk):
    shapes = ("rectangle", "oval", "arc")

    def __init__(self):
        super().__init__()
        self.title("Drawing standard items")
        style = ttk.Style()
        style.map("C.TButton",
                  foreground=[('pressed', 'red'), ('active', 'blue')],
                  background=[('pressed', '!disabled', 'black'),
                              ('active', 'white')],
                  relief=[('pressed', '!disabled', 'sunken')]
                  )

        self.start = None
        self.shape = None
        self.canvas = Canvas(self, bg="white")
        frame = ttk.Frame(self)
        for shape in self.shapes:
            btn = ttk.Button(frame, text=shape.capitalize(), style="C.TButton")
            btn.config(command=partial(self.set_selection, shape))
            btn.pack(side='left', expand=True, fill='both')

        self.canvas.bind("<Button-1>", self.draw_item)
        self.canvas.pack()
        frame.pack(fill='both')

    def set_selection(self, shape):
        self.shape = shape

    def draw_item(self, event):
        x, y = event.x, event.y
        if not self.start:
            self.start = (x, y)
        else:
            x_origin, y_origin = self.start
            self.start = None
            bbox = (x_origin, y_origin, x, y)
            if self.shape == "rectangle":
                self.canvas.create_rectangle(*bbox, fill="blue",
                                             activefill="yellow")
            elif self.shape == "oval":
                self.canvas.create_oval(*bbox, fill="red",
                                        activefill="yellow")
            elif self.shape == "arc":
                self.canvas.create_arc(*bbox, fill="green",
                                       activefill="yellow")


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

圖5 點(diǎn)擊不同按鈕畫不同的圖形

設(shè)置圖形可用鼠標(biāo)隱藏的操作

root = Tk()
canvas = Canvas(root)
canvas.create_rectangle(10, 10, 200, 200, fill='red', tags='rect')
canvas.create_rectangle(100, 100, 300, 300, fill='blue', tags='rect1')

def set_hidden(event):
    canvas.itemconfigure('rect1', state = 'hidden')
    
canvas.tag_bind('rect1', '<1>', set_hidden)
canvas.grid()
root.mainloop()

當(dāng)您使用鼠標(biāo)左鍵將會把藍(lán)色的矩形隱藏忍级。