фигуры в tkinter

Рисуем фигуры в Tkinter — тренируемся на котиках

Рисуем простые фигуры в Tkinter — тренируемся на котиках!

простые фигуры в Tkinter

Что такое 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 координатная плоскость имеет вид:

оси координат в 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)
цветной прямоугольник с окантовкой
wdtпрямоугольник в tkinterw

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

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

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

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

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

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

текст

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

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

простые фигуры в tkinter

Фигура кота — это многоугольник серого цвета ‘#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))

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

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

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

круги и овалы
 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" )

Рисуем линии

линии в tkinter
линии

Для рисования линии отлично подходит функция 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)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *