Canvas - полотно и фигуры

Полотно Canvas

Canvas — это такое полотно или холст, в котором можно рисовать и двигать фигуры.

Начнём с шаблона приложения Tkinter:

############# БИБЛИОТЕКИ #############
import tkinter as tk

############# НАСТРОЙКИ ОКНА #############
window = tk.Tk()
window.title("Пример Canvas")
window.geometry("600x600")

############# ЭЛЕМЕНТЫ ОКНА #############


############# ЗАПУСК ОКНА #############
window.mainloop()

Чтобы добавить canvas в блок элементов окна, пишется команда:

tk.Canvas(window, width=400, height=400, bg="white")

Среди параметров полотна:

• width — ширина полотна в пикселях
• height — высота полотна в пикселях
• bg — цвет полотна

Таблица возможных цветов:

Создаём canvas и размещаем его в окне командой pack():

############# БИБЛИОТЕКИ #############
import tkinter as tk

############# НАСТРОЙКИ ОКНА #############
window = tk.Tk()
window.title("Пример Canvas")
window.geometry("600x600")

############# ЭЛЕМЕНТЫ ОКНА #############
полотно = tk.Canvas(window, width=600, height=600, bg="skyblue")
полотно.pack()

############# ЗАПУСК ОКНА #############
window.mainloop()

Добавление фигур

Фигуры на полотне рисуются командой:

ИМЯ_ПОЛОТНА.create_НАЗВАНИЕ_ФИГУРЫ(ПАРАМЕТРЫ)

Моё полотно называется «полотно», вместо него пишем название своего canvas!

Координаты точек считаются с левого верхнего угла окна.

• Чем правее точка, тем больше её координата X
• Чем ниже точка — тем больше её координата Y

Прямоугольник — create_rectangle

прямоугольник = полотно.create_rectangle(50, 50, 150, 150, fill="lightblue", outline="black", width=3)

• 50 — координата X первой точки
• 50 — координата Y первой точки
• 150 — координата X второй точки
• 150 — координата Y второй точки
• fill — цвет заливки
• outline — цвет обводки
• width — ширина обводки

Овал — create_oval

овал = полотно.create_oval(200, 50, 300, 150, fill="pink", outline="black", width=2)

• 200 — координата X первой точки
• 50 — координата Y первой точки
• 300 — координата X второй точки
• 150 — координата Y второй точки
• fill — цвет заливки
• outline — цвет обводки
• width — ширина обводки

Линия — create_line

линия = полотно.create_line(50, 200, 300, 200, width=3, fill="green")

• 50 — координата X первой точки
• 200 — координата Y первой точки
• 300 — координата X второй точки
• 200 — координата Y второй точки
• width — ширина линии в пикселях
• fill — цвет линии

Многоугольник — create_polygon

полотно.create_polygon(100, 250, 150, 350, 50, 350, fill="orange")

• 100 — координата X первой точки
• 250 — координата Y первой точки
• 150 — координата X второй точки
• 350 — координата Y второй точки
• 50 — координата X третьей точки
• 350 — координата Y третьей точки
• … (можно добавить сколько угодно точек)
• fill — цвет многоугольника

Надпись — create_text

текст = полотно.create_text(200, 380, text="Текст!", font=("Arial", 14))

• 200 — координата X надписи
• 380 — координата Y надписи
• text — текст надписи
• font — параметры шрифта

СПЕЦЗАДАНИЕ ᕦ^•ω•^ᕤ

Клепаем рисунок на холсте по образцу!

Твоя задача: повторить рисунок с картинки ниже, используя команды:

• create_rectangle — прямоугольники
• create_oval — овалы и круги
• create_line — линии
• create_polygon — многоугольники (треугольники)
• create_text — подписи

Образец для повторения:

Удаление фигур

Команда удаления фигуры с полотна:

НАЗВАНИЕ_ПОЛОТНА.delete(ИМЯ_ФИГУРЫ)

Команда удаления всех фигур с полотна:

НАЗВАНИЕ_ПОЛОТНА.delete("all")

События при нажатии

Чтобы выполнять код по нажатию на клавишу используем команду bind:

window.bind("<КЛАВИША>", ИМЯ_ФУНКЦИИ)

Примеры клавиш:

Пример удаления текста при нажатии на левую кнопку мыши:

def левая_кнопка(event):
    полотно.delete(текст)

window.bind("<Button-1>", левая_кнопка)

Пример удаления всех фигур при нажатии на клавишу пробел:

def пробел(event):
    полотно.delete("all")

window.bind("<space>", пробел)

Задания по событиям ≽^◕ ˕ ◕^≼

1. Создай полотно и нарисуй на нём три фигуры
2. Сделай так, чтобы по нажатию на Ctrl все фигуры удалялись
3. Сделай так, чтобы по нажатию на Esc окно закрывалось

Рисование фигуры по нажатию

Чтобы рисовать фигуры по клику мышкой — используем следующий код:

def левый_клик(event):
    x = event.x
    y = event.y
    размер = 100
    полотно.create_rectangle(x, y, x+размер, y+размер, fill="blue", outline="black", width=2)

полотно.bind("<Button-1>", левый_клик)

Здесь event.x и event.y — точка на канвасе, на которую кликнули мышкой, а размер — переменная размера фигуры.

Задания по рисованию ฅ^•ω•^ฅ

1. Сделай так, чтобы по клику левой кнопкой мыши рисовался кружочек (а не квадратик)
2. Добавь второй клик — по правой кнопке мыши (<Button-3>) всё полотно очищается
3. Сделай так, чтобы размер фигуры зависел от того, куда кликнули (например, ближе к краю — меньше фигура)

Движение фигуры по нажатию

Для перемещения фигур используется функция move:

НАЗВАНИЕ_ПОЛОТНА.move(НАЗВАНИЕ_ФИГУРЫ, СДВИГ_ПО_Х, СДВИГ_ПО_У)

• На сколько пикселей двигаем вправо — первый параметр
• На сколько пикселей двигаем вниз — второй параметр

Например, у вас есть фигура кружочек:

кружочек = полотно.create_oval(50, 50, 300, 300, fill="pink")

Чтобы по нажатию на стрелку вправо двигать кружочек вправо, используем код:

def двигаем_вправо(event):
    полотно.move(кружочек, 10, 0)

window.bind("<Right>", двигаем_вправо)

• Стрелка вправо — <Right>
• Стрелка влево — <Left>
• Стрелка вверх — <Up>
• Стрелка вниз — <Down>

Чтобы подвинуть фигуру вверх при нажатии на стрелку вверх, используем код:

def двигаем_вверх(event):
    полотно.move(кружочек, 0, -10)

window.bind("<Up>", двигаем_вверх)

Задания по движению ≽^◕ ˕ ◕^≼

1. Нарисовать фигуру на полотне и сделать движение на все четыре стрелки:
   • ⬆️ вверх — <Up>
   • ⬇️ вниз — <Down>
   • ⬅️ влево — <Left>
   • ➡️ вправо — <Right>
2. Сделай так, чтобы фигура двигалась быстрее (например, на 20 пикселей за нажатие)
3. Добавь движение по диагонали — например, при нажатии <w> фигура едет вверх-вправо

СПЕЦЗАДАНИЕ ᕦ^•ω•^ᕤ

Клепаем мини-игру на Canvas!

Что должно быть:

• tk.Canvas — полотно 600x600
• Нарисован кружочек (или квадратик) — это «герой»
• Стрелки <Up>, <Down>, <Left>, <Right> двигают героя
• По нажатию на пробел — очищается полотно
• По нажатию на левую кнопку мыши — рисуется новая фигура в месте клика
• По нажатию на правую кнопку мыши — удаляются все фигуры

Пример готовой игры: