1. 程式人生 > >GUI的最終選擇 Tkinter(六):Canvas元件

GUI的最終選擇 Tkinter(六):Canvas元件

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

在Canvas元件上繪製物件,可以用creat_xxx()方法(xxxvia表示物件型別,例如直線line,矩形rectangle和文字text等)。

 1 from tkinter import *
 2 
 3 
 4 root = Tk()
 5 w = Canvas(root,width=200,height=100)
 6 w.pack()
 7 w.create_line(0,50
,200,50,fill="yellow") 8 w.create_line(100,0,100,100,fill="red",dash=(4,4)) 9 w.create_rectangle(50,25,150,75,fill="blue") 10 mainloop()

執行結果:

 

注意,新增到畫布上的物件會一直保留著。如果希望修改他們,可以使用coords(),itemconfig()和move()方法來醫用畫布上的物件,或者用delete()方法來刪除。

 1 from tkinter import *
 2 
 3  
 4 
 5 root = Tk()
 6
w = Canvas(root,width=200,height=100) 7 w.pack() 8 line1 = w.create_line(0,50,200,50,fill="yellow") 9 line2 =w.create_line(100,0,100,100,fill="red",dash=(4,4)) 10 rect = w.create_rectangle(50,25,150,75,fill="blue") 11 w.coords(line1,0,25,200,25) 12 w.itemconfig(rect,fill="red") 13 w.delete(line2) 14 Button(root,text="
delete all",command=(lambda x=ALL:w.delete(x))).pack() 15 mainloop() 

執行結果:

 

還可以在Canvas上顯示文字,使用create_text()方法:

 1 from tkinter import *
 2 
 3 root = Tk()
 4 w = Canvas(root,width=200,height=100)
 5 w.pack()
 6 line1 = w.create_line(0,0,200,100,fill="yellow",width=3)
 7 line2 = w.create_line(200,0,0,100,fill="yellow",width=3)
 8 rect1 = w.create_rectangle(40,20,160,80,fill="yellow")
 9 rect2 = w.create_rectangle(65,35,135,65,fill="blue")
10 text = w.create_text(100,50,text="python3")
11 Button(root,text="delete all",command=(lambda x=ALL:w.delete(x))).pack()
12 mainloop()

執行結果:

 

 

使用create_oval()方法繪製橢圓形(或圓形),引數是指定一個限定矩形(Tkinter會自動在這個矩形中繪製一個橢圓)

1 from tkinter import *
2 
3 root = Tk()
4 w = Canvas(root,width=200,height=100)
5 w.pack()
6 w.create_rectangle(40,20,160,80,dash=(4,4))
7 w.create_oval(40,20,160,80,fill="pink")
8 w.create_text(100,50,text="python")
9 mainloop()

執行結果:

 

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

1 from tkinter import *
2 
3 root = Tk()
4 w = Canvas(root,width=200,height=100)
5 w.pack()
6 w.create_rectangle(20,20,120,80,dash=(4,4))
7 w.create_oval(40,20,100,80,fill="pink")
8 w.create_text(65,50,text="python")
9 mainloop()

執行結果:

 

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

 1 from tkinter import *
 2 import math as m
 3 
 4 root = Tk()
 5 w = Canvas(root,width=200,height=100,background="red")
 6 w.pack()
 7 center_x = 100
 8 center_y = 50
 9 r = 50
10 points = [
11     #左上點
12     center_x - int(r*m.sin(2*m.pi/5)),
13     center_y - int(r*m.cos(2*m.pi/5)),
14     #右下點
15     center_x + int(r*m.sin(2*m.pi/5)),
16     center_y - int(r*m.cos(2*m.pi/5)),
17     #左上點
18     center_x - int(r*m.sin(m.pi/5)),
19     center_y + int(r*m.cos(m.pi/5)),
20     #頂點
21     center_x,
22     center_y-r,
23     #右下點
24     center_x + int(r*m.sin(m.pi/5)),
25     center_y + int(r*m.cos(m.pi/5))
26 ]
27 w.create_polygon(points,outline="green",fill="yellow")
28 mainloop()

執行結果:

 

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

先上程式碼

 1 from tkinter import *
 2 import math as m
 3 
 4 root = Tk()
 5 w = Canvas(root,width=200,height=100)
 6 w.pack()
 7 def paint(event):
 8     x1,y1 = (event.x-1),(event.y-1)
 9     x2,y2 = (event.x+1),(event.y+1)
10     w.create_oval(x1,y1,x2,y2,fill="red")
11 w.bind("<B1 - Motion>",paint)
12 Label(root,text="按住滑鼠拖動").pack(side=BOTTOM)
13 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):表示滑鼠指標下的畫布物件。