[Tkinter] 60강 Canvas 그리기 순서와 레이어 개념 이해하기

---

---

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

59강에서는
Canvas 아이템의 좌표를 직접 제어하는 coords()를 배웠습니다.

이번 강의에서는
Canvas 아이템이 서로 겹칠 때 어떤 것이 위에 보이는지,
즉 그리기 순서와 레이어 개념을 다룹니다.

이번 강의의 목표는 분명합니다.
Canvas에서 겹침을 의도적으로 제어하는 방법을 이해하는 것입니다.

---

Canvas에는 “레이어”가 있다

Canvas는
아이템을 쌓는 구조로 관리합니다.

• 먼저 만든 아이템 → 아래
• 나중에 만든 아이템 → 위

즉,
생성 순서가 곧 레이어 순서입니다.

---

가장 단순한 레이어 예제

import tkinter as tk

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

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

canvas.create_rectangle(60, 60, 180, 140, fill="skyblue")
canvas.create_rectangle(100, 40, 220, 120, fill="orange")

window.mainloop()

주황색 사각형이
하늘색 사각형 위에
겹쳐서 보입니다.

---

생성 순서를 바꾸면 결과도 바뀐다

canvas.create_rectangle(100, 40, 220, 120, fill="orange")
canvas.create_rectangle(60, 60, 180, 140, fill="skyblue")

이번에는
하늘색이
위에 보입니다.

---

레이어를 직접 제어해야 하는 이유

실제 UI에서는
이런 상황이 자주 발생합니다.

• 선택된 객체를 맨 위로 올리기
• 드래그 중인 객체 강조
• 배경은 항상 뒤로 유지

이를 위해
Canvas는 레이어 제어 메서드를 제공합니다.

---

tag_raise로 위로 올리기

canvas.tag_raise(item_id)

해당 아이템을
가장 위 레이어로 이동시킵니다.

---

raise 예제

import tkinter as tk

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

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

box1 = canvas.create_rectangle(60, 60, 180, 140, fill="skyblue")
box2 = canvas.create_rectangle(100, 40, 220, 120, fill="orange")

canvas.tag_raise(box1)

window.mainloop()

하늘색 사각형이
주황색 위로
올라옵니다.

---

tag_lower로 아래로 내리기

canvas.tag_lower(item_id)

아이템을
가장 아래 레이어로 이동시킵니다.

---

raise / lower는 “순서 변경”이다

중요한 포인트입니다.

레이어 제어는 좌표를 바꾸지 않는다

• 위치는 그대로
• 보이는 순서만 변경

UI 표현을
안전하게 바꾸는 방법입니다.

---

특정 아이템 위로 올리기

canvas.tag_raise(item1, item2)

• item1을
• item2 바로 위로 이동

정교한 레이어 제어가
가능해집니다.

---

클릭 시 선택 객체를 위로 올리기

def on_click(event):
    item = canvas.find_closest(event.x, event.y)
    canvas.tag_raise(item)

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

이 패턴은
드로잉 툴, 에디터 UI의
기본 구조입니다.

---

레이어 개념과 상태 표현

레이어는
상태 표현과 자주 결합됩니다.

• 선택됨 → 위로
• 비활성 → 뒤로

canvas.tag_raise(selected_item)
canvas.itemconfig(selected_item, outline="red")

시각적 피드백이
명확해집니다.

---

초보자가 자주 헷갈리는 포인트

다음은
아주 흔한 오해입니다.

• 레이어 변경 = 좌표 변경 X
• 레이어 변경 = 그리기 순서 변경 O

Canvas 레이어는
시각적 우선순위일 뿐입니다.

---

Canvas 레이어 제어 정리

Canvas에서
레이어를 제어하는 방법은
크게 두 가지입니다.

• 생성 순서로 자동 관리
• tag_raise / tag_lower로 수동 관리

이 둘을
상황에 맞게
사용하면 됩니다.

---

Canvas 레이어 제어 정리

Canvas에서
레이어를 제어하는 방법은
크게 두 가지입니다.

• 생성 순서로 자동 관리
• tag_raise / tag_lower로 수동 관리

이 둘을
상황에 맞게
사용하면 됩니다.

---

다음 강의 예고

다음 강의에서는
Canvas를 한 번에 초기화하고 상태를 관리하는 방법을 다룹니다.

이제
Canvas를
“지우고 다시 시작하는”
구조를 만들게 됩니다.

---