[Tkinter] 64강 클릭 좌표 활용하기

---

---

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

63강에서는
Canvas에서 마우스 클릭 이벤트를 처리하는 방법을 배웠습니다.

이번 강의에서는
그때 얻은 event.x, event.y 좌표를
실제로 UI 로직에 활용하는 방법을 다룹니다.

이번 강의의 목표는 분명합니다.

클릭 좌표를 단순 출력이 아니라 의미 있는 행동으로 연결하는 것

---

클릭 좌표는 UI 판단의 기준이다

Canvas에서의 클릭 좌표는
단순한 숫자가 아닙니다.

다음 판단의 기준이 됩니다.

• 어디에 객체를 생성할지
• 어떤 영역을 클릭했는지
• 기존 객체를 선택했는지
• 드래그를 시작할 위치인지

즉,
좌표는 UI 의사결정의 입력값입니다.

---

클릭 좌표 다시 확인하기

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

• event.x → Canvas 기준 X 좌표
• event.y → Canvas 기준 Y 좌표

window 기준 좌표가 아니라
Canvas 기준 좌표라는 점이 중요합니다.

---

좌표를 이용해 정확한 위치에 객체 생성하기

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

 

• 클릭한 위치를 중심으로 사각형 생성
• 좌표 보정 개념이 자연스럽게 들어옵니다.

---

좌표 보정이 필요한 이유

Canvas 도형은
대부분 좌상단 ~ 우하단 좌표로 생성됩니다.

그래서
“클릭한 지점 = 중심”으로 쓰려면
보정이 필요합니다.

half = 20
x1 = event.x - half
y1 = event.y - half
x2 = event.x + half
y2 = event.y + half 

이 사고는
모든 그래픽 UI에서 공통입니다.

---

클릭 영역 판단하기

좌표를 이용하면
“어디를 클릭했는지”도 판단할 수 있습니다.

def on_click(event):
    if event.x < 150:
        print("왼쪽 영역 클릭")
    else:
        print("오른쪽 영역 클릭")

이 구조는
버튼 없는 UI,
Canvas 기반 메뉴에서
자주 사용됩니다.

---

특정 영역만 반응하도록 만들기

def on_click(event):
    if 50 <= event.x <= 200 and 50 <= event.y <= 150:
        print("작업 영역 클릭")

보이지 않는 영역이라도
좌표 기준으로
논리적인 UI 영역을 만들 수 있습니다.

---

좌표로 기존 객체 선택하기

def on_click(event):
    items = canvas.find_overlapping(
        event.x, event.y,
        event.x, event.y
    )

    if items:
        canvas.itemconfig(items[-1], outline="red")

• 클릭한 좌표에 겹친 아이템 찾기
• 가장 위에 있는 아이템 선택

Canvas 편집기의
기본 구조입니다.

---

클릭 좌표와 상태 관리 연결하기

selected_item = None

def on_click(event):
    global selected_item

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

    if items:
        selected_item = items[-1]
    else:
        selected_item = None

• 좌표 → 아이템 판별
• 결과 → 상태 변수 갱신

63강 + 62강이
여기서 합쳐집니다.

---

좌표는 드래그의 출발점이다

이 강의에서 다룬 좌표는
다음 강의에서 이렇게 쓰입니다.

• 클릭 좌표 → 드래그 시작 위치
• 현재 좌표 → 이동 거리 계산

그래서
64강은
드래그의 준비 단계입니다.

---

초보자가 자주 하는 실수

아주 흔한 실수들입니다.

• event.x/y를 화면 전체 좌표로 착각
• 좌표 보정 없이 중심 배치하려다 어긋남
• 좌표만 쓰고 상태를 안 남김

좌표는
항상 로직과 함께 사용해야 합니다.

---

이번 강의 핵심 정리

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

• 클릭 좌표는 UI 판단의 입력값이다
• event.x, event.y는 Canvas 기준 좌표다
• 좌표 보정으로 중심 배치가 가능하다
• 좌표는 선택·영역·드래그 판단의 기준이다

---

다음 강의 예고

다음 강의에서는
Canvas 드래그 이벤트 기본을 다룹니다.

이제
클릭 → 이동 → 놓기
연속 동작 처리로 들어갑니다.

---