當前位置:首頁 ? tkinter ? 正文

tkinter的Canvas組件,繪畫基本知識

Canvas組件,可以用來繪圖,也可以用來制作動畫,繪圖,可以繪線條,圓,方形,多邊形,制作動畫,這是制作游戲的基礎。

Canvas組件要學習的東西很多,參數也多,我覺得,我們可以先學一些基礎的東西,等了解基礎知識后,再深入學習。

Canvas組件,既然畫線,畫方框,畫多邊形,畫圓,畫文字,畫組件等對象,你可以把Canvas組件當成容器組件來看待,先用“畫”的方式來在畫布里創建線,圓,框,文字,組件等,然后,再可經為這個組件設置各種屬性:如更改坐標,改變顏色,當然你可以刪除這些對象。

首先,我們先來學習如何如何創建畫布,即Canvas組件。

 語法:Canvas(父組件,參數…….

先創建 一個淺藍畫布看看 

from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=200,height=150,background='lightblue')  # 淺藍畫布
 
can1.pack()
 
root.mainloop()

運行結果生成一個淺藍色的畫布(默認的畫布背景顏色是跟窗體背景顏色是一樣的,不太好辨認邊界)

 

繪制線條:

create_line(x1, y1, x2, y2, …… xn,yn, 參數)

 

(X1,Y1),(x2,y2) ……. (xn,yn)  是不同點的坐標,畫線的過程就是 (X1,Y1),連接 (x2,y2),再連接(x3,y3), …….再連接 (xn,yn)。

 

參數:

arrow :

arrow=FIRST 起始點有箭頭  arrow=LAST 最后一條線的末端有箭頭

arrow=BOTH 2端都有箭頭   默認是沒有箭頭

   

capstyle:

    線條末端的樣式:BUTT,  PROJECTING,  ROUND  默認為BUTT

 

dash:

    畫的線為虛線,虛線信息由元組來表現,元組的第1個數字為實線像素,第2個為空白像素,實線和空白交替使用元組的數字,用完后,再重新使用元組的第1個數字。如:

dash(5,1,1,1) 5像素的實線,1像素的空白,1像素的實線,1像素的空白

 

stipple: 繪制位圖線條

widht : 線條寬度(粗細)

fill : 線條顏色

 

下面的代碼來演示一下上面參數。

from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=220,height=150,background='lightblue') # 淺藍畫布
can1.pack(fill=BOTH,expand=True) 
 
can1.create_line(20,10,200,10) # 默認粗細線條
can1.create_line(20,35,200,35,width=5) # 粗線
can1.create_line(20,60,200,60,width=10,fill='red') # 紅線
can1.create_line(20,85,200,85,dash=(5,2)) # 虛線
can1.create_line(20,110,200,110,arrow=BOTH) # 2端有箭頭
can1.create_line(20,135,200,135,stipple='questhead',width=15) # 位圖線
 
root.mainloop()

運行結果

      1.PNG

 

繪制矩形:

create_rectangle(x1,y1, x2,y2, 參數)

 

(x1,y1) x2,y2)是矩形的左上角和右下角的坐標,由2個坐標決定矩形的大小。

 

參數:

dash: 矩形線條為虛線

fill :  矩形填充顏色

outline:矩形線條顏色

stipple:位圖填充矩形

width: 矩形線條寬度

from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=220,height=150,background='lightblue') # 淺藍畫布
can1.pack(fill=BOTH,expand=True) 
 
can1.create_rectangle(30,10,90,60,fill='red',outline='green',width=4)  # 左上圖
 
can1.create_rectangle(130,10,200,60,dash=(3,2)) # 右上圖
 
can1.create_rectangle(20,80,100,140,stipple='questhead',
     fill='red', outline='blue',width=2) # 左下圖
 
can1.create_rectangle(120,80,210,140,stipple='questhead',
     fill='blue', outline='red',width=2,dash=(3,2)) # 右下圖
 
root.mainloop()

運行結果

2.PNG

 

繪制圓?。?/span>

create_arc( x1,y1, x2,y2, extent=angle, sytle=ARC, 參數 )

 

(x1,y1) x2,y2)決定一個矩形的左上角和右下角的坐標,而這個矩形決定圓弧的形狀(弧度)。

extent: 跨度,即從圓弧的起始益到結束位置的角度,默認為90,范圍是1359

style: 樣式:扇形(‘pieslice’)  弓形(‘chord’) 弧形(‘arc’)  默認扇形

dash: 虛線

fill : 填充顏色

outline :圓弧線條顏色

start : 圓弧起始位置,默認益是圓弧的右邊開始,方向是逆時針

stipple : 位圖圓弧

width : 圓弧線條寬度(粗細)

 

其實create_arc() 方法可以創建:圓,圓弧,橢圓,橢圓弧。


(x1,y1) x2,y2)坐標來決定的是畫圓和圓弧還是畫橢圓及橢圓弧 

如果由這2對坐標參數決定的是一個正方形,那創建的就是這個正方形內的內切圓或圓??;

如果由這2對坐標參數決定的是一個長方形,那創建的就是這個長方形內的內切橢圓或橢圓??;


我來自www.chinaengraver.com何老師的濟亨網

下面的代碼先畫一個正方形,然后根據最上面的3項設置,用正方式同樣的坐標畫圓,圓弧,弓形,扇形,大家感受一下。 丶丌皛

from tkinter import *
 
root=Tk()
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 不設置邊線寬,無法顯示
fr1.pack(fill=X)
fr2=Frame(root,relief='ridge',borderwidth=1) # 不設置邊線寬,無法顯示
fr2.pack()
 
var1=StringVar()
op1=OptionMenu(fr1,var1,'弓形','弧形','扇形').pack(side=LEFT,padx=20)
var1.set('弧形')
 
sca1=Scale(fr1,from_=0,to=359,orient=HORIZONTAL,label='起始偏移角度')
sca1.pack(side=LEFT,padx=20)
 
sca2=Scale(fr1,from_=0,to=359,orient=HORIZONTAL,label='圓心度(弧的跨度)')
sca2.pack(side=LEFT,padx=20)
 
def ok():
    can1.delete('all')  # 清除所有對象
    can1.create_rectangle(50,10,180,140,dash=(3,2)) # 畫 正方形
    can1.create_line(115,0,115,150,dash=(3,2),fill='yellow') # 畫 水平中線
    can1.create_line(40,75,190,75,dash=(3,2),fill='yellow') # 畫 垂直中線
 
    a=var1.get()
    if a=='弓形':
        b='chord'
    elif a=='弧形':
        b='arc'
    elif a=='扇形':
        b='pieslice'
 
    can1.create_arc(50,10,180,140,style=b,start=sca1.get(),extent=sca2.get(),outline='red',width=4)
    # 根據參數的不同,生成不同的圓,圓?。ü?,扇形)
 
but1=Button(fr2,text=" 畫:圓、弧線 ",command=ok)
but1.pack()
 
can1=Canvas(fr2,width=220,height=150,background='lightblue') # 淺藍畫布
can1.pack(fill=BOTH,expand=True) 
 
ok()
 
root.mainloop()

運行后,調節3個參數的值,會出現不同形狀,位置的圓弧。

3.PNG

圓心角調整到359度,就顯示一個圓,但這個圓只有359度,仔細看,有缺角的。如果你調整到360度,其實就是0度,就什么都畫不出來。

 

以下隨便是選取一個偏移角度,再搭配弓形,扇形,畫出來的圖形。

注:水平黃線向右方向,是偏移0度,逆時針方向,可以0 - 359度偏移。

注意:fill 填充參數沒有演示,這個參數填充顏色,只能是弓形和扇形才可以填充顏色。

 

舉一反三,你可以把上面的代碼,正方形的坐標改成長方形,就會畫出橢圓,以及橢圓弧,在這里就不再演示了。

 

上面用畫圓弧的方法畫圓,其實只是一個大的圓弧,并不是真的圓,因為這個弧還是有一個缺口,現在我們來用新的方法畫圓或橢圓。

 

繪制圓或橢圓:

create_oval( x1,y1, x2,y2, 參數 )

 

(x1,y1) x2,y2)坐標來決定的是畫圓 還是畫橢圓。

在這里的參數跟以上關于線條,弧度的參數相同,并沒有太多的知識要講,下面有代碼來說明:

 
from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=270,height=150,background='lightblue') # 淺藍畫布
can1.pack()
 
can1.create_rectangle(20,10,150,140,dash=(3,2),outline='green') # 畫 正方形
can1.create_oval(20,10,150,140,width=4,fill='lightyellow') # 畫 圓,填充淺黃
 
can1.create_rectangle(160,10,250,140,dash=(3,2),outline='green') # 畫 長方形
can1.create_oval(160,10,250,140,width=4,fill='lightgreen') # 畫 橢圓,填充淺綠
 
root.mainloop()

 運行結果

6.PNG

 

繪制多邊形:

create_polygon( x1,y1, x2,y2, …… xn,yn, 參數 )

 

上面的參數跟繪制線條很類似, 區別在于:

 

(X1,Y1),(x2,y2) ……. (xn,yn)  是不同點的坐標。

畫線的過程就是 (X1,Y1),連接 (x2,y2),再連接(x3,y3), …….再連接 (xn,yn)。

畫多邊形就是:按畫線過程,從起始點連接到結束點,但是要多一步,就是把結束點再連接起始點。

 

下面的代碼,在繪制多邊形的同時,在它的下方也繪制線條,你就可以看到多邊形要連接起始點和結束點,而且可以填充顏色。

from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=460,height=200,background='lightblue') # 淺藍畫布
can1.pack(fill=BOTH,expand=True) 
 
can1.create_polygon(10,10, 100,10, 50,80,fill='',outline='red') # 紅框,透明填充
can1.create_line(10,100, 100,100, 50,180, fill='red') # 畫線
 
can1.create_polygon(120,10, 180,30, 250,50, 200,80, 130,70, fill='lightyellow',outline='blue') # 藍框,淺黃填充
can1.create_line(120,100, 180,120, 250,140, 200,170, 130,160 ,fill='blue') # 畫線
 
can1.create_polygon(260,10, 370,30, 440,70, 380,90, 320,80, outline='green',width=5) # 綠框,默認為黑色填充
can1.create_line(260,110, 370,130, 440,170, 380,190, 320,180, fill='green',width=5) # 畫線
 
root.mainloop()

 運行結果

7.PNG

fill=’’ 表示多邊形填充的是透明色。如果沒有寫fill這個參數,默認是填充黑色。

 

繪制文字:

create_text( x,y, text=字符文本, 參數 )

 

(x,y) 是字符文本在畫布的坐標位置,但文本的起始位置要根據參數 anchor 來決定。

anchor 這個參數跟以前學的標簽組件的anchor一樣,有"n", "ne", "e", "se", "s", "sw", "w", "nw", "center" 9個選項,默認是center這個居中選項。

fill : 字符文本的顏色。

font : 字符文本的字體,大小。

justify : 多行顯示時,靠那一邊對齊。默認是LEFT

width : 這個參數類似于標簽組件的wraplength參數,它決定在什么位置字符文本換行。

stipple : 指定一個位圖用于填充,如果是空字符串,即字體為實心。

 

下面代碼來演示一下,坐標和anchor 2個參數來決定文本的顯示位置

。
from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=240,height=100,background='lightblue') # 淺藍畫布
can1.pack(fill=BOTH,expand=True) 
 
can1.create_line(120,0, 120,100,fill='yellow') # 垂直中心線
can1.create_line(0,50, 240,50,fill='yellow') # 水平中心線
 
can1.create_text(120,50,text='中國在中間',font=('黑體',17,'bold'),fill='red') # anchor默認為center
can1.create_text(120,50,text='美國靠下邊',font=('黑體',17,'bold'),fill='blue',anchor=NW)
 
root.mainloop()

運行結果:

8.PNG

“中國在中間”文本沒有設置anchor參數,anchor默認為center,居中,這個文本的錨點是文本的正中間,正中間的坐標就是 x,y 這個坐標。

而“美國靠下邊”這個文本,我設置anchor=NW,所以,這個文本的錨點為左上角,左上角的位置就是 x,y 這個坐標。

 

你只要把輸入的文本當成一個標簽組件的文本,整個畫布當成這個標簽的大小,就好理解了,anchor參數在畫布以及標簽組件的用法是一樣的。

 

插入圖片:

create_image( x,y, 參數 )

 (x,y) 是插入圖片的坐標位置,但圖片的位置要根據參數 anchor 來決定,這點跟上面的說的插入文本是完全一樣的。

雖說是插入圖片,你也可以當成是插入帶圖片的標簽,所以插入的圖片要先用 PhotoImage() 等方法來創建圖片對象。

 

感覺沒有太多的新知識要講解,在這里就不用代碼演示了。


插入組件:

create_window( x,y, 參數 )

(x,y) 坐標,anchor參數跟上面講解知識完全一樣。

window:這個參數又類似Text組件插入其他組件一樣,插入的組件也一樣可以響應事件。

 

下面的代碼演示一下。

from tkinter import *
 
root=Tk()
 
can1=Canvas(root,width=240,height=100,background='lightblue') # 淺藍畫布
can1.pack(fill=BOTH,expand=True) 
 
can1.create_line(120,0, 120,100,fill='yellow') # 垂直中心線
can1.create_line(0,50, 240,50,fill='yellow') # 水平中心線
 
but1=Button(root,text="按鈕",command=lambda:print('被點擊了')) # 先創建按鈕
ra1=Radiobutton(root,text='多選按鈕') # 先創建多選按鈕
 
can1.create_window(120,50,window=but1) # 在正中間插入按鈕
can1.create_window(120,50,window=ra1,anchor=NW) # 插入多選按鈕
 
root.mainloop()

運行結果:

9.PNG

 

下面是用代碼來做一個簡單的畫圖軟件,這個軟件可以設置畫筆顏色,畫筆粗細,清除畫布。

代碼里用到的顏色對話框,這個知識在以前的文章里講解過了。

from tkinter import *
from tkinter.colorchooser import *
 
root=Tk() # 源碼來自 wb98.com
 
fr1=Frame(root,relief='ridge',borderwidth=1) # 不設置邊線寬,無法顯示
fr1.pack(fill=X)
 
but1=Button(fr1,text="點擊選擇畫筆顏色", relief='sunken', bg='red',
command=lambda:but1.config(bg=askcolor()[1])) # 點擊彈出顏色對話框
but1.pack(side=LEFT,padx=20)
 
la1=Label(fr1,text='畫筆粗細: ')
la1.pack(side=LEFT)
 
spin1=Spinbox(fr1,from_=1,to=20,width=6) # 畫筆粗細
spin1.pack(side=LEFT)
 
but2=Button(fr1,text=" 清空畫布 ",command=lambda:can1.delete('all')) # 清空畫布
but2.pack(side=LEFT,padx=20)
 
can1 = Canvas(root,width=400, height=200,background='white') # 白底畫布
can1.pack(fill=BOTH,expand=True)
 
def paint(event): # 鼠標點擊畫點 或 按下鼠標移動畫線
    hb=int(spin1.get()) # hb是畫筆的粗細
    x1, y1 = (event.x - hb), (event.y - hb)  # 圓的左上角坐標
    x2, y2 = (event.x + hb), (event.y + hb)  # 圓的右下角坐標
    can1.create_oval(x1, y1, x2, y2,fill=but1['bg'], outline=but1['bg']) # 畫圓 連線
 
can1.bind("<B1-Motion>", paint) # 按下鼠標移動畫畫
can1.bind("<Button-1>",paint) # 點擊鼠標右鍵畫點
 
root.mainloop()

運行結果:

10.PNG

 

tkinter中沒有畫點的方法,在上述代碼中,是以畫圓的方法來畫點的,最小的粗細的畫筆就是圓的左上角坐標跟右下角坐標是一樣的。

 

清除畫面上的所有對象,用的方法是:delete('all')  所以,上面代碼中用于清空畫布的代碼就是: can1. delete('all')

 

Canvas組件還有一些參數沒有說明,我自己也要慢慢學習,再來講解。


還有有關動畫的方法也沒有講解,下一篇文章再簡單地講一下用Canvas組件動畫初步。

此文章來自:wb98.com  網站還有相關的系列課程文章,感興趣的可以前往。


來源:濟亨網

本文鏈接:http://www.chinaengraver.com/post/332.html

    << 上一篇 下一篇 >>

    湘公網安備 43011102000514號 - 湘ICP備08100508號

    2019年秋霞鲁丝片瓜皮_导航亚洲AV日韩AV永久无码_有没有哪些可以看片的免费的_国产色妞妞在线视频免费播放