Tkinter 캔버스에서 마우스로 이미지를 이동하는 방법

Tkinter의 Canvas(캔버스) 위젯은 라이브러리에서 가장 활용도가 높은 위젯 중 하나입니다. 다양한 도형과 이미지를 그리고, 애니메이션 객체를 만드는 데 사용할 수 있습니다. 특히 move() 메서드를 활용하면 캔버스 위에 배치된 이미지나 객체를 원하는 방향으로 자유롭게 이동시킬 수 있습니다.

move(이미지, x, y) 형태로 대상 객체와 이동할 좌표를 인자로 전달하면, 해당 객체가 캔버스 안에서 지정된 만큼 움직이게 됩니다. 이미지를 이동하거나 위치를 변경하려면 전역 변수로 선언해 두는 것이 좋습니다.

구현 순서

마우스 조작으로 캔버스 안의 이미지를 움직이려면 다음 단계를 따르면 됩니다.

• 먼저 Canvas 위젯을 정의하고 이동할 이미지를 추가합니다.

• 이미지가 캔버스 내에서 동적으로 움직일 수 있도록 move() 함수를 정의합니다.

• 마우스 버튼 이벤트와 함수를 바인딩(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('logo.png'))
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)

# 캔버스 안에서 이미지가 움직일 수 있도록 하는 함수 정의
def move(e):
    global image
    image = ImageTk.PhotoImage(Image.open('logo.png'))
    img = canvas.create_image(e.x, e.y, image=image)

# move 함수를 마우스 드래그 이벤트에 바인딩
canvas.bind("<B1-Motion>", move)

win.mainloop()

실행 결과

위 코드를 실행하면 하나의 창이 나타나며, 그 안에는 마우스 버튼을 사용해 창 위 어디로든 옮길 수 있는 이미지가 표시됩니다.

이제 캔버스 영역을 클릭한 상태로 마우스를 드래그하면, 이미지가 커서를 따라 부드럽게 이동하는 것을 확인할 수 있습니다. 여기에 <B1-Motion> 외에도 방향키 이벤트(<Left>, <Right>, <Up>, <Down>)를 바인딩하면 키보드로도 이미지를 조작할 수 있어 더욱 다양한 인터랙션을 구현할 수 있습니다.