矢印キーでTkinterキャンバス上の画像を移動させる方法

TkinterのCanvas（キャンバス）ウィジェットは、Tkinterライブラリの中でも特に汎用性の高いウィジェットの一つです。図形や画像の描画はもちろん、オブジェクトのアニメーション表現にも活用できます。

Canvas上に配置した画像を動かしたい場合は、move()メソッドを使用します。このメソッドに「対象の画像」と「移動量（x, y）」を引数として渡すことで、画像を任意の方向へ移動させることができます。また、Canvas内での画像の位置を正しく追跡できるよう、画像オブジェクトはグローバル変数として宣言しておくのがポイントです。

実装の流れ

以下の手順に従うことで、矢印キー操作による画像の移動機能を実装できます。

• まず、Canvasウィジェットを定義し、表示する画像を追加します。
• Canvas内で画像を動かすためのmove()処理を行う関数を、上下左右の4方向分それぞれ定義します。
• bind()メソッドを使い、矢印キーのキーイベントと各移動関数をバインド（関連付け）します。

サンプルコード

# 必要なライブラリをインポート
from tkinter import *
from PIL import Image, ImageTk

# tkinterフレームのインスタンスを作成
win = Tk()

# ウィンドウサイズを設定
win.geometry("700x350")

# Canvasウィジェットを定義
canvas = Canvas(win, width=600, height=400, bg="white")
canvas.pack(pady=20)

# Canvasに画像を追加
image = ImageTk.PhotoImage(Image.open('favicon.ico'))
img = canvas.create_image(250, 120, anchor=NW, image=image)

def left(e):
    x = -20
    y = 0
    canvas.move(img, x, y)

def right(e):
    x = 20
    y = 0
    canvas.move(img, x, y)

def up(e):
    x = 0
    y = -20
    canvas.move(img, x, y)

def down(e):
    x = 0
    y = 20
    canvas.move(img, x, y)

# 移動関数をキーイベントにバインド
win.bind("<Left>", left)
win.bind("<Right>", right)
win.bind("<Up>", up)
win.bind("<Down>", down)

win.mainloop()

実行結果

上記のコードを実行すると、画像が表示されたウィンドウが起動し、矢印キーを押すたびに画像が対応する方向へ20ピクセルずつ移動します。

このように、bind()メソッドでキーイベントと関数を紐付けるだけで、ゲームのような直感的な操作性を簡単に実現できます。移動量の数値を変更すれば、1回あたりの移動距離も自由に調整可能です。ぜひ自分のプロジェクトに応用してみてください。