### 5.2.3 在畫布上繪圖 本節介紹如何在畫布上繪制圖形。為了完整起見，我們將前面介紹過的首先需要執行的 幾條語句合在一起復制如下： ``` >>> from Tkinter import * >>> root = Tk() >>> c = Canvas(root,width=300,height=200,bg='white') >>> c.pack() ``` 如前所述，c 是一個畫布對象，而畫布對象提供了若干方法用于繪制矩形、橢圓、多邊 形等圖形。為了畫特定圖形，只要向畫布對象 c 發出執行特定方法的請求即可。 矩形 畫布對象提供 create_rectangle()方法，用于在畫布上創建矩形。矩形的位置和大 小由兩點定義：(x0,y0)給出矩形的左上角，(x1,y1)給出矩形的右下角①。用法如下： ``` create_rectangle(x0,y0,x1,y1,<選項設置>...) id = create_rectangle(x0,y0,x1,y1,<選項設置>...) ``` > ① 準確地說，矩形并不包含(x1,y1)，即(x1,y1)位于矩形右下角之外。例如，用左上角(10,10)和右下角(12,12) 定義的矩形實際上大小是 2 像素×2 像素，包含像素(11,11)但不包含像素(12,12)。 create_rectangle()的返回值是所創建的矩形的標識號，第一種用法沒有保存這個 標識號，而第二種用法將標識號存入了一個變量。 例如，下面的語句創建一個以(50,50)為左上角、以(200,100)為右下角的矩形： ``` >>> c.create_rectangle(50,50,200,100) 1 ``` 結果如圖 5.5(a)所示。注意，語句返回的 1 是矩形的標識號，表示這個矩形是畫布上的 1 號 圖形項。為了將來在程序中引用圖形，最好用變量來保存圖形的標識號，或者將圖形與某個 標簽相關聯。例如我們再創建一個矩形： ``` >>> r2 = c.create_rectangle(80,70,240,150,tags="rect#2") >>> print r2 2 ``` 結果如圖 5.5(b)所示。可見，第二個矩形的標識號為 2，它還與標簽"rect#2"相關聯。  (a)  (b) 圖 5.5 在畫布上畫矩形 矩形圖形實際上可視為由兩個部分組成：輪廓線和內部。矩形輪廓線可以用選項 outline 來設置顏色，其缺省值是黑色，即等同于設置 outline="black"。如果將 outline 設置為空串""，則不顯示輪廓線（透明的輪廓線）。輪廓線的寬度可以用選項 width 來設置，缺省值為 1 像素。矩形內部可以用選項 fill 來設置填充顏色，此選項的 缺省值是空串，即等同于設置 fill=""，效果是內部透明。 輪廓線可以畫成虛線形式，這需要用到選項 dash，該選項的值是整數元組。最常用的 是 2 元組(a,b)，其中 a 指定要畫幾個像素，b 指定要跳過幾個像素，依此重復，直至輪廓 線畫完。若 a、b 相等，可以簡記為(a,)。 矩形還有個選項 state，用于設置圖形的顯示狀態。缺省值是 NORMAL（或"normal"）， 即正常顯示。另一個有用的值是 HIDDEN（或"hidden"），它使矩形在畫布上不可見。使 一個圖形在 NORMAL 和 HIDDEN 兩個狀態之間交替變化，能形成閃爍的效果。 另外，5.2.2 中介紹過可以用選項 tags 為矩形關聯標簽，這里就不重復了。 上面例子中沒有為兩個矩形設置任何選項，即所有選項都取各自的缺省值。如 5.2.2 中所介紹的，我們可以利用畫布對象的方法 itemconfig()來設置選項值。例如： ``` >>> c.itemconfig(1,fill="black") >>> c.itemconfig(r2,fil1="grey",outline="white",width=6) ``` 執行后的結果如圖 5.6 所示。  圖 5.6 修改圖形選項 將圖 5.5 和圖 5.6 相比較即可看出，在畫布上，后創建的矩形是覆蓋在先創建的矩形之 上的，并且未涂色時矩形內部是透明的（能看到被覆蓋的矩形的輪廓線）。事實上，畫布上 的所有圖形項都是按創建次序堆疊起來的，第一個創建的圖形項處于畫布最底部（最靠近背 景），最后創建的圖形項處于畫布最頂部（最靠近前景）①。圖形的位置如果有重疊，則上面 的圖形會遮擋下面的圖形。 如上一小節所介紹的，可以使用畫布對象的 delete()和 move()方法刪除和移動圖 形。例如下列語句刪去第二個矩形（結果見圖 5.7(a)），并將第一個矩形在 x 軸和 y 軸方向 都移動 50 個像素（結果見圖 5.7(b)）： ``` >>> c.delete(r2) >>> c.move(1,50,50) ```  (b) 圖 5.7 圖形的刪除和移動 至此我們詳細介紹了矩形的畫法、選項設置和圖形操作（刪除、移動等），接下去介紹 其他圖形時會有很多相似的內容，以后我們將不重復詳述。 順便提一下，畫布對象沒有提供畫“點”的方法，但我們可以畫一個極小的矩形來當作 點。例如： ``` >>> c.create_rectangle(50,50,51,51) ``` > ① 即所有圖形項形成一個顯示列表。畫布提供方法來對此列表重新排序。具體方法可參考 Tkinter 資料。 最后說明一下繪制矩形時如何提供坐標數據。create_rectangle()方法中坐標參數 的形式是很靈活的，既可以直接提供坐標值，也可以先將坐標數據存入變量，然后將該變量 傳給該方法；既可以將所有坐標數據構成一個元組，也可以將它們組成多個元組。例如， create_rectangle()方法中的四個坐標參數既可以如上面例子那樣作為四個值，也可以 定義成兩個點（兩個 2 元組）分別賦值給兩個變量，還可以定義成一個 4 元組并賦值給一個 變量。形如： ``` >>> p1 = (10,10) >>> p2 = (50,80) >>> c.create_rectangle(p1,p2,tags="#3") >>> xy = (100,110,200,220) >>> c.create_rectangle(xy) ``` 將坐標存儲在變量中的做法是值得推薦的，因為這更便于在繪制多個圖形時計算、安排 它們的相互位置。要強調的是，這里介紹的內容對所有圖形（只要用到坐標參數）都是適用 的。 橢圓形 畫布對象提供 create_oval()方法，用于在畫布上畫一個橢圓形（特例是圓形）。橢 圓的位置和尺寸通過其限定框（bounding box，即外接矩形）決定，而限定框由左上角坐標 (x0,y0)和右下角坐標(x1,y1)定義（參見圖 5.8）。  圖 5.8 用限定框定義橢圓 創建橢圓的語句模板如下： ``` create_oval(x0,y0,x1,y1,<選項設置>...) id = create_oval(x0,y0,x1,y1,<選項設置>...) ``` create_oval()的返回值是所創建的橢圓形的標識號，第一種用法沒有保存這個標識號，而第二種用法將標識號存入了一個變量。 例如，下面的語句序列描繪地球繞太陽旋轉的軌道，其中分別創建了一個橢圓形和兩個 圓形，并且為大圓形涂上紅色表示太陽，為小圓形涂上藍色表示地球（參見圖 5.9）。 ``` >>> o1 = c.create_oval(50,50,250,150) >>> o2 = c.create_oval(110,85,140,115,fill='red') >>> o3 = c.create_oval(245,95,255,105,fill='blue') ```  圖 5.9 橢圓和圓 和矩形類似，橢圓形的常用選項包括 fill、outline、width、dash、state 和 tags等。 畫布對象的 delete()方法、move()方法和 itemconfig()方法同樣可用于橢圓形 的刪除、移動和選項設置。 弧形 畫布對象提供 create_arc()方法，用于在畫布上創建一個弧形。與橢圓的繪制類似， create_arc()的參數是用來定義一個矩形的左上角和右下角的坐標，該矩形唯一確定了 一個內接橢圓形（特例是圓形），而最終要畫的弧形是該橢圓的一段。創建弧形的語句模板 如下： ``` create_arc(x0,y0,x1,y1,<選項設置>...) id = create_arc(x0,y0,x1,y1,<選項設置>...) ``` create_arc()的返回值是所創建的弧形的標識號，第一種用法沒有保存這個標識號，而第二種用法將標識號存入了一個變量。 弧形的開始位置由選項 start 定義，其值為一個角度（以 x 軸方向為 0 度）；弧形的結 束位置由選項 extent 定義，其值表示從開始位置逆時針旋轉的角度。start 的缺省值為0 度，extent 的缺省值為 90 度。顯然，如果 start 設置為 0 度，extent 設置為 360 度， 則畫出一個完整的橢圓形，效果和 create_oval()方法一樣。 選項 style 用于規定弧形的式樣，可以取三種值：PIESLICE 或"pieslice"是扇形（弧形兩端與圓心相連），ARC 或"arc"是弧（圓周上的一段），CHORD 或"chord"是弓形（弧加連接弧兩端點的弦）。style 的缺省值是 PIESLICE。如圖 5.10 所示。  圖 5.10 三種弧形 弧形的其他常用選項 outline、fill、width、dash、state 和 tags 的意義和缺 省值都和矩形類似。注意只有 PIESLICE 和 CHORD 形狀才可填充顏色。 下面的例子畫了一個扇形、一條弧和一個弓形，結果如圖 5.11 所示。 ``` >>> bbox = (50,50,250,150) >>> c.create_arc(bbox) >>> c.create_arc(bbox,start=100,extent=140,style="arc",width=4) >>> c.create_arc(bbox,start=250,extent=110,style="chord") ```  圖 5.11 弧形 畫布對象的 delete()方法、move()方法和 itemconfig()方法同樣可用于弧形的 刪除、移動和選項設置。 線條 畫布對象提供 create_line()方法，用于在畫布上創建連接多個點的線段序列，其語 句模板如下： ``` create_line(x0,y0,x1,y1,...,xn,yn,<選項設置>...) id = create_line(x0,y0,x1,y1,...,xn,yn,<選項設置>...) ``` create_line()方法將各點(x0,y0)、(x1,y1)、…、(xn,yn)按順序用線條連接起來，返回值是所創建的線條的標識號。第一種用法沒有保存這個標識號，而第二種用法將標識號存入了一個變量。 沒有特別說明的話，相鄰兩點間用直線連接，即圖形整體上是條折線。但如果將選項 smooth 設置成非 0 值，則各點被解釋成 B-樣條曲線的頂點，圖形整體是一條平滑的曲線。 不同于矩形、橢圓、弧形中的扇形和弓形的是，線條不能形成輪廓線和內部區域兩部分，因此沒有 outline 選項，只有 fill 選項。選項 fill 在此意為線條的顏色，其缺省值為 黑色。選項 width 設置線條寬度，缺省值為 1 像素。 線條可以通過選項 arrow 來設置箭頭，該選項的缺省值是 NONE（無箭頭）。如果將 arrow 設置為 FIRST 或"first"，則箭頭在(x0,y0)端；設置為 LAST 或"last"，則箭 頭在(xn,yn)端；設置為 BOTH 或"both"，則兩端都有箭頭。 選項 arrowshape 用于描述箭頭形狀，其值為 3 元組(d1,d2,d3)，含義如圖 5.12 所 示。缺省值為(8,10,3)。  圖 5.12 箭頭形狀的定義 線條和前面介紹的各種圖形一樣，具有 dash、state、tags 等選項。 下面的語句序列畫的是北斗七星（大熊座）和北極星：其中 s1 到 s7 以及 polaris 給出了各星的坐標，我們在這些位置創建了涂黑的圓形表示北斗七星和北極星，然后用直線 段依次連接 s1 到 s7，另外沿 s6－s7 延長線方向畫了根帶箭頭的虛線指向北極星①。最下 方曲線表示地球表面，這里雖然只提供了三個點，但 Tkinter 仍能畫出一條相當平滑的曲線。 ``` >>> s1 = (20,20) >>> s2 = (60,40) >>> s3 = (80,60) >>> s4 = (85,80) >>> s5 = (70,100) >>> s6 = (85,115) >>> s7 = (110,100) >>> polaris = (220,40) >>> c.create_oval(s1,(23,23),fill='black') >>> c.create_oval(s2,(63,43),fill='black') >>> c.create_oval(s3,(83,63),fill='black') >>> c.create_oval(s4,(88,83),fill='black') >>> c.create_oval(s5,(73,103),fill='black') >>> c.create_oval(s6,(88,118),fill='black') >>> c.create_oval(s7,(113,103),fill='black') >>> c.create_oval((222,36),(226,42),fill='black') >>> c.create_line(s1,s2,s3,s4,s5,s6,s7,s4) >>> c.create_line(s7,polaris,dash=(4,),arrow=LAST) >>> c.create_line(5,190,150,160,295,190,smooth=1) ``` 結果如圖 5.13 所示。  圖 5.13 線條 畫布對象的 delete()方法、move()方法和 itemconfig()方法同樣可用于線條的 刪除、移動和選項設置。 多邊形 畫布對象提供 create_polygon()方法，用于在畫布上創建一個多邊形。與線條類似， 多邊形是用一系列頂點（至少三個）的坐標定義的，系統將把這些頂點按次序連接起來。與 線條不同的是，最后一個頂點需要與第一個頂點連接，從而形成封閉的形狀。 > ① 這是利用北斗七星尋找北極星進行定向的常識方法。 創建多邊形的語句模板如下： ``` create_polygon(x0,y0,x1,y1, ..., <選項設置>...) id = create_polygon(x0,y0,x1,y1, ..., <選項設置>...) ``` create_polygon()的返回值是所創建多邊形的標識號，第一種用法沒有保存這個標識號，而第二種用法將標識號存入了一個變量。 和矩形類似，outline 和 fill 分別設置多邊形的輪廓線顏色和內部填充色；但與矩 形不同的是，多邊形的 outline 選項缺省值為空串，即輪廓線不可見，而 fill 選項的缺 省值為黑色。 與線條類似，一般用直線連接頂點，但如果將選項 smooth 設置成非 0 值，則表示用B-樣條曲線連接頂點，這樣繪制的是由平滑曲線圍成的圖形。 下面的語句序列以不同方式連接 5 個點，或設置不同的選項值，形成三種不同的五邊形： ``` >>> p11,p21,p31 = (70,20),(70+100,20),(70,20+100) >>> p12,p22,p32 = (35,50),(35+100,50),(35,50+100) >>> p13,p23,p33 = (55,85),(55+100,85),(55,85+100) >>> p14,p24,p34 = (85,85),(85+100,85),(85,85+100) >>> p15,p25,p35 = (105,50),(105+100,50),(105,50+100) >>> c.create_polygon(p11,p12,p13,p14,p15) >>> c.create_polygon(p21,p23,p25,p22,p24,outline="black",fill="") >>> c.create_polygon(p31,p32,p33,p34,p35,outline="black",fill="") ``` 執行結果如圖 5.14 所示。  圖 5.14 多邊形 多邊形的另幾個常用選項 width、dash、state 和 tags 的用法都和矩形類似。 畫布對象的 delete()方法、move()方法和 itemconfig()方法同樣可用于多邊形的刪除、移動和選項設置。 文本 畫布對象提供 create_text()方法，用于在畫布上顯示一行或多行文本。這里，文本 是作為圖形對象看待的，與普通的字符串不同。創建文本的語句模板如下： ``` create_text(x,y,<選項設置>...) id = create_text(x,y,<選項設置>...) ``` 其中(x,y)指定顯示文本的參考位置。create_text()的返回值是所創建的文本的標識 號，第一種用法沒有保存這個標識號，而第二種用法將標識號存入了一個變量。 文本內容由選項 text 設置，其值就是顯示的字符串。字符串中可以使用換行字符"\n"， 從而實現多行文本的顯示。 選項 anchor 用于指定文本的哪個“錨點”與顯示位置(x,y)對齊。首先想象文本有 個界限框，Tkinter 為界限框定義了若干個“錨點”，錨點用東南西北等方位常量表示，如圖 5.15 所示。通過錨點可以控制文本的相對位置，例如，若將 anchor 設置為 SW，則將文本界限框的左下角置于參考點(x,y)；若將 anchor 設置為 N，則將文本界限框的頂邊中點置 于參考點(x,y)。anchor 的缺省值為 CENTER，表示將文本的中心置于參考點(x,y)。  圖 5.15 錨點 選項 fill 用于設置文本的顏色，缺省值為黑色。如果設置為空串，則文本不可見。 選項 justify 用于控制多行文本的對齊方式，其值為 LEFT、CENTER 或 RIGHT，缺省值為 LEFT。而 width 用于控制文本的寬度，超出寬度就要換行。 選項 state、tags 的意義同前。 下面的語句序列演示了如何在畫布上安排文本： ``` >>> t1 = c.create_text(10,10,text="NW@(10,10)",anchor=NW) >>> c.create_text(150,10,text="N@(150,10)",anchor=N) >>> c.create_text(290,10,text="NE@(290,10)",anchor=NE) >>> c.create_text(10,100,text="W@(10,100)",anchor=W) >>> c.create_text(150,100,text="CENTER@(150,100)\n2nd Line") >>> c.create_text(290,100,text="E@(290,100)",anchor=E) >>> c.create_text(10,190,text="SW@(10,190)",anchor=SW) >>> c.create_text(150,190,text="S@(150,190)",anchor=S) >>> c.create_text(290,190,text="SE@(290,190)",anchor=SE) ```  結果如圖 5.16 所示。 圖 5.16 文本 程序中可能需要讀取或修改文本的內容，畫布對象的 itemcget()和 itemconfig()方法可用于此目的。例如： ``` >>> print c.itemcget(t1,"text") NW@(10,10) >>> c.itemconfig(t1,text="NorthWest") ``` 其中第一行讀取標識號為 t1 的文本項的 text 選項值；第三行將標識號為 t1 的文本的 text 選項重新設置為"NorthWest"。 畫布對象的 delete()方法、move()方法同樣可用于文本的刪除和移動。 圖像 除了在畫布上自己畫圖，還可以將來自文件的現成圖像顯示在畫布上。Tkinter 針對不 同格式的圖像文件有不同的顯示方法，這里我們只介紹顯示 gif 格式圖像的方法。 第一步是利用 Tkinter 提供的 PhotoImage 類來創建圖像對象，語句模板如下： ``` img = PhotoImage(file = <圖像文件名>) ``` 其中選項 file 用于指定圖像文件（支持 gif、pgm、ppm 格式①），PhotoImage()返回值是一個圖像對象，這里我們用變量 img 引用這個對象，接下去將把這個圖像對象顯示在畫布中②。 第二步是在畫布上顯示圖像，這可通過畫布對象提供的 create_image()方法完成。 該方法的用法如下： ``` c.create_image(x,y,image = <圖像對象>,<選項設置>...) id = c.create_image(x,y,image=<圖像對象>,<選項設置>...) ``` 其中(x,y)是決定圖像顯示位置的參考點；image 選項決定顯示的圖像，其值就是第一步創建的圖像對象。create_image()的返回值是所創建的圖像在畫布上的標識號，第一種用法沒有保存這個標識號，而第二種用法將標識號存入了一個變量。 圖像在畫布上的位置由參考點(x,y)和 anchor 選項決定，具體設置與文本相同。 例如，假設電腦上有個文件 C:\WINDOWS\Web\exclam.gif ，則下列語句序列首先為該圖像文件創建了一個圖像對象 pic，然后將該圖像對象顯示在了畫布中： ``` >>> pic = PhotoImage(file = "C:\WINDOWS\Web\exclam.gif") >>> c.create_image(150,100,image=pic) ```  結果如圖 5.17 所示。 圖 5.17 畫布上顯示圖像 可以為圖像設置選項 state、tags，意義同前。 畫布對象的 delete()方法、move()方法同樣可用于圖像的刪除和移動。 > ① 至于常見的 jpg 格式或其他格式的圖像，可以利用 Python 圖像庫（PIL）轉換成 Tkinter 圖像對象。 > ② 還可以顯示在按鈕（Button）、標簽（Label）、文本（Text）等 GUI 構件中，參見第 8 章。 除了以上各種圖形、文字和圖像，我們還可以在畫布上放置其他 GUI 構件，例如按鈕、 勾選鈕等，以便用戶更好地與畫布進行交互。讀者學習了第 8 章后可以試著編寫這樣的程序。