파이썬 Canvas 이미지 - paisseon Canvas imiji

tkinter에서는 Canvas라는 것이 있습니다.

Window의 일정 영역에 Canvas를 띄울 수 있습니다.

Canvas를 띄워두면 Canvas 위에 어떤 도형이나 이미지를 출력해준다던지 등의 동작이 가능합니다.

Canvas는 tkinter에서 되게 많이 사용되는 요소 중 하나입니다.

Syntax

Canvas(window, width, height, background)

- window

Canvas가 표시될 window 객체를 받습니다.

- width, height

Canvas의 가로 길이, 세로 길이를 지정합니다.

- background

Canvas의 배경 색상을 받습니다.

black, white, gray, blue, red, skyblue 등의 색상 이름 또는 hex color 코드를 받을 수 있습니다.

import tkinter as tk

window = tk.Tk()
window.geometry('500x400')

canvas = tk.Canvas(window, width=300, height=200, background='gray')
canvas.place(x=0, y=0)

window.mainloop()

window에 회색 영역이 표시된 것이 보이시나요?

바로 이 영역이 Canvas입니다.

- canvas = tk.Canvas(window, width=300, height=200, background='gray')

Canvas 객체 생성 부분을 봅시다.

가장 먼저 window 객체를 받았죠. 왜냐면 Canvas도 어떤 window에 속해서 표시될 것이기 때문입니다.

가로 길이(width)는 300, 세로 길이(height)는 200으로 설정하였습니다.

Canvas 배경색(background)은 gray로 설정하였습니다.

- canvas.place(x=0, y=0)

canvas 객체를 window에 배치하는 부분입니다.

place method를 사용할 수 있으며 canvas의 왼쪽 위 꼭지점을 기준으로 좌표를 설정합니다.

x=0, y=0이므로 window의 좌측 상단에 딱 붙어서 Canvas가 표시될 것입니다.

import tkinter as tk

window = tk.Tk()
window.geometry('500x400')

canvas = tk.Canvas(window, width=300, height=200, background='gray')
canvas.pack(padx=10, pady=10)

window.mainloop()

- canvas.pack(padx=10, pady=10)

canvas를 배치할 때에는 pack method를 사용해도 됩니다.

pack method를 사용할 때에는 padx, pady 옵션을 설정해서 Window와 Canvas 사이의 최소 간격(padding)을 설정할 수 있습니다.

위 예시에서는 pady=10으로 설정되어서 Canvas가 맨 위에서 10만큼 아래로 내려와있는 것을 볼 수 있습니다.

x축 padding은 padx=10으로 설정되었는데 pack method는 기본적으로 가운데 정렬하여 배치하고 양쪽에 10 이상의 Padding이 있으므로 현재 위치에선 크게 변화가 없습니다.

import tkinter as tk

window = tk.Tk()

canvas = tk.Canvas(window, width=300, height=200, background='gray')
canvas.pack(padx=10, pady=10)

window.mainloop()

위 예시는 window객체의 geometry 설정 부분을 없앤 결과입니다.

canvas를 pack method로 배치하는 경우 Window의 크기는 자동으로 Canvas에 맞춰집니다.

위 예시에서는 pack method에서 설정된 padding값이 padx=10, pady=10입니다.

따라서 x축 padding(오른쪽과 왼쪽)이 10만큼 존재하여 왼쪽과 오른쪽에 canvas와 window 사이에 살짝 간격이 있는걸 볼 수 있습니다.

y축 padding(윈쪽과 아래쪽)은 10만큼 존재하여 위쪽과 아래쪽에 canvas와 window 사이에 살짝 간격이 있는걸 볼 수 있습니다.

import tkinter as tk

window = tk.Tk()

canvas = tk.Canvas(window, width=300, height=200, background='gray')
canvas.pack(padx=0, pady=0)

window.mainloop()

pack method에서 padding값을 모두 0으로 설정하면 Window의 크기는 자동으로 canvas에 딱 맞게 생성됩니다.

Canvas에 이미지를 띄워봅시다.

Canvas에 이미지를 띄우려면 2가지 새로운 요소가 필요합니다.

먼저 이미지를 불러오는 PhotoImage 입니다.

Syntax

tkinter.PhotoImage(file=img_directory)

위처럼 PhotoImage는 file 옵션으로 불러올 이미지의 directory를 받습니다.

여기서 directory는 상대경로/절대경로 모두 가능합니다.

Syntax

Canvas.create_image(x, y, image=PhotoImage)

그리고 불러온 이미지를 Canvas에 표시하기 위해선 위처럼 create_image method를 사용합니다.

- x, y

x, y인자는 Canvas 상에서 이미지를 표시할 때 이미지의 x, y좌표를 의미합니다.

여기서 주의할 것은 이미지의 정중앙을 기준으로 x, y좌표를 판단한다는 것입니다.

또한 여기서 x, y좌표는 Canvas 내부를 기준으로 합니다.

즉, window의 좌표가 아니라 Canvas를 전체로 판단하여 Canvas의 왼쪽 위가 x=0, y=0이 됩니다. (예시를 보면 이해가 될 것입니다.)

- Image=PhotoImage

위에서 PhotoImage가 이미지를 불러온다고했었죠.

이렇게 PhotoImage로 생성된 이미지 객체를 받습니다. 이 이미지가 canvas에 표시됩니다.

참고로 예시에 사용될 이미지는 아래와 같습니다.

import tkinter as tk

window = tk.Tk()

canvas = tk.Canvas(window, width=300, height=300, background='gray')
canvas.pack(padx=0, pady=0)

img = tk.PhotoImage(file='dice_5.png')
canvas.create_image(0, 0, image=img)

window.mainloop()

- img = tk.PhotoImage(file='dice_5.png')

먼저 이미지를 불러와서 PhotoImage 객체를 생성합니다.

- canvas.create_image(0, 0, image=img)

그리고 Canvas에 Image를 위치시킵니다.

근데 주의할 점은 0, 0이라고 적혀있는 부분입니다.

이것은 표시될 이미지의 x, y좌표라고했죠. 또한 이 좌표는 이미지의 중심을 기준으로 한다고 했습니다.

그래서 위 코드를 실행한 결과를 보면 이미지가 왼쪽 위에 잘려서 나옵니다.

주사위 이미지의  정중앙 좌표가 x=0, y=0이기 때문에 Canvas의 왼쪽 위로 치우쳐져 나타나고 따라서 Canvas를 벗어나는 부분은 잘려서 보입니다.

import tkinter as tk

window = tk.Tk()

canvas = tk.Canvas(window, width=300, height=300, background='gray')
canvas.pack(padx=20, pady=20)

img = tk.PhotoImage(file='dice_5.png')
canvas.create_image(0, 0, image=img)

window.mainloop()

이번에는 pack에 padding값을 추가해보았습니다.

여기서 중점으로 봐야할 것은 바로 이미지의 x, y 좌표입니다.

canvas를 pack으로 배치할 때 Padding을 20으로 설정했으므로 canvas의 왼쪽 위 좌표는 x=20, y=20이 된 상태입니다.

근데 주사위는 window의 x=0, y=0에 표시되지 않았습니다.

Canvas의 좌측 상단에 그대로 표시되어있죠.

따라서 이미지가 canvas 내부에 표시될 때에는 Canvas의 왼쪽 위 좌표를 x=0, y=0으로 간주하여 배치가 된다는 의미입니다.

import tkinter as tk

window = tk.Tk()

canvas = tk.Canvas(window, width=300, height=300, background='gray')
canvas.pack(padx=0, pady=0)

img = tk.PhotoImage(file='dice_5.png')
canvas.create_image(150, 150, image=img)

window.mainloop()

Canvas의 가로 길이가 300이고 세로 길이가 300입니다.

따라서 이미지를 Canvas의 정 중앙에 표시하기 위해 이미지의 x, y좌표를 150, 150으로 수정해보았습니다.

그랬더니 위처럼 이미지가 정 중앙에 표시되는걸 볼 수 있죠.

'Python > Python tkinter' 카테고리의 다른 글