GUI的最終選擇 Tkinter(六)：Canvas組件

Canvas組件，是一個可以讓你任性的組件，一個可以讓你隨心所欲地繪制界面的組件。Canvas是一個通用的組件，它通常用於顯示和編輯圖形，可以用它來繪制直線，圓形，多邊形，甚至是繪制其他組件。

在Canvas組件上繪制對象，可以用creat_xxx()方法（xxxvia表示對象類型，例如直線line，矩形rectangle和文本text等）。

from tkinter import *


root = Tk()
w = Canvas(root,width=200,height=100)
w.pack()
w.create_line(0,50,200,50,fill="yellow")
w.create_line(100,0,100,100,fill="red",dash=(4,4))
w.create_rectangle(50,25,150,75,fill="blue")
mainloop()

執行結果：

 

注意，添加到畫布上的對象會一直保留着。如果希望修改他們，可以使用coords(),itemconfig()和move()方法來醫用畫布上的對象，或者用delete()方法來刪除。

from tkinter import *

 

root = Tk()
w = Canvas(root,width=200,height=100)
w.pack()
line1 = w.create_line(0,50,200,50,fill="yellow")
line2 =w.create_line(100,0,100,100,fill="red",dash=(4,4))
rect = w.create_rectangle(50,25,150,75,fill="blue")
w.coords(line1,0,25,200,25)
w.itemconfig(rect,fill="red")
w.delete(line2)
Button(root,text="delete all",command=(lambda x=ALL:w.delete(x))).pack()
mainloop() 

執行結果：

 

還可以在Canvas上顯示文本，使用create_text()方法：

from tkinter import *

root = Tk()
w = Canvas(root,width=200,height=100)
w.pack()
line1 = w.create_line(0,0,200,100,fill="yellow",width=3)
line2 = w.create_line(200,0,0,100,fill="yellow",width=3)
rect1 = w.create_rectangle(40,20,160,80,fill="yellow")
rect2 = w.create_rectangle(65,35,135,65,fill="blue")
text = w.create_text(100,50,text="python3")
Button(root,text="delete all",command=(lambda x=ALL:w.delete(x))).pack()
mainloop()

執行結果：

 

 

使用create_oval()方法繪制橢圓形（或圓形），參數是指定一個限定矩形（Tkinter會自動在這個矩形中繪制一個橢圓）

from tkinter import *

root = Tk()
w = Canvas(root,width=200,height=100)
w.pack()
w.create_rectangle(40,20,160,80,dash=(4,4))
w.create_oval(40,20,160,80,fill="pink")
w.create_text(100,50,text="python")
mainloop()

執行結果:

 

而繪制圓形就是把限定矩形設置為正方形即可。

from tkinter import *

root = Tk()
w = Canvas(root,width=200,height=100)
w.pack()
w.create_rectangle(20,20,120,80,dash=(4,4))
w.create_oval(40,20,100,80,fill="pink")
w.create_text(65,50,text="python")
mainloop()

執行結果：

 

如果想繪制多邊形，可以使用create_polygon()方法。來看畫一個五角星，因為五角星不是三角函數，所以需要計算位圖，確定角度和

from tkinter import *
import math as m

root = Tk()
w = Canvas(root,width=200,height=100,background="red")
w.pack()
center_x = 100
center_y = 50
r = 50
points = [
    #左上點
    center_x - int(r*m.sin(2*m.pi/5)),
    center_y - int(r*m.cos(2*m.pi/5)),
    #右下點
    center_x + int(r*m.sin(2*m.pi/5)),
    center_y - int(r*m.cos(2*m.pi/5)),
    #左上點
    center_x - int(r*m.sin(m.pi/5)),
    center_y + int(r*m.cos(m.pi/5)),
    #頂點
    center_x,
    center_y-r,
    #右下點
    center_x + int(r*m.sin(m.pi/5)),
    center_y + int(r*m.cos(m.pi/5))
]
w.create_polygon(points,outline="green",fill="yellow")
mainloop()

執行結果：

 

下面來看一個，像windows畫圖工具那樣的畫板，可以隨心所欲的畫

先上代碼

from tkinter import *
import math as m

root = Tk()
w = Canvas(root,width=200,height=100)
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)
Label(root,text="按住鼠標拖動").pack(side=BOTTOM)
mainloop()

執行結果：

來分析下，其實這個的實現原理很簡單，就是獲取用戶拖動鼠標的坐標，然后每個坐標對應繪制一個點上去就可以了，但是Tkinter沒提供點的方法

所以我們就可以通過繪制一個超小的橢圓或者圓形來表示“點”，通過響應”鼠標拖動”事件，在鼠標拖動的同時，獲取鼠標的實時位置，並繪制超小的圓形。

除了以上關於畫布的知識點外，還有一些知識點，做個匯總：

1、Canvas組件支持的對象

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

2、坐標系

由於畫布可能比窗口大（帶有滾動條的Canvas組件）
-窗口坐標系---以窗口的左上角為坐標原點
-窗口坐標系---以畫布的左上角為坐標原點

3、畫布對象顯示的順序

Canvas組件中創建的畫布對象都會被列入顯示列表中，越接近背景的畫布對象位於顯示列表的越下方

4、指定畫布對象

Canvas組件提供幾種發放可以指定畫布對象：

-Item handles
-Tags
-ALL
-CURRENT

-Item handles：事實上是一個用於指定某個畫布對象的整型數字（在畫布組件上創建一個畫布對象的時候，Tkinter將認為Canvas組件中獨一無二的整型值，然后各種Canvas方法可以通過這個值來操縱畫布對象。）
-Tags：是附件在畫布對象上的標簽，Tags由普通的非空白字符串組成。一個畫布對象可以和多個Tags相關聯，一個Tags也可用於描述多個畫布對象。然而，與Text組件不同，沒有指定畫布對象的Tags不能實際綁定和配置樣式，也就是說，Canvas組件的Tags是僅為畫布對象所擁有的。
Canvas組件預定義兩個Tags：ALL和CURRENT
-ALL或（all）表示Canvas組件中的所有畫布對象。
-CURRENT（或current）：表示鼠標指針下的畫布對象。