Виджет Tkinter Canvas в Python — создание холста

Виджет Canvas — самый гибкий виджет в Tkinter.

• Что такое виджет Canvas Tkinter в Python?
• Добавление элементов на холст с помощью методов create_*
• Создание линии
• Создание прямоугольника
• Добавление овала
• Многоугольник на холсте
• Отображение текста
• Как нарисовать дугу
• Размещение изображения
• Привязка события к элементу

Что такое виджет Canvas Tkinter в Python?

Виджет холста позволяет вам создавать что угодно: от пользовательских виджетов до полноценных пользовательских интерфейсов.

Виджет холста представляет собой пустую область, на которой можно рисовать фигуры, создавать текст и размещать изображения.

Чтобы создать виджет Canvas, вы создаете новый экземпляр класса Canvas из модуля tkinter. Например, следующий код создает холст в окне:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)

root.mainloop()

Выход:

Как это работает.

• Сначала создайте новый объект Canvas шириной 600 пикселей, высотой 400 пикселей и белым фоном:

canvas = tk.Canvas(root, width=600, height=400, bg='white')

• Во-вторых, поместите объект canvas в корневое окно, используя геометрию pack().

canvas.pack(anchor=tk.CENTER, expand=True)

У холста есть система координат, как у окна. Начало координат(0,0) находится в верхнем левом углу. Направление оси x — слева направо, а направление оси y — сверху вниз.

Добавление элементов на холст с помощью методов create_*

Объект canvas имеет ряд методов add_*. Эти методы позволяют размещать на нем элементы. Элементы:

Элемент	Метод
Линия	create_line()
Прямоугольник	create_rectangle()
Овал	create_oval()
Дуга	create_arc()
Многоугольник	create_polygon()
Текст	create_text(()
Изображение	create_image()

Создание линии

Для создания линии используется метод create_line(). Например, следующий код создает красную линию:

canvas.create_line((50, 50),(100, 100), width=4, fill='red')

Выход:

В этом примере линия состоит из двух точек(50,50) и(100,100). Метод create_line() соединяет точки между этими точками.

Аргумент width определяет ширину линии, а аргумент fill определяет цвет линии.

Создание прямоугольника

Чтобы нарисовать прямоугольник, используйте метод create_rectangle(). Например:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Rectangle')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)

canvas.create_rectangle((100, 100),(300, 300), fill='green')

root.mainloop()

Выход:

Добавление овала

Чтобы нарисовать овал, используйте метод create_oval(). Например:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Oval')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)

 points =(
   (50, 150),
   (200, 350),
)
canvas.create_oval(*points, fill='purple')

root.mainloop()

Выход:

Как и прямоугольник, овал принимает координаты верхнего левого и нижнего правого углов своего ограничивающего прямоугольника. Ограничивающий прямоугольник овала — это наименьший прямоугольник, содержащий овал.

В этом примере верхний левый и нижний правый углы ограничивающей рамки имеют координаты(50,150) и(200,350).

Многоугольник на холсте

Чтобы нарисовать многоугольник, используйте метод create_polygon(). Например:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Polygon')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)


# create a polygon
points =(
   (100, 300),
   (200, 200),
   (300, 300),
)
canvas.create_polygon(*points, fill='blue')

root.mainloop()

Выход:

Отображение текста

Чтобы разместить текст на холсте, используйте метод create_text(). Например:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Text')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)


canvas.create_text(
   (300, 100),
    text="Canvas Demo",
    fill="orange",
    font='tkDefaeultFont 24'
)

root.mainloop()

Выход:

Как нарисовать дугу

Чтобы нарисовать дугу на холсте, используйте метод create_arc(). Например:

import tkinter as tk
from turtle import width

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Arc')

canvas = tk.Canvas(root, width=600, height=600, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)

canvas.create_arc((10, 10),(200, 200), style=tk.PIESLICE, width=2)
canvas.create_arc((10, 200),(200, 390), style=tk.CHORD, width=2)
canvas.create_arc((10, 400),(200, 590), style=tk.ARC, width=2)


root.mainloop()

Выход:

Размещение изображения

Чтобы разместить изображение на холсте, используйте метод create_image(). Например:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Image')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)

python_image = tk.PhotoImage(file='python.gif')
canvas.create_image(
   (100, 100),
    image=python_image
)

 root.mainloop()

Выход:

Обратите внимание: если вы передадите PhotoImage непосредственно в метод create_image(), изображение не отобразится, поскольку оно автоматически удаляется сборщиком мусора.

Следующий код не будет работать:

canvas.create_image(
   (100, 100),
    image=tk.PhotoImage(file='python.gif')
)

Привязка события к элементу

Все методы create_* возвращают строковое значение, которое идентифицирует элемент в контексте объекта Canvas. И вы можете использовать это значение для привязки события к элементу.

Чтобы привязать событие к элементу, используйте метод tag_bind() объекта Canvas. Например:

import tkinter as tk

root = tk.Tk()
root.geometry('800x600')
root.title('Canvas Demo - Binding Event')

canvas = tk.Canvas(root, width=600, height=400, bg='white')
canvas.pack(anchor=tk.CENTER, expand=True)

python_image = tk.PhotoImage(file='python.gif')
image_item = canvas.create_image(
   (100, 100),
    image=python_image
)
canvas.tag_bind(
    image_item,
    '<Button-1>',
    lambda e: canvas.delete(image_item)
)

root.mainloop()

В этом примере мы привязываем щелчок левой кнопкой мыши к элементу изображения. Если щелкнуть по изображению, выполнится лямбда, которая удалит изображение с холста.