Модуль tkinter. Урок №4 — Создание графических примитивов (рисование)
На этом уроке мы научимся использовать виджет Canvas для вывода примитивов 2d-графики.
Как и в большинстве систем программирования, ось Y направлена сверху вниз, начало отсчета (0,0) — левый верхний угол.
В качестве примера построим рисунок, приведенный в начале (домик с антенной, крыльцом и солнышком).
1. Напишем пустой шаблон программы на tkinter:
2. Создадим холст рисования:
root — родительское окно,
width, height — ширина и высота холста,
bg — цвет фона,
cursor — тип курсора.
3. Нарисуем зеленый прямоугольник:
20,150 — координаты Х и Y левого верхнего угла прямоугольника,
300,450 — координаты Х и Y правого нижнего угла прямоугольника,
fiil — цвет заливки,
outline — цвет линий (контура).
4. Нарисуем крышу:
Крышу создадим как многоугольник, для этого требуется задать пары координат для каждой его точки:
5. Аналогично построим крыльцо:
6. Нарисуем солнце как эллипс:
При создании задаются координаты гипотетического прямоугольника, описывающего данный эллипс:
7. Антенну для приема развлекательных передач нарисуем с помощью трех линий:
8. На левую сторону крыши добавим приемную антенну спутникового телевидения:
Нам понадобится дуга:
В зависимости от значения опции style можно получить сектор (по умолчанию), сегмент (CHORD) или дугу (ARC). Координаты по прежнему задают прямоугольник, в который вписана окружность, из которой «вырезают» сектор, сегмент или дугу. От опций start и extent зависит угол фигуры.
9. Добавим надпись внизу рисунка:
Трудность здесь может возникнуть с пониманием опции anchor (якорь). По умолчанию в заданной координате располагается центр текстовой надписи. Чтобы изменить это и, например, разместить по указанной координате левую границу текста, используется якорь со значением w (от англ. west – запад).
Другие значения: n, ne, e, se, s, sw, w, nw. Если букв, задающих сторону привязки две, то вторая определяет вертикальную привязку (вверх или вниз «уйдет» текст от координаты). Свойство justify определяет лишь выравнивание текста относительно себя самого.
10. Разместим холст с рисунком с помощью любого менеджера геометрии:
В нашем случае логично разместить холст с помощью самого простого менеджера pack:
Практическое задание
Создайте следующие изображения:
Изображения заданий взяты с презентации К.Ю. Полякова и сайта http://younglinux.info/
Подсказка: Для повторяющихся фигур (2 и 3 рисунки) удобно использовать циклы, где меняются координаты.
Drawing in Tkinter
In this part of the Tkinter tutorial we will do some drawing. Drawing in Tkinter is done on the Canvas widget. Canvas is a high-level facility for doing graphics in Tkinter.
It can be used to create charts, custom widgets, or create games.
Tkinter canvas
A canvas widget manages a 2D collection of graphical objects — lines, circles, images, or other widgets. It is suitable for drawing or building more complex widgets.
Tkinter draw lines
A line is a simple geometric primitive. The create_line method creates a line item on the Canvas .
In the code example, we draw simple lines.
The parameters of the create_line method are the x and y coordinates of the start and end points of the line.
A vertical line is drawn. The dash option specifies the dash pattern of the line. We have a line consisting of alternating segments of 4 px dash and 2 px space.
The create_line method can take multiple points. This line draws a triangle.
Figure: Lines
Tkinter colours
A colour is an object representing a combination of Red, Green, and Blue (RGB) intensity values.
In the code example, we draw three rectangles and fill them with different colour values.
We create the Canvas widget.
The create_rectangle creates a rectangle item on the canvas. The first four parameters are the x and y coordinates of the two bounding points: the top-left and bottom-right points. With the outline parameter we control the colour of the outline of the rectangle. Likewise, the fill parameter provides a colour for the inside of the rectangle.
Figure: Colours
Tkinter geometric shapes
We can draw various shapes on the Canvas . The following code example will show some of them.
We draw five different shapes on the window: a circle, an ellipse, a rectangle, an arc, and a polygon. Outlines are drawn in red and insides in green. The width of the outline is 2px.
Here the create_oval() method is used to create a circle item. The first four parameters are the bounding box coordinates of the circle. In other words, they are x and y coordinates of the top-left and bottom-right points of the box, in which the circle is drawn.
We create a rectangle item. The coordinates are again the bounding box of the rectangle to be drawn.
This code line creates an arc. An arc is a part of the circumference of the circle. We provide the bounding box. The start parameter is the start angle of the arc. The extent is the angle size.
A polygon is created. It is a shape with multiple corners. To create a polygon in Tkinter, we provide the list of polygon coordinates to the create_polygon method.
Figure: Shapes
Tkinter draw image
In the following example we draw an image item on the canvas.
The example displays an image on the canvas.
From the PIL (Python Imaging Library) module, we import the Image and ImageTk modules.
Tkinter does not support JPG images internally. As a workaround, we use the Image and ImageTk modules.
We create the Canvas widget. It takes the size of the image into account. It is 20px wider and 20px higher than the actual image size.
We use the create_image method to create an image item on the canvas. To show the whole image, it is anchored to the north and to the west. The image parameter provides the photo image to display.
Tkinter draw text
In the last example, we are going to draw text on the window.
We draw lyrics of a song on the window.
The first two parameters are the x and y coordinates of the center point of the text. If we anchor the text item to the west, the text starts from this position. The font parameter provides the font of the text and the text parameter is the text to be displayed.
Figure: Drawing text
Tkinter вместо Черепашки
Пришла пора сменить графическую систему отображения. Tkinter – это один из способов создать «окошки и кнопки» на Python. Кроме Tkinter существуют и другие, самые известные: Qt, wxForms. Tkinter удобен тем, что он входит в стандартную поставку Python, а значит доступен всегда (почти всегда).
Недостаток – маловато возможностей для построения сложных систем. Но нам это совсем не помешает.
Создадим простую программу:
Первая строка подключает модуль tkinter. Вторая строка – создает окно (главное и единственное). Третья – запускает цикл обработки событий (см. справочник: зачем нужен главный событийный цикл).
Немного изменим программу. Прежде, чем ее запустить, подумайте, что должно измениться?
Следующее изменение таково, что сложно предугадать, на что оно повлияет, но запустив программу, вы увидите это …
Если не получилось понять, то измените программу так:
Для рисования создадим Canvas (холст):
В Tkinter нет Черепашки, которая движется и оставляет след. Рисовать можно линии, квадраты, овалы, текст, многоугольники.
В отличие от Черепашки координаты в Tkinter обычные «компьютерные» — точка (0,0) в левом верхнем углу, а Y увеличивается сверху вниз.
Чтобы не было проблем и вопросов по тому, как работать с координатами, выполним еще несколько заданий.
Для этого скопируйте код, который представлен ниже (писать свою часть программы нужно будет между линиями:
В процессе обучения нам придется рисовать довольно много окружностей.
В Tkinter окружность рисуется по двум точкам (так же, как в paint):
Однако, так рисовать не слишком удобно, проще рисовать, задавая центр и радиус:
Как вы можете видеть, окружность задана иначе, но расположена абсолютно так же, как в предыдущем варианте.
10. Нарисуйте окружность с радиусом 50 и центром в точке (60,60) двумя способами: через центр, радиус и через две точки.
11. Нарисуйте окружность по двум точкам: (10,20),(110,120) двумя способами.
12. Нарисуйте квадрат со стороной 20 и центром в точке (100,100).
13. Нарисуйте прицел (окружность с двумя линиями). 
14. Нарисуйте прицел. 
15. Нарисуйте прицел 
16. Нарисуйте квадрат 40х40 в центром в точке (100,100) с текстом внутри: 
17. Нарисуйте квадрат 40х40 с левым углом в точке (100,100) и текстом внутри (по центру).
18. Нарисуйте фигуру, соблюдая размеры и положение:
19. Нарисуйте фигуру, соблюдая размеры и положение: 
20. Нарисуйте фигуру, соблюдая размеры и положение: 
21. Нарисуйте фигуру, соблюдая размеры и положение: 