Как изменить цвет фигуры tkinter

В этой части изучения Tkinter мы немного порисуем. Рисование в Tkinter реализовано при помощи виджета Canvas. Это функционал высокого уровня, который позволяет создавать графику в Tkinter. Рисование можно использовать для создания графиков статистики, самодельных пользовательских виджетов и даже небольших игр.

Содержание курса

1. Создание окна по центру и кнопка выхода в Tkinter
2. Разметка виджетов в Tkinter — pack, grid и place
3. Виджеты Checkbutton, Label, Scale и Listbox в Tkinter
4. Меню, подменю и панель инструментов в Tkinter
5. Диалоговые окна в Tkinter — Выбор цвета — Выбор файла
6. Рисуем линии, прямоугольники, круг и текст в Tkinter
7. Пишем игру змейка на Tkinter

Содержание статьи

• Рисуем линии в Tkinter — create_line()
• Создаем цветные прямоугольники в Tkinter
• Рисуем различные формы в Tkinter
• Вставляем изображение в Canvas
• Меняем шрифт и рисуем текст в Tkinter

Рисуем линии в Tkinter — create_line()

Линия – это примитивный геометрический элемент. На виджете Canvas создать линию можно при помощи метода create_line().

В примере нашего кода, мы рисуем простые линии в Tkinter.

Параметрами метода create_line() являются координаты x и y, которые обозначают стартовые и конечные точки линии.

Мы нарисовали вертикальную линию. Опция dash позволяет создать пунктированную линию. Множества (4, 3) означает:

• 4 — длинна тире или точки в пикселях;
• 2 — пустой промежуток между тире либо точками.

Если указать dash=(1, 1) то у нас будет линия из точек.

Метод create_line() может содержать несколько конечных точек, которые будут пресекаться линией. Согласно этому коду мы нарисовали треугольник имея три координата разных точек.

Цвет является объектом, который отображает комбинацию Красного, Зеленого и Синего цветов (RGB).

В данном примере мы нарисовали прямоугольники и закрасили их разными цветами. Мы ранее работали с выбором цвета в Tkinter используя диалоговое окно цветовой палитры.

Мы создали виджет canvas.

С помощью create_rectangle() мы создаем прямоугольник на холсте. Первыми четырьмя параметрами являются x и y координаты двух ограничительных точек: верхней левой и нижней правой. При помощи параметра outline мы можем задать цвет контура прямоугольников. А параметр fill используется для окрашивания всей внутренней области прямоугольника.

Рисуем различные формы в Tkinter

На холсте мы можем нарисовать самые разнообразные формы. На представленном ниже примере показаны некоторые из них.

Мы нарисовали разные формы в окне:

• круг;
• овал;
• прямоугольник;
• дугу и многугольник.

Контур окрашен в красный цвет, фигуры были наполнены зеленым цветом. Ширина контура указана в 2 пикселя.

Метод create_oval() используется для того, чтобы создать круг в Tkinter. Первые четыре параметра определяют ограничивающие координаты фигуры. Иными словами, это x и y координаты верхней левой и правой нижней точек квадрата, в который помещен круг.

Мы нарисовали прямоугольник в Tkinter. Координаты снова обозначают ограничительные точки с координатами x и y..

С помощью этого кода мы создаем дугу. Дуга является частью круга. Мы указывает ограничительные координаты нашей дуги.

Успейте заказать просмотры на видео в YouTube ДокторСмм по наиболее дешевой цене с большими оптовыми скидками. Кроме того, с заказом Вы сможете получить также персональные условия на приобретение ресурса с возможностью выбора более подходящей для Вашей ситуации скорости поступления просмотров. Торопитесь, скидки действуют ограниченное время!

С помощью параметра start мы устанавливаем угол дуги. Параметр extent указывает на размер угла.

Данный код позволяет нам создать многоугольник. У этой фигуры присутствует большое количество углов. Чтобы создать многоугольник в Tkinter, нам нужно задать несколько координат, используя метод create_polygon().

Вставляем изображение в Canvas

В данном примере мы рассмотрим, как вставить изображение в canvas виджете.

В данном примере используется файл изображения tatras.jpg который нужно сохранить рядом с нами кодом:

• tatras.jpg

В примере продемонстрировано как добавить изображение в Canvas.

Из библиотеки Pillow мы используем модули Image и ImageTk.

Мы создаем виджет Canvas. Учитываем размеры изображения. Холст будет на 20 пикселей шире и на 20 пикселей выше, нежели наше изображение.

Мы используем метод create_image(), чтобы создать изображение на холсте. Чтобы показать изображение, оно закрепляется в северном и западном направлениях anchor=NW нашего окна. Параметр image позволяет отобразить изображение.

Меняем шрифт и рисуем текст в Tkinter

В последнем примере мы рассмотрим рисование текста используя виджет Canvas в Tkinter.

Мы рисуем слова из песни в нашем окне.

Первые два параметра – это x и y координаты центральной точки текста. Если мы закрепим текстовый объект по направлению запада anchor=W, текст будет начинаться в этой части окна. Параметр font позволяет нам менять шрифт текста, а параметр text отображает написанный текст в окне.

Виджет Canvas() — Холст используется для добавления структурированной графики в приложение.

Синтаксис создания виджета подобен, другим объектам tkinter:

widget_name = Canvas(parent, options)

• parent — окно или фрейм (рамка), в котором будет размещаться холст;
• options — параметры настройки холста.

Базовые параметры

1. bd — представляет ширину границы. Ширина по умолчанию — 2.
2. bg — он представляет собой цвет фона холста.
3. confine — он настроен на то, чтобы холст нельзя было прокручивать за пределами области прокрутки.
4. cursor — курсор используется как стрелка, круг, точка и т.д. На холсте.
5. height — представляет размер холста в вертикальном направлении.
6. highlightcolor — представляет цвет выделения, когда виджет находится в фокусе.
7. relief — представляет собой тип бордюра. Возможные значения: SUNKEN, RAISED, GROOVE и RIDGE.
8. scrollregion — представляет координаты, заданные как кортеж, содержащий область холста.
9. width Он представляет собой ширину холста.
10. xscrollincrement — если задано положительное значение. Холст размещается только с кратным этому значению.
11. xscrollcommand — если холст можно прокручивать, этот атрибут должен быть методом .set() горизонтальной полосы прокрутки.
12. yscrollincrement — работает как xscrollincrement, но управляет вертикальным перемещением.
13. yscrollcommand — если холст можно прокручивать, этот атрибут должен быть методом .set() вертикальной полосы прокрутки.

В tkinter от класса Canvas() создаются объекты-холсты, на которых можно «рисовать», размещая различные фигуры и объекты. Делается это с помощью вызовов соответствующих методов.

При создании экземпляра Canvas необходимо указать его ширину и высоту. При размещении геометрических примитивов и других объектов указываются их координаты на холсте. Точкой отсчета является верхний левый угол.

В программе ниже создается холст. На нем с помощью метода create_line() рисуются отрезки. Сначала указываются координаты начала (x1, y1), затем – конца (x2, y2):

from tkinter import *

root = Tk()

c = Canvas(root, width=200, height=200, bg='white')
c.pack()

c.create_line(10, 10, 190, 50)
c.create_line(100, 180, 100, 60,
     fill='green', width=5, arrow=LAST,
     dash=(10,2), activefill='lightgreen',
     arrowshape="10 20 10")

root.mainloop()

Остальные свойства являются необязательными. Так activefill определяет цвет отрезка при наведении на него курсора мыши.

Создание прямоугольников методом create_rectangle():

…
c.create_rectangle(10, 10, 190, 60)
c.create_rectangle(60, 80, 140, 190, fill='yellow', outline='green', width=3, activedash=(5, 4))
…

Первые координаты – верхний левый угол, вторые – правый нижний. В приведенном примере, когда на второй прямоугольник попадает курсор мыши, его рамка становится пунктирной, что определяется свойством activedash.

Методом create_polygon() рисуется произвольный многоугольник путем задания координат каждой его точки:

…
c.create_polygon(100, 10, 20, 90, 180, 90)
c.create_polygon(40, 110, 160, 110, 190, 180, 10, 180, fill='orange', outline='black')
…

Для удобства координаты точек можно заключать в скобки:

…
c.create_polygon((40, 110), (160, 110), (190, 180), (10, 180), fill='orange', outline='black')
…

Метод create_oval() создает эллипсы. При этом задаются координаты гипотетического прямоугольника, описывающего эллипс. Если нужно получить круг, то соответственно описываемый прямоугольник должен быть квадратом:

…
c.create_oval(50, 10, 150, 110, width=2)
c.create_oval(10, 120, 190, 190, fill='grey70', outline='white')
…

Более сложные для понимания фигуры получаются при использовании метода create_arc(). В зависимости от значения опции style можно получить сектор (по умолчанию), сегмент (CHORD) или дугу (ARC). Также как в случае create_oval() координаты задают прямоугольник, в который вписана окружность (или эллипс), из которой «вырезают» сектор, сегмент или дугу. Опции start присваивается градус начала фигуры, extent определяет угол поворота:

…
c.create_oval(10, 10, 190, 190, fill='lightgrey', outline='white')
c.create_arc(10, 10, 190, 190, start=0, extent=45, fill='red')
c.create_arc(10, 10, 190, 190, start=180, extent=25, fill='orange')
c.create_arc(10, 10, 190, 190, start=240, extent=100, style=CHORD, fill='green')
c.create_arc(10, 10, 190, 190, start=160, extent=-70, style=ARC, outline='darkblue', width=5)
…

В данном примере светло-серый круг используется исключительно для наглядности.

На холсте можно разместить текст. Делается это с помощью метода create_text():

…
c.create_text(100, 100, text="Hello World,nPythonnand Tk", justify=CENTER, font="Verdana 14")
c.create_text(200, 200, text="About this", anchor=SE, fill="grey")
…

По умолчанию в заданной координате располагается центр текстовой надписи. Чтобы изменить это и, например, разместить по указанной координате левую границу текста, используется якорь со значением W (от англ. west – запад). Другие значения: N, NE, E, SE, S, SW, W, NW. Если букв, задающих сторону привязки, две, то вторая определяет вертикальную привязку (вверх или вниз «уйдет» текст от заданной координаты). Свойство justify определяет лишь выравнивание текста относительно себя самого.

Упражнения

1. Создайте на холсте подобное изображение:

1. Для создания травы используется цикл.

Canvas. Идентификаторы, теги и анимация

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

В tkinter существует два способа «пометить» фигуры, размещенные на холсте, – это идентификаторы и теги. Первые всегда уникальны для каждого объекта. Два объекта не могут иметь одни и тот же идентификатор. Теги не уникальны. Группа объектов на холсте может иметь один и тот же тег. Это дает возможность менять свойства всей группы. Отдельно взятая фигура на Canvas может иметь как идентификатор, так и тег.

Методы, создающие фигуры на холсте, возвращают численные идентификаторы этих объектов, которые можно присвоить переменным, через которые позднее обращаться к созданным фигурам:

from tkinter import *
root = Tk()
c = Canvas(width=300, height=300, bg='white')
c.focus_set()
c.pack()

ball = c.create_oval(140, 140, 160, 160, fill='green')
c.bind('<Up>', lambda event: c.move(ball, 0, -2))
c.bind('<Down>', lambda event: c.move(ball, 0, 2))
c.bind('<Left>', lambda event: c.move(ball, -2, 0))
c.bind('<Right>', lambda event: c.move(ball, 2, 0))

root.mainloop()

В данном примере круг двигается по холсту с помощью стрелок на клавиатуре. Когда создавался круг, его идентификатор был присвоен переменной ball. Метод move() объекта Canvas принимает идентификатор и смещение по осям.

С помощью метода itemconfig() можно изменять другие свойства. Метод coords() устанавливает новые координаты фигуры, если они заданы. Если указывается только идентификатор или тег, то coords() возвращает текущие координаты:

from tkinter import *
root = Tk()
c = Canvas(width=200, height=200, bg='white')
c.pack()

rect = c.create_rectangle(80, 80, 120, 120, fill='lightgreen')

def inFocus(event):
    c.itemconfig(rect, fill='green', width=2)
    c.coords(rect, 70, 70, 130, 130)
c.bind('<FocusIn>', inFocus)

root.mainloop()

Здесь при получении холстом фокуса (нажать Tab) изменится цвет и размер квадрата.

В отличие от идентификаторов, которые являются уникальными для каждого объекта, один и тот же тег может присваиваться разным объектам. Дальнейшее обращение к такому тегу позволит изменить все объекты, в которых он был указан. В примере ниже эллипс и линия содержат один и тот же тег, а функция color изменяет цвет всех объектов с тегом group1. Обратите внимание, что в отличие от имени идентификатора (переменная), имя тега заключается в кавычки (строковое значение):

…
oval = c.create_oval(30, 10, 130, 80, tag="group1")
c.create_line(10, 100, 450, 100, tag="group1")

def color(event):
     c.itemconfig('group1',fill="red",width=3)

c.bind('<Button-3>', color)
…

Метод tag_bind() позволяет привязать событие (например, щелчок кнопкой мыши) к определенной фигуре на Canvas. Таким образом, можно реализовать обращение к различным областям холста с помощью одного и того же события. Пример ниже иллюстрирует, как изменения на холсте зависят от того, где произведен клик:

from tkinter import *

c = Canvas(width=460, height=100, bg='grey80')
c.pack()

oval = c.create_oval(30, 10, 130, 80, fill="orange")
c.create_rectangle(180, 10, 280, 80, tag="rect", fill="lightgreen")
trian = c.create_polygon(330, 80, 380, 10, 430, 80, fill='white',outline="black")

def oval_func(event):
     c.delete(oval)
     c.create_text(80, 50, text="Круг")

def rect_func(event):
     c.delete("rect")
     c.create_text(230, 50, text="Прямоугольник")

def triangle(event):
     c.delete(trian)
     c.create_text(380, 50, text="Треугольник")

c.tag_bind(oval, '<Button-1>', oval_func)
c.tag_bind("rect", '<Button-1>', rect_func)
c.tag_bind(trian, '<Button-1>', triangle)

mainloop()

До кликов:

После кликов:

Метод delete() удаляет объект. Если нужно очистить холст, то вместо идентификаторов или тегов используется константа ALL.

Упражнения

Практическая работа. Анимация в tkinter.

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

from tkinter import *

root = Tk()
c = Canvas(root, width=300, height=200, bg="white")
c.pack()

ball = c.create_oval(0, 100, 40, 140, fill='green')

def motion():
    c.move(ball, 1, 0)
    if c.coords(ball)[2] < 300:
        root.after(20, motion)

motion()

root.mainloop()

Выражение c.coords(ball) возвращает список текущих координат объекта (в данном случае это ball). Третий элемент списка соответствует его второй координате x.

Метод after() вызывает функцию, переданную вторым аргументом, через количество миллисекунд, указанных первым аргументом.

Изучите приведенную программу и самостоятельно запрограммируйте постепенное движение фигуры в ту точку холста, где пользователь кликает левой кнопкой мыши. Координаты события хранятся в его атрибутах x и y (event.x, event.y).

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

При работе с двухмерной графикой базовым понятием является холст.

Canvas (холст) — это достаточно сложный объект библиотеки tkinter. Он помогает располагать геометрические фигуры, узоры вставленные изображения и другие виджеты (например, метки, кнопки, текстовые поля).

При создании экземпляра Canvas необходимо указать его ширину и высоту. При размещении геометрических примитивов и других объектов указываются их координаты на холсте. Точкой отсчета является верхний левый угол.

Для того чтобы создать объект-холст необходимо вызвать соответствующий класс модуля tkinter и установить некоторые значения свойств. Например:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

canv.pack()
root.mainloop()

В этом примере мы создаем холст с размером 500х400 пикселей и светло-серым фоном.

Перед тем как создавать геометрические фигуры на холсте следует разобраться с координатами и единицами измерения на холсте. Нулевая точка (0,0) для объекта Canvas располагается в верхнем левом углу.

Единицы измерения пиксели (точки экрана). У любой точки первое число — это расстояние от нулевого значения по оси X, второе — по оси Y.

Чтобы нарисовать линию на холсте следует к объекту применить метод create_line. Пример:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

canv.create_line(200,50,300,50, width=3, fill="blue")
canv.create_line(0,0,100,100, width=2, arrow=LAST)

canv.pack()
root.mainloop()

Будет выведено:

Четыре числа — это пары координат начала и конца линии. Свойство fill позволяет задавать цвет линии отличный от черного, а arrow — установить стрелку (в конце, начале или по обоим концам линии).

Метод create_rectangle создает прямоугольник. Аналогично линии в скобках первыми аргументами прописываются четыре числа. Первые две координаты обозначают верхний левый угол прямоугольника, вторые — правый нижний.

Рассмотрим пример:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

x = 50
y = 300
canv.create_rectangle(x,y,x+80,y+50, fill="white", outline="blue")

canv.pack()
root.mainloop()

Опция outline определяет цвет границы прямоугольника.

Будет выведено:

Чтобы создать произвольный многоугольник, требуется задать пары координат для каждой его точки. В примере мы рассмотрим другой подход. Он может быть полезен, если начальные координаты объекта могут изменяться, а его размер строго регламентирован:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

canv.create_polygon([250,110],[200,150],[300,150], fill="red")

canv.pack()
root.mainloop()

Будет выведено:

Квадратные скобки при задании координат используются для удобочитаемости (их можно не использовать). Свойство smooth задает сглаживание:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

canv.create_polygon([250,110],[200,150],[300,150], fill="red")
canv.create_polygon([300,80],[400,80],[450,75],[450,200],[300,180],[330,160],outline="white", smooth=1)

canv.pack()
root.mainloop()

Выведет:

При создании эллипса задаются координаты гипотетического прямоугольника, описывающего данный эллипс:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

canv.create_polygon([250,110],[200,150],[300,150], fill="red")
canv.create_polygon([300,80],[400,80],[450,75],[450,200],[300,180],[330,160],outline="white", smooth=1)
canv.create_oval([20,200],[150,300], fill="gray50") # создаем эллипс

canv.pack()
root.mainloop()

Выведет:

Более сложные для понимания фигуры получаются при использовании метода create_arc.

В зависимости от значения опции style можно получить сектор (по умолчанию), сегмент (CHORD) или дугу (ARC). От опций start и extent зависит угол фигуры. Метод create.text создает текстовую надпись. Пример:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

canv = Canvas(root, width=500, height=400, bg='lightgray', cursor='pencil')

canv.create_arc([160,230], [230,330], start=0, extent=140, fill="lightgreen")
canv.create_arc([250,230], [320,330], start=0, extent=140, style=CHORD, fill="green")
canv.create_arc([340,230], [410,330], start=0, extent=140, style=ARC, outline="darkgreen", width=2)
canv.create_text(20,330, text="Графические примитивы", font="Verdana 14", anchor="w", justify=CENTER, fill="red")

canv.pack()
root.mainloop()

Будет выведено:

Если что часто требуется «нарисовать» на холсте какие-либо повторяющиеся элементы. Для того, чтобы не загружать код, используют циклы. Например, так:

x=10
   while x < 450:
   canv.create_rectangle(x,400,x+50,450)
   x = x + 60

Обращение к уже существующим графическим примитивам

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

У любого объекта может быть как идентификатор, так и тег. Использование идентификаторов и тегов немного различается.

Рассмотрим несколько методов изменения уже существующих объектов с использованием при этом идентификаторов. Для начала создадим холст и три объекта на нем.

При создании объекты «возвращают» свои идентификаторы, которые можно связать с переменными (oval, rect и trial в примере ниже) и потом использовать их для обращения к конкретному объекту:

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

c = Canvas(width=460,height=460,bg='grey80')
c.pack()
oval = c.create_oval(30,10,130,80)
rect = c.create_rectangle(180,10,280,80)
trian = c.create_polygon(330,80,380,10,430,80, fill='grey80', outline="black")

root.mainloop()

Будет выведено:

Далее можно использовать методы-«модификаторы» указывая в качестве первого аргумента идентификатор объекта. Метод move перемещает объект по оси X и Y на расстояние указанное в качестве второго и третьего аргументов.

Следует понимать, что это не координаты, а смещение, т.е. в примере ниже прямоугольник опустится вниз на 150 пикселей. Метод itemconfig изменяет указанные свойства объектов, coords изменяет координаты (им можно менять и размер объекта).

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

c = Canvas(width=460,height=460,bg='grey80')
c.pack()
oval = c.create_oval(30,10,130,80)
rect = c.create_rectangle(180,10,280,80)
trian = c.create_polygon(330,80,380,10,430,80, fill='grey80', outline="black")

c.move(rect,0,150)
c.itemconfig(trian,outline="red",width=3)
c.coords(oval,300,200,450,450)

root.mainloop()

Метод tag_bind позволяет привязать событие (например, щелчок кнопкой мыши) к определенному объекту.

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

from tkinter import *
    
root = Tk()
root.title("Графические примитивы")
root.minsize(width=500, height=400)

c = Canvas(width=460,height=100,bg='grey80')
c.pack()

oval = c.create_oval(30,10,130,80,fill="orange")
c.create_rectangle(180,10,280,80,tag="rect",fill="lightgreen")
trian = c.create_polygon(330,80,380,10,430,80,fill='white',outline="black")

def oval_func(event):
 c.delete(oval)

c.create_text(30,10,text="Здесь был круг",anchor="w")

def rect_func(event):
 c.delete("rect")

c.create_text(180,10,text="Здесь былnпрямоугольник",anchor="nw")

def triangle(event):
 c.create_polygon(350,70,380,20,410,70,fill='yellow',outline="black")

c.tag_bind(oval,'<Button-1>',oval_func)
c.tag_bind("rect",'<Button-1>',rect_func)
c.tag_bind(trian,'<Button-1>',triangle)

mainloop()

Будет выведено: