詳解python使用canvas實現移動並綁定鍵盤

Posted on by

一、任務

用多個按鈕或者按鈕+文本框實現不同物體（橢圓，長方形，扇形）的各個方向的運動（上下左右）

效果圖：

image-20211216140806602

二、實現

（1）導庫並創建畫佈

import tkinter as tk
window = tk.Tk()
window.title('my window')
##窗口尺寸
window.geometry('300x350')
#新建畫佈
canvas=tk.Canvas(window,bg='blue',height=150,width=300)

（2）畫圖形

#畫線
x0,y0,x1,y1=50,50,80,80
line=canvas.create_line(x0,y0,x1,y1)
#畫⚪
oval=canvas.create_oval(x0,y0,x1,y1,fill='red')
#畫一個扇形
arc = canvas.create_arc(x0+30, y0+30, x1+30, y1+30, start=0, extent=90)
#畫一個矩形
rect = canvas.create_rectangle(100, 30, 100+20, 30+20)   
canvas.pack()

（3）創建按鈕和文本框

#創建文本框
entry = tk.Entry(window, show=None)
entry.pack()
#創建文本
label = tk.Label(window , text='圓：oval;線：line;扇形：arc;矩形 ：rect')
label.pack()  #打包
#創建一個Button
b=tk.Button(window,text='下',command=moveit)
b.place(x=120,y=280)
up=tk.Button(window,text='上',command=moveup)
up.place(x=120,y=220)
left=tk.Button(window,text='左',command=moveleft)
left.place(x=80,y=250)
right=tk.Button(window,text='右',command=moveright)
right.place(x=160,y=250)

（4）功能實現

#向下移動
def moveit():
    obj = entry.get()  #獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,0,2)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, 0, 2)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, 0, 2)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line, 0, 2)
#向上移動
def moveup():
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,0,-2)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc,0,-2)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval,0,-2)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line,0,-2)
#向左移動
def moveleft():
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect, -2 ,0)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, -2 ,0)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, -2 ,0)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line, -2, 0)
#向右移動
def moveright():
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,2,0)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, 2,0)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, 2,0)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line , 2, 0)

三、完整代碼

import tkinter as tk
window = tk.Tk()
window.title('my window')
##窗口尺寸
window.geometry('300x350')
#新建畫佈
canvas=tk.Canvas(window,bg='blue',height=150,width=300)
#畫線
x0,y0,x1,y1=50,50,80,80
line=canvas.create_line(x0,y0,x1,y1)
#畫⚪
oval=canvas.create_oval(x0,y0,x1,y1,fill='red')
#畫一個扇形
arc = canvas.create_arc(x0+30, y0+30, x1+30, y1+30, start=0, extent=90)
#畫一個矩形
rect = canvas.create_rectangle(100, 30, 100+20, 30+20)   
canvas.pack()
#創建文本框
entry = tk.Entry(window, show=None)
entry.pack()
#創建文本
label = tk.Label(window , text='圓：oval;線：line;扇形：arc;矩形 ：rect')
label.pack()  #打包
#向下移動
def moveit():
    obj = entry.get()  #獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,0,2)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, 0, 2)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, 0, 2)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line, 0, 2)
#向上移動
def moveup():
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,0,-2)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc,0,-2)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval,0,-2)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line,0,-2)
#向左移動
def moveleft():
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect, -2 ,0)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, -2 ,0)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, -2 ,0)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line, -2, 0)
#向右移動
def moveright():
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,2,0)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, 2,0)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, 2,0)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line , 2, 0)
#創建一個Button
b=tk.Button(window,text='下',command=moveit)
b.place(x=120,y=280)
up=tk.Button(window,text='上',command=moveup)
up.place(x=120,y=220)
left=tk.Button(window,text='左',command=moveleft)
left.place(x=80,y=250)
right=tk.Button(window,text='右',command=moveright)
right.place(x=160,y=250)
##顯示出來
window.mainloop()

四、升級—綁定鍵盤事件

增加鍵盤綁定事件：

# 實現鍵盤綁定
window.bind("<KeyPress-Down>", moveit)  #第二個參數傳一個回調函數
window.bind("<KeyPress-Left>", moveleft)
window.bind("<KeyPress-Right>", moveright)
window.bind("<KeyPress-Up>", moveup)

完整代碼：

import tkinter as tk
window = tk.Tk()
window.title('my window')
##窗口尺寸
window.geometry('300x350')
#新建畫佈
canvas=tk.Canvas(window,bg='blue',height=150,width=300)
#畫線
x0,y0,x1,y1=50,50,80,80
line=canvas.create_line(x0,y0,x1,y1)
#畫⚪
oval=canvas.create_oval(x0,y0,x1,y1,fill='red')
#畫一個扇形
arc = canvas.create_arc(x0+30, y0+30, x1+30, y1+30, start=0, extent=90)
#畫一個矩形
rect = canvas.create_rectangle(100, 30, 100+20, 30+20)   
canvas.pack()
#創建文本框
entry = tk.Entry(window, show=None)
entry.pack()
#創建文本
label = tk.Label(window , text='圓：oval;線：line;扇形：arc;矩形 ：rect')
label.pack()  #打包
#向下移動
def moveit(event):
    obj = entry.get()  #獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,0,2)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, 0, 2)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, 0, 2)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line, 0, 2)
#向上移動
def moveup(event):
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,0,-2)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc,0,-2)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval,0,-2)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line,0,-2)
#向左移動
def moveleft(event):
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect, -2 ,0)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, -2 ,0)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, -2 ,0)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line, -2, 0)
#向右移動
def moveright(event):
    obj = entry.get()  # 獲取輸入框的參數，移動那個圖形
    if obj =='rect':
        canvas.move(rect,2,0)  #第一個參數是圖形
    elif obj == 'arc':
        canvas.move(arc, 2,0)  # 第一個參數是圖形
    elif obj =='oval':
        canvas.move(oval, 2,0)  # 第一個參數是圖形
    elif obj == 'line':
        canvas.move(line , 2, 0)
#創建一個Button
b=tk.Button(window,text='下',command=moveit)
b.place(x=120,y=280)
up=tk.Button(window,text='上',command=moveup)
up.place(x=120,y=220)
left=tk.Button(window,text='左',command=moveleft)
left.place(x=80,y=250)
right=tk.Button(window,text='右',command=moveright)
right.place(x=160,y=250)
# 實現鍵盤綁定
window.bind("<KeyPress-Down>", moveit)  #第二個參數傳一個回調函數
window.bind("<KeyPress-Left>", moveleft)
window.bind("<KeyPress-Right>", moveright)
window.bind("<KeyPress-Up>", moveup)
##顯示出來
window.mainloop()

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：