[Tkinter] 63강 Canvas 마우스 클릭 이벤트 처리

@도마2·2026. 2. 21. 18:00

728x90

이 강의는 Tkinter GUI 강의 63강입니다

62강에서는
Canvas 아이템과 내부 데이터를 함께 관리하는
상태 관리의 기초를 다뤘습니다.

이번 강의에서는
Canvas가 마우스 클릭에 반응하도록 만드는 방법을 배웁니다.

이번 강의의 목표는 분명합니다.
사용자가 어디를 클릭했는지 감지하고,
그 위치를 기반으로 Canvas 로직을 실행하는 것입니다.

Canvas 이벤트는 bind로 처리한다

Canvas는
버튼, 키보드와 마찬가지로
이벤트 기반으로 동작합니다.

Canvas에서 마우스 이벤트를 처리하려면
bind()를 사용합니다.

canvas.bind("<Button-1>", handler)

<Button-1> → 마우스 왼쪽 클릭
handler → 이벤트 처리 함수

가장 기본적인 클릭 이벤트 예제

import tkinter as tk

window = tk.Tk()
window.geometry("320x240")

canvas = tk.Canvas(window, width=300, height=200, bg="white")
canvas.pack(pady=20)

def on_click(event):
    print(event.x, event.y)

canvas.bind("<Button-1>", on_click)

window.mainloop()

Canvas를 클릭하면
콘솔에
클릭 좌표(x, y) 가 출력됩니다.

event 객체가 담고 있는 정보

이벤트 핸들러에는
자동으로 event 객체가 전달됩니다.

자주 사용하는 값은 다음입니다.

event.x → Canvas 기준 x 좌표
event.y → Canvas 기준 y 좌표
event.widget → 이벤트가 발생한 위젯

Canvas 인터랙션의
기본 재료입니다.

클릭 위치에 도형 생성하기

def on_click(event):
    canvas.create_oval(
        event.x - 10, event.y - 10,
        event.x + 10, event.y + 10,
        fill="skyblue"
    )

이제
클릭할 때마다
Canvas에
원이 생성됩니다.

클릭 이벤트와 상태 관리 연결하기

62강에서 배운
상태 관리와
자연스럽게 연결해봅니다.

items = []

def on_click(event):
    item = canvas.create_rectangle(
        event.x - 20, event.y - 20,
        event.x + 20, event.y + 20,
        fill="orange"
    )
    items.append(item)

Canvas에 그림 생성
내부 리스트에 ID 저장

이 구조가
모든 Canvas 앱의
기본 골격입니다.

클릭한 아이템 찾기

Canvas는
클릭 위치 기준으로
아이템을 찾는 기능을 제공합니다.

item = canvas.find_closest(event.x, event.y)

가장 가까운 아이템의
ID를 반환합니다.

클릭한 아이템 선택 처리 예제

selected_item = None

def on_click(event):
    global selected_item

    item = canvas.find_closest(event.x, event.y)
    if not item:
        return

    if selected_item:
        canvas.itemconfig(selected_item, outline="black")

    selected_item = item[0]
    canvas.itemconfig(selected_item, outline="red")

이제
Canvas 아이템을
마우스로 선택할 수 있습니다.

빈 공간 클릭과 아이템 클릭 구분하기

find_closest는
항상 값을 반환합니다.

그래서 보통
좌표 포함 여부를
함께 확인합니다.

item = canvas.find_overlapping(event.x, event.y, event.x, event.y)

결과가 있으면 → 아이템 클릭
비어 있으면 → 빈 공간 클릭

클릭 이벤트는 UI의 시작점이다

Canvas에서
마우스 클릭은
다음으로 이어집니다.

드래그 시작
객체 선택
컨텍스트 메뉴
좌표 기반 조작

그래서
클릭 이벤트는
모든 상호작용의 출발점입니다.

초보자가 자주 하는 실수

다음 실수는
아주 흔합니다.

event.x / y를 window 좌표로 착각
bind를 window에 걸어버림
상태 관리 없이 클릭 처리

Canvas 이벤트는
Canvas 기준 좌표라는 점을
항상 기억해야 합니다.

Canvas 클릭 이벤트 설계 원칙

여기서 꼭 기억해야 할 원칙입니다.

클릭은 상태를 바꾸고, 상태가 UI를 바꾼다

이 흐름을
의식적으로 설계해야
복잡한 UI도
안정적으로 동작합니다.

이번 강의 핵심 정리

이번 강의에서 꼭 기억해야 할 내용입니다.

canvas.bind("<Button-1>", handler)로 클릭 처리
event.x, event.y는 Canvas 기준 좌표
클릭 위치로 아이템 생성 가능
클릭으로 아이템 선택 처리 가능

다음 강의 예고

다음 강의에서는
Canvas 마우스 드래그 이벤트 처리를 다룹니다.

이제
클릭 → 이동 → 놓기
드래그 인터랙션으로 넘어갑니다.