本記事では、キーボード入力（「⇧」「⇦」「⇨」「⇩」キー）によってウィンドウ上の図形を操作する方法について解説します！
本記事で紹介するプログラムは、「キー入力で図形を操作する」部分の解説になります。
その他の部分については、以下の記事で紹介していますので参考にしてください。
では実際に、矢印キーで図形を動かすプログラムを紹介していきます！
一緒に勉強していきましょう～！
- 転職のためのスキルアップとして効率的に学びたい
- 副業としてプログラミングができるようになりたい
- 独学での勉強に限界を感じている
これらに該当する方はプログラミングスクールがスキルアップの近道です！
是非参考にしてみてください。
未経験でも安心！
学生や30代の方にもおすすめなプログラミングスクールがあります！
キーボード入力で図形を動かすコード
では早速ですが、キーボードで図形を動かすためのプログラムを書いていきましょう～
実際のプログラムはこんな感じになります！
import tkinter as tk
def main():
create_circle()
btn_layout()
#イベントキー連携
root.bind("<KeyPress>",key_press)
root.mainloop()
def btn_layout():
up = tk.Button(root, text="⇧", width=4, height=2, command=btn_up, repeatdelay=10,
repeatinterval=50, fg="black", bg="moccasin", font=("bold"))
up.place(x=90, y=310)
left = tk.Button(root, text="⇦", width=4, height=2, command=btn_left, repeatdelay=10,
repeatinterval=50, fg="black", bg="moccasin", font=("bold"))
left.place(x=30, y=370)
right = tk.Button(root, text="⇨", width=4, height=2, command=btn_right, repeatdelay=10,
repeatinterval=50, fg="black", bg="moccasin", font=("bold"))
right.place(x=150, y=370)
down = tk.Button(root, text="⇩", width=4, height=2, command=btn_down, repeatdelay=10,
repeatinterval=50, fg="black", bg="moccasin", font=("bold"))
down.place(x=90, y=430)
def key_press(event):
if event.keysym=="Up":
btn_up()
elif event.keysym=="Left":
btn_left()
elif event.keysym=="Right":
btn_right()
elif event.keysym=="Down":
btn_down()
def create_circle():
canvas.create_oval(400,150,430,180,fill="blue",tag="circle1")
def btn_up():
canvas.move("circle1",0,-10)
def btn_left():
canvas.move("circle1",-10,0)
def btn_right():
canvas.move("circle1",10,0)
def btn_down():
canvas.move("circle1",0,10)
if __name__=="__main__":
root=tk.Tk()
root.geometry("800x500")
canvas=tk.Canvas(root,width=800,height=300,bg="powderblue")
canvas.pack()
main()実行してみると下図のようなウィンドウが表示されると思うので、矢印ボタンをクリックして青丸を操作してみてください～！
キーボード入力で図形を操作する
キーボード入力で図形を操作するためには、bind() メソッドを用いてコールバック関数とウィンドウを紐づける必要があります。
bind() メソッドは以下のような形で使うようです。。。
紐づけたいウィジェット名の後に .bind()を付け、引数を指定します！
ウィジェット名.bind ( eventsequence , callback関数 )今回の場合は、キーが押されたときにイベント指令を出したいのでイベントシーケンスは <KeyPress> としていますよ～！
そして callback関数を key_press とし、key_press に実行したい処理を記載しています。
#イベントキー連携
root.bind("<KeyPress>",key_press)callback関数で指定する関数には引数として（event）を渡すようにしてくださいね。
そして key_press 関数内では .keysym を設定して、入力されたキーを識別してそれぞれキーが押されたときに「 btn_up() 」「 btn_left() 」を呼び出しています。
def key_press(event):
if event.keysym=="Up":
btn_up()
elif event.keysym=="Left":
btn_left()
elif event.keysym=="Right":
btn_right()
elif event.keysym=="Down":
btn_down()イベントシーケンス一覧
イベントシーケンスの種類
イベントシーケンスは <> 内に記載します。
一覧は以下のようになっています。
| イベントシーケンス | 指令を出すタイミング |
| Key , KeyPress | キーが押されたとき |
| KeyRelease | キーが離されたとき |
| Button , ButtonPress | マウスのボタンが押されたとき |
| ButtonRelease | マウスのボタンが離されたとき |
| Motion | マウスが移動したとき |
| Enter | カーソルがウィンドウの中に入ったとき |
| Leave | カーソルがウィンドウから出たとき |
キーボード入力における「キー指定」
キーボード入力 で指令を出す 「Key」 , 「KeyPress」 , 「KeyRelease」を使用する場合には、イベントシーケンス名の後に 詳細 を追記する必要があります。
キーの詳細指定方法
( "<eventsequence-key>" , callback関数 ) # keyに指定したいキー名を入れる例えば、キーボード上で「k」が入力されたときに指令を出したい場合は以下のように記載すると実装できます！
( "<KeyPress-k>" , callback関数 )いろいろなキーと関数を紐づけてみてください～！
これらを活用することで、UIがより一層使いやすくなると思いますっ
マウス入力での「ボタン指定」
マウス入力で指令を出す「Button」 , 「ButtonPress」 , 「ButtonRelease」 を使用する場合も同様に、イベントシーケンス名の後に 詳細 を追記する必要があります。
マウスでは左ボタンが「1」、右ボタンが「2」となっています。そのため、イベントシーケンス名の後に「1」か「2」を指定します。
( "<ButtonPress-1>" , callback関数 ) #マウスが左クリックされたときに処理を行う以上となります。最後まで見ていただきありがとうございました！
図形の配置方法などが知りたい方はこちらの記事を参考にしてみて下さい！
ボタンの配置だけでなく図形の配置方法の手順は同じです。
参考：図形を配置する方法
