Tkinter

[Python/tkinter] キーボードやマウス入力で図形を動かしてみよう!

本記事では、キーボード入力(「⇧」「⇦」「⇨」「⇩」キーによってウィンドウ上の図形を操作する方法について解説します!

本記事で紹介するプログラムは、「キー入力で図形を操作する」部分の解説になります。

その他の部分については、以下の記事で紹介していますので参考にしてください。

ボタンクリックによって図形を操作する場合の解説は、こちらの記事で詳しく紹介しています!
初心者の方は、まずこちらを参考にしてみて下さい!

参考:ボタンクリックによって図形を操作する

また、カラーコードに関してはこちらの記事で分かりやすくまとめています。

参考:Pythonで使えるカラーコード一覧

すらいむ管理人

では実際に、矢印キーで図形を動かすプログラムを紹介していきます!
一緒に勉強していきましょう~!

  • 転職のためのスキルアップとして効率的に学びたい
  • 副業としてプログラミングができるようになりたい
  • 独学での勉強に限界を感じている

これらに該当する方はプログラミングスクールがスキルアップの近道です!
是非参考にしてみてください。

【2023年最新】プログラミング上達の近道とは?スクールに通うメリットやおすすめランキングも徹底解説!プログラミングを上達するための近道を紹介しています。また、2023年度に人気の優良プログラミングスクールをランキング形式で紹介しています!特にプログラミングスクールの選び方を難易度、料金、特徴など様々な観点から紹介しています。自分自身の目的に合ったスクール選びの助けとなれば幸いです。...

未経験でも安心!
学生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()

すらいむ管理人

実行してみると下図のようなウィンドウが表示されると思うので、矢印ボタンをクリックして青丸を操作してみてください~!

result of conducted this program

how to use this apprivcation (move circle)

キーボード入力で図形を操作する

キーボード入力で図形を操作するためには、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関数 )  #マウスが左クリックされたときに処理を行う

以上となります。最後まで見ていただきありがとうございました!

図形の配置方法などが知りたい方はこちらの記事を参考にしてみて下さい!
ボタンの配置だけでなく図形の配置方法の手順は同じです。

参考:図形を配置する方法

参考:ウィジェットにボタンを配置する方法