[Tkinter] 54강 Canvas에 텍스트와 이미지 그리기

---

---

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

53강에서는
Canvas에 선과 도형을 그리며
좌표 기반 그래픽의 기본을 익혔습니다.

이번 강의에서는
Canvas 위에 텍스트와 이미지를 그리는 방법을 다룹니다.

이번 강의의 목표는 분명합니다.
Canvas를 단순한 그림판이 아니라
정보를 표현하는 UI 공간으로 사용하는 감각을 익히는 것입니다.

---

Canvas에서 텍스트는 어떻게 다를까

Label 위젯의 텍스트는
정해진 위치에만 표시됩니다.

하지만 Canvas의 텍스트는
다음 특징을 가집니다.

• 좌표로 정확한 위치 지정
• 도형과 함께 배치 가능
• 이동, 삭제, 갱신 가능

즉,
그래픽 요소의 일부입니다.

---

Canvas 텍스트 기본 사용법

canvas.create_text(x, y, text="내용")

 

• (x, y) → 텍스트 기준 좌표
• 기본적으로 텍스트의 중앙이 좌표에 위치합니다.

---

텍스트 그리기 기본 예제

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_text(150, 100, text="Canvas 텍스트")

window.mainloop()

 

Canvas 중앙에
텍스트가 표시됩니다.

---

텍스트 정렬 기준(anchor) 이해하기

텍스트 기준점을
조절하려면
anchor 옵션을 사용합니다.

canvas.create_text(20, 20, text="왼쪽 위", anchor="nw")

자주 쓰는 값은 다음입니다.

• n, s, e, w
• nw, ne, sw, se
• center (기본값)

---

폰트와 색상 지정하기

canvas.create_text(
    150, 50,
    text="강조 텍스트",
    fill="blue",
    font=("Arial", 14, "bold")
)

Canvas 텍스트도
Label과 거의 같은
옵션을 사용합니다.

---

여러 텍스트 배치 예제

canvas.create_text(150, 30, text="제목", font=("Arial", 16, "bold"))
canvas.create_text(150, 70, text="설명 텍스트", font=("Arial", 11))

Canvas를
정보 레이아웃으로
사용할 수 있습니다.

---

Canvas에 이미지 그리기 개념

Canvas는
이미지도 직접 그릴 수 있습니다.

단,
PhotoImage 객체가 필요합니다.

---

이미지 로딩 기본 방법

image = tk.PhotoImage(file="image.png")

지원 형식은 주로 다음입니다.

• PNG
• GIF

(JPG는 별도 처리가 필요합니다.)

---

이미지 그리기 기본 사용법

canvas.create_image(x, y, image=image)

텍스트와 마찬가지로
기본 기준은
이미지의 중앙입니다.

---

이미지 표시 예제

import tkinter as tk

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

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

img = tk.PhotoImage(file="sample.png")
canvas.create_image(150, 100, image=img)

window.mainloop()

이미지가
Canvas 위에
표시됩니다.

---

이미지가 안 보일 때 꼭 확인할 것

Canvas 이미지에서
가장 흔한 실수는
다음입니다.

이미지 객체가 사라지는 문제

해결 방법은 간단합니다.

canvas.image = img

참조를 유지하지 않으면
이미지가
표시되지 않습니다.

---

텍스트와 도형, 이미지 함께 사용하기

canvas.create_rectangle(40, 40, 260, 160, fill="lightgray")
canvas.create_text(150, 70, text="Canvas UI", font=("Arial", 14, "bold"))
canvas.create_text(150, 110, text="텍스트와 이미지 표시")

Canvas는
UI 요소를
자유롭게 조합할 수 있습니다.

---

Canvas는 동적인 UI를 만든다

Canvas 요소들은
모두 ID를 반환합니다.

text_id = canvas.create_text(...)

이 ID를 이용해
이동, 수정, 삭제가
가능합니다.

이 개념은
다음 강의에서
본격적으로 다룹니다.

---

이번 강의 핵심 정리

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

• create_text로 텍스트를 그린다
• anchor로 기준점을 조절한다
• create_image로 이미지를 표시한다
• 이미지 참조는 반드시 유지한다

---

다음 강의 예고

다음 강의에서는
Canvas 객체 이동과 삭제 처리를 다룹니다.

이제
Canvas 요소들이
“살아 움직이기” 시작합니다.

---