Что такое Tkinter?

Tkinter — это библиотека, используемая для создания графики, в том числе — графического пользовательского интерфейса GUI.

Подключение Tkinter в Python и создание пользовательского окна.

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

from tkinter import *

После подключения библиотеки нужно создать графическое окно, назовем его «tk». Однако, рисовать в окне мы не будем — это дурной тон, все великие художники для своих картин используют холсты — canvas! Не будем от них отставать и приготовим холст для наших рисунков с помощью функции Canvas(). Чтобы созданный холст стал видим пользователям, применим к нему функцию pack():

from tkinter import * 
# создаем графическое окно tk
tk = Tk() 
# создаем холст 
canvas = Canvas(tk, height=500, width=500, bg="#ccf9ff")
# делаем холст видимым
canvas.pack()

Холст готов! Можно рисовать! 

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

Таким образом, координаты точки, изображенной на рисунке слева, имеют вид: (200, 100).

Пара слов о раскрашивании фигур

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

• fill = «значение цвета», например fill = «#ccc» — закрашивает фигуру в заданный цвет;

• outline = «значение цвета», например outline = «#000» — определяет цвет обводки;

• width = «ширина обводки в pt», например, width = 3 — определяет ширину обводки.

Эти параметры перечисляются через запятую после обязательных параметров. Например:

canvas.create_oval(245,160, 315,230, fill="#fff", outline="#313939", width=3 )

Рисуем прямоугольник

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

canvas.create_rectangle(180,320, 310, 370)

Добавим дополнительные параметры для придания красоты нашему прямоугольнику:

canvas.create_rectangle(180,320, 310, 370, fill="#fff7cb", outline="#313939", width=3)

Размещаем текст в Tkinter

Превратим прямоугольник, созданный в предыдущем примере, в элемент мыслевыражения! Напишем на нем гениальную кошачью мысль вида: ‘МУР-МЯУ’ так, чтобы эта мысль располагалась прямо по центру прямоугольника. Для этого нам нужно указать:

1. Координату центральной точки надписи, у меня это координата 247,348
2. Подготовить текст надписи, он готов: ‘МУР-МЯУ’. Текст записывает в параметре text: text=’МУР-МЯУ’
3. При желании добавить шрифт и размер: font=(‘Courier’, 18)

Соберем все параметры в единой строке в вызове функции create_text:

canvas.create_text(247,348, text="МУР-МЯУ", font=('Courier', 18))

Взгляните, у нас получилась полноценная кошачья табличка!

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

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

Фигура кота — это многоугольник серого цвета ‘#a3bcbf’ с темной обводкой цвета ‘#313939’ и толщиной 3pt. Чтобы создать многоугольник в Tkinter, нужно вызвать функцию create_polygon с координатами углов создаваемого многоугольника. Взгляните, как выглядит фигура кота на координатной плоскости:

Координаты точек определены, а значит, можно вызывать функцию create_polygon:

canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420)

Полигон создан! Преобразим его с помощью дополнительных параметров: fill, outline и width:

canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420, outline="#313939", width=3, fill='#a3bcbf')

Чтобы созданный полигон оказался под табличкой с кошачьей надписью, нужно строку кода, в которой мы создаем полигон расположить ВЫШЕ строк кода, в которых создается таблица с надписью :

from tkinter import *
tk = Tk()
canvas = Canvas(tk, width=500, height=500, bg="#ccf9ff")
canvas.pack()
canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420, outline="#313939", width=3, fill='#a3bcbf')
canvas.create_rectangle(180,320, 310, 370, fill="#fff7cb", outline="#313939", width=3)
canvas.create_text(247,348, text="МУР-МЯУ", font=('Courier', 18))

У нас появился Telegram-канал для изучающих Python! Канал совсем свежий, подпишись одним из первых, ведь вместе «питонить» веселее! 😉 Ссылка на канал: «Кодим на Python!»

Создаем овалы и круги в Tkinter

Создание овала или круга в Tkinter очень похоже на создание прямоугольника. Все дело в том, что принцип создания округлых форм в Tkinter основан на вписывании их в прямоугольные или квадратные. То есть вам не нужно знать радиус окружности и координаты ее центральной точки. Для создания круга нужно указать координаты верхней левой и правой нижней точек квадрата, описывающего эту окружность. А при создании овала, соответственно, верхней левой и правой нижней точек прямоугольника, описывающего этот овал. Далее можно перечислить необязательные параметры: цвета fill, окантовки outline и ширины окантовки width.

Давайте создадим парочку белых кругов c обводкой цвета «#313939» и толщиной в 3 pt:

<img width="160" height="172" src=""> canvas.create_oval(175,160, 245, 230, fill="#fff", outline="#313939", width=3)
canvas.create_oval(245,160, 315,230, fill="#fff", outline="#313939", width=3 )

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

canvas.create_oval(213, 192, 223, 202, fill="#000" )
canvas.create_oval(264, 192, 274, 202, fill="#000" )

Рисуем линии

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

Найдите на изображении слева линию, которую выведет следующий код:

canvas.create_line(245, 232, 245, 282, width=3 )

Арки и сегменты в Tkinter

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

На изображении выше показана нулевая позиция при определении параметра extent. Зеленым цветом обозначена верхняя дуга, которая образуется при отклонении на 60 градусов от нуля. Нижняя дуга обозначена коричневым цветом. Она образуется при отклонении на -120 градусов от деления «-30 градусов». Чтобы изобразить такую дугу в Tkinter нужно помимо параметра extent = -120 задать дополнительно параметр со стартовой позицией start = 30.

Пришло время нарисовать нашему котику улыбку:

canvas.create_arc(210,285, 280,245, start=-10, extent=-160, style=ARC, width=3)

Взгляните, как похорошел наш котик!

А теперь предлагаю самостоятельно потренироваться и дорисовать нашему коту носик, лапки и хвост, чтобы он выглядел примерно так:

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

from tkinter import *
tk = Tk()
canvas = Canvas(tk, width=500, height=500, bg="#ccf9ff")
canvas.pack()
# рисуем хвост - сегмент окружности
canvas.create_arc(220,454, 400,180, fill="#c6dcdf", outline="#313939", width=3, start=-48, extent=90)
# фигура кота из многоугольника
canvas.create_polygon(120,420, 170,50, 220,130, 270,130, 320,50, 370,420, outline="#313939", width=3, fill='#a3bcbf')
# глаза - белые круги
canvas.create_oval(175,160, 245, 230, fill="#fff", outline="#313939", width=3)
canvas.create_oval(245,160, 315,230, fill="#fff", outline="#313939", width=3 )
# глаза - зрачки
canvas.create_oval(213,192, 223,202, fill="#000")
canvas.create_oval(264,192, 274,202, fill="#000")
# нос
canvas.create_oval(235,212, 255,232, fill="#e4aaaa", outline="#313939", width=3)
# линия от носа ко рту
canvas.create_line(245,232, 245, 285, width=3)
# улыбка
canvas.create_arc(210,285, 280,245, start=-10, extent=-160, style=ARC, width=3)
# лапы
canvas.create_oval(185,390, 245, 430, fill='#a3bcbf', outline="#313939", width=3 )
canvas.create_oval(245,390, 305, 430, fill='#a3bcbf', outline="#313939", width=3 )
# таблица
canvas.create_rectangle(180,320, 310, 370, fill="#fff7cb", outline="#313939", width=3)
# текст на таблице
canvas.create_text(247,348, text="МУР-МЯУ", font=('Courier', 18))
# веревочки от таблички
canvas.create_line(132,320, 180, 345, width=3)
canvas.create_line(310,345, 358, 320, width=3)