72 《零基礎入門學習Python》筆記 第072講：GUI的終極選擇：Tkinter9

《零基礎入門學習Python》第072講：GUI的終極選擇：Tkinter9

這節課我們接著來講解Canvas 組件，既然Cnavas 是畫布的意思，那我們能不能讓這個組件來設計一個畫板呢？像Windows 自帶的畫圖程序，我們的用戶可以在上面隨心所欲的繪製自己想要的圖畫，大家仔細想想，其實畫圖程序的實現原理很簡單，就是通過獲取用戶拖拽鼠標時候的每一個位置（每個坐標），然後每個坐標對應繪製上一個點就可以了。這就提供了用戶進行自由的繪製，但是有一點，tkinter 並沒有提供支持畫點的方法，但是呢，我們可以通過繪製一個超小的圓來表示一個點。

我們來實現一下：

import tkinter as tk

















root = tk.Tk()

















w = tk.Canvas(width = 400, height = 200)








w.pack()

















def paint(event):








x1, y1 = (event.x -1), (event.y -1)








x2, y2 = (event.x +1), (event.y +1)








w.create_oval(x1,y1,x2,y2, fill = "red")

















w.bind("<B1-Motion>", paint)

















tk.Label(root, text = "按住鼠标左键并拖拽，绘制你的理想蓝图吧......").pack(side = "bottom")

















root.mainloop()

關於Cnavas，有些概念我認為你們需要理解，（溫馨提示一下，如果對各個組件還有什麼不懂的，可以直接看我整理的各組件的詳解。）

Carvas 組件支持一些對象：

• arc（弧形、弦或扇形）
• bitmap（內建的位圖文件或XBM 格式的文件）
• image（BitmapImage 或PhotoImage 的實例對象）
• line（線）
• oval（圓或橢圓形）
• polygon（多邊形）
• rectangle（矩形）
• text（文本）
• window（組件）

其中，弦、扇形、橢圓形、圓形、多邊形和矩形這些“封閉式”圖形都是由輪廓線（outline）和填充（fill）顏色組成的，但都可以設置為透明（傳入空字符串表示透明）。

Canvas 組件可以選擇使用兩種坐標系：

• 窗口坐標系：以窗口的左上角作為坐標原點
• 畫布坐標系：以畫布的左上角作為坐標原點

將窗口坐標系轉換為畫布坐標系，可以使用canvasx() 或canvasy() 方法。

畫布對象顯示的順序

Canvas 組件中創建的畫布對像都會被列入顯示列表中，越接近背景的畫布對象位於顯示列表的越下方。顯示列表決定當兩個畫布對象重疊的時候是如何覆蓋的（默認情況下新創建的會覆蓋舊的畫布對象的重疊部分，即位於顯示列表上方的畫布對象將覆蓋下方那個）。當然，顯示列表中的畫布對象可以被重新排序。

指定畫布對象

Canvas 組件提供幾種方法讓你指定畫布對象：

• Item handles
• Tags
• "all"
• "current"

ndles 事實上是一個用於指定某個畫布對象的整型數字（也成為畫布對象的ID）。當你在Canvas 組件上創建一個畫布對象的時候，Tkinter 將自動為其指定一個在該Canvas 組件中獨一無二的整型值。然後各種Canvas 的方法可以通過這個值操縱該畫布對象。

Tags 是附在畫布對像上的標籤，Tags 由普通的非空白字符串組成。一個畫布對象可以與多個Tags 相關聯，一個Tag 也可用於描述多個畫布對象。然而，與Text 組件不同，沒有指定畫布對象的Tags 不能進行事件綁定和配置樣式。也就是說，Canvas 組件的Tags 是僅為畫布對象所擁有。

Canvas 組件預定義了兩個Tags："all" 和"current"

 "all" 表示Canvas 組件中的所有畫布對象

 "current" 表示鼠標指針下的畫布對象（如果有的話）

畫一個哆啦A夢：（相信大家只要有耐心，好好計算坐標點，都能夠畫出來的）

import tkinter as tk








root = tk.Tk()








#画板








w = tk.Canvas(root, width=600, height=600, background="white")








w.pack()

















#使用RGB颜色设计浅蓝色








Light_blue ="#%02x%02x%02x" % (0, 159, 232)

















#头的轮廓蓝色








w.create_oval(150, 100,450,400,outline="black",fill=Light_blue)








#脸的白色








w.create_oval(175, 150,425,400,outline="black",fill="white")








#眼睛，椭圆，白色，先左后右








w.create_oval(250,115,300,180,outline="black",fill="white")








w.create_oval(300,115,350,180,outline="black",fill="white")








#眼睛  ==》》黑色，椭圆，先左后右








w.create_oval(280,137,295,159,outline="black",fill="black")








w.create_oval(305,137,320,159,outline="black",fill="black")








#眼睛==》》白色，椭圆，先左后右








w.create_line(287.5,145,287.5,151,fill='white',width=3,capstyle='round')








w.create_line(312.5,145,312.5,151,fill='white',width=3,capstyle='round')








#脸上的竖线黑色








w.create_line(300,180,300,300,fill='black',width=1)








#胡须水平的部分黑色，先左后右








w.create_line(200,240,280,240,fill='black',width=1.5)








w.create_line(320,240,400,240,fill='black',width=1.5)








#胡须位于水平胡须下方的两根黑色，先左后右








w.create_line(210,280,280,260,fill='black',width=1.5)








w.create_line(320,260,390,280,fill='black',width=1.5)








#胡须位于水平胡须上方的两根黑色，先左后右，








w.create_line(210,200,280,220,fill='black',width=1.5)








w.create_line(320,220,390,200,fill='black',width=1.5)








#嘴巴部分黑色








w.create_arc(175,50,425,300,width=1,style="arc",start=240,extent=60)








#鼻子红色








w.create_oval(290, 170,310,190,outline="black",fill="red")








#胳膊，蓝色，从左至右








w.create_arc(-75, 325,265,665,width=1,start=35,extent=20,style="pieslice",outline='black',fill=Light_blue)








w.create_arc(335, 325,675,665,width=1,start=125,extent=20,style="pieslice",outline='black',fill=Light_blue)








#胳膊去圆心部分，白色，从左至右








w.create_arc(50, 450,140,540,width=1,start=35,extent=20,style="pieslice",outline='white',fill='white')








w.create_arc(460, 450,550,540,width=1,start=125,extent=20,style="pieslice",outline='white',fill='white')








#手，白色，从左至右








w.create_oval(120, 430,160,470,outline="black",fill="white")








w.create_oval(440, 430,480,470,outline="black",fill="white")








#身体蓝色部分








w.create_rectangle(188,350,412,550,fill=Light_blue,outline="black")








#腹部的圆，白色








w.create_oval(215, 340,385,510,outline="white",fill="white")








#脖子上的横线红色部分








w.create_line(188,350,412,350,fill='red',width=15,capstyle='round')








#腹部的半圆，白色








w.create_arc(240, 365,360,485,width=1,start=180,extent=180,style="pieslice",outline='black',fill='white')








#两脚中间的扇形 白色








w.create_arc(280, 530,320,570,width=1,start=0,extent=180,style="pieslice",outline='white',fill='white')








#两只脚，椭圆，白色








w.create_oval(170, 530,290,570,outline="black",fill="white")








w.create_oval(310, 530,430,570,outline="black",fill="white")








#铃铛部分，黄色








w.create_oval(286, 346,314,374,outline="black",fill="yellow")








#铃铛的横线，黄色,使用矩形








w.create_rectangle(286,357,314,361,fill="yellow",outline="black")








#铃铛上的小红圆








w.create_oval(297, 363,303,369,outline="black",fill="red")








#脸上的竖线黑色








w.create_line(300,369,300,374,fill='black',width=1)

















root.mainloop()

在這裡我學會的一點就是：

如何在tkinter 中使用自定義的RGB 顏色：

語法如下：

define_color ="#%02x%02x%02x" % (0, 159, 232)  

上面這一行代碼的意思就是創建一個名為define_color 的變量，存取RGB 分別為0,159,232 的顏色。

在後面就是直接使用define_color，如：background = define_color，不需要加引號了。

•