Что такое canvas в python

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

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

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

Идентификаторы

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

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

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

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

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

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

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

Курс с примерами решений практических работ: android-приложение, pdf-версия.

Источник

Tkinter. Canvas, рисование графики (Часть 1)

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

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

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

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

Что такое система координат?

Любое полотно в любой компьютерной программе имеет свою систему координат. Стоит только вспомнить Paint. В этой программе каждая точка имеет координаты, которые можно посмотреть внизу окна. То же самое и с Canvas. Это полотно имеет две оси – X и Y, которые имеют то же назначение, что и во всех остальных случаях. Первая ось – это горизонталь, а вторая – вертикаль.

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

Внимание! Основание находится не в левом нижнем углу, как в математике, а в левом верхнем углу.

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

Принцип работы системы координат

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

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

Сама программа выглядит так.

Видим, что эта программа показывает точку из двух осей:

Обратите внимание! Эти координаты в точности соответствуют атрибутам x и y экземпляра event, передаваемого обработчику.

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

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

Как осуществляется рисование линий и стрелок?

Линии и стрелки – это одно из базовых действий, которые можно выполнить на полотне. Это основа любого рисунка. Рисование осуществляется от точки А к точке Б.

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

Отображение каждой из них будет осуществляться после того, как пользователь укажет точку начала линии и точку конца.

Кроме этого, можно детализировать цвет, толщину, и так далее.

Простыми словами, создадим программу, которая является неким мини-аналогом Paint. Выглядеть она будет так.

С помощью класса App мы создаем пустое полотно вместе с обработчиком событий кликов.

Проще говоря, мы не зацикливаемся на реализации класса LimeForm в этом коде.

А уже сам код можно найти в отдельном файле. Такой подход помогает значительно уменьшить количество строк кода, что увеличит его читаемость. Настоятельно рекомендуется делать это.

Рисование линий в Tkinter

Так, как необходимо выполнять обработку кликов мыши на полотне, то можно связать метод draw() с событием этого типа. Также мы осуществим определение поля line_start с целью отслеживания первоначального положения каждой линии.

Если у line_start задано значение, то мы можем его получить и передать координаты этого события для того, чтобы начертить линию.

Вывод текста в canvas

При этом сохраняется возможность применять те же параметры форматирования. То есть, задавать цвет, размер, семейство шрифтов текста.

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

Текстовый элемент по умолчанию реализуется с использованием canvas.create_text() и дополнительными настройками, с помощью которых можно добавить синий цвет.

А если необходимо задать параметры динамического поведения текстового элемента, необходимо воспользоваться StringVar. Это позволяет изменять его содержимое.

Размещение текста в левом верхнем углу

Перенос строк

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

# Упражнения

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

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

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

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

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

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

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

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

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

# Упражнения

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

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

Источник

Справочник

Функции модуля canvas

canvas.circle(x, y, radius)

Рисует круг в точке x, y с радиусом radius;

canvas.clear()

Очищает холст целиком;

canvas.clear_rect(x, y, width, height)

Очищает прямоугольную область с левым верхним углом в точке x, y, шириной width и высотой height;

canvas.draw()

Функция перерисовки холста. Важно: вызывается только после того, как вызваны все нужные функции рисования;

canvas.fill_circle(x, y, radius)

Рисует закрашенный круг в точке x, y с радиусом radius;

canvas.fill_rect(x, y, width, height)

Рисует закрашенный прямоугольник с левым верхним углом в точке x, y, шириной width и высотой height;

canvas.fill_style(‘color’)

Функция для изменения цвета закраски. color — устанавливаемый цвет. Цвета можно выбрать из списка на этой странице Википедии;

canvas.fill_text(text, x, y, font=’Monospace’, size=24, align=’left’)

Рисует закрашенный текст text в точке x, y шрифтом font (Monospace по умолчнию), размером size (по умолчанию 24) пикселей и выравниванием align (по умолчанию — «left»). Возможные варианты выравнивания — «left», «right» и «center»

canvas.line_to(x, y)

Рисует линию из точки, в которой находится указатель в точку, с координатами x, y;

canvas.line_width(width)

Устанавливает ширину линии width в пикселях;

canvas.listen()

Запускает цикл ожидания событий от холста. Если такого ожидания не будет, обработчики событий не сработают.

canvas.move_to(x, y)

Устанавливает указатель в точку, с координатами x, y;

canvas.radius_line(x, y, angle, length)

Рисует радиальную линию из точки x, y под углом angle (в градусах) и длиной length.

canvas.reset()

Очищает холст целиком, сбрасывает цвет на черный и устанавливает ширину линий в 1;

canvas.set_color(‘color’)

Функция для изменения цвета кисти. color — устанавливаемый цвет. Цвета можно выбрать из списка на этой странице Википедии;

canvas.set_onclick(callback)

Устанавливает обработчик клика мышкой по холсту. Функция-обработчик callback должна принимать два параметра — x и y. Например

canvas.stroke_rect(x, y, width, height)

Рисует прямоугольник с левым верхним углом в точке x, y, шириной width и высотой height;

canvas.stroke_style(‘color’)

Делает то же, что и canvas.set_color

canvas.stroke_text(text, x, y, font=’Monospace’, size=24, align=’left’)

Рисует контур текста text в точке x, y шрифтом font (Monospace по умолчнию), размером size (по умолчанию 24) пикселей и выравниванием align (по умолчанию — «left»). Возможные варианты выравнивания — «left», «right» и «center»

canvas.onclick(callback)

Тоже самое, что canvas.set_onclick.

canvas.onkey(callback, Что такое canvas в python)

Устанавливает обработчик нажатия клавиши на клавиатуре. Если параметр key_code не передан, функция-обработчик должна принимать один аргумент. В него будет передан код нажатой клавиши.

Если параметр key_code передан, то функция обработчик не должна принимать ни одного аргумента.

canvas.onkeyup(callback, Что такое canvas в python)

Устанавливает обработчик отпускания клавиши на клавиатуре. Если параметр key_code не передан, функция-обработчик должна принимать один аргумент. В него будет передан код отпушенной клавиши.

Если параметр key_code передан, то функция обработчик не должна принимать ни одного аргумента.

Коды клавиш такие же, как и в canvas.onkey

canvas.onrightclick(callback)

То же самое, что canvas.set_onclick, но для правой кнопки мыши

Коды клавиш

Код клавиши — это строка, чувствительная к регистру.

Источник

Canvas

A canvas widget manages a 2D collection of graphical objects — lines, circles, text, images, other widgets, and more. Tk’s canvas is an incredibly powerful and flexible widget and truly one of Tk’s highlights. It is suitable for a wide range of uses, including drawing or diagramming, CAD tools, displaying or monitoring simulations or actual equipment, and building more complex widgets out of simpler ones.

Note: Canvas widgets are part of the classic Tk widgets, not the themed Tk widgets.

Canvas widgets.

Canvas widgets are created using the Canvas class:

Canvas widgets are created using the tk::canvas command:

Canvas widgets are created using the TkCanvas class:

Canvas widgets are created using the new_tk__canvas method, a.k.a. Tkx::tk__canvas :

You’ll often provide a width and height, either in pixels or any of the other standard distance units. As always, you can ask the geometry manager to expand it to fill the available space in the window. You might provide a default background color for the canvas, specifying colors as you learned about in the last chapter. Canvas widgets also support other appearance options like relief and borderwidth that we’ve used before.

Canvas widgets have a tremendous number of features, and we won’t cover everything here. Instead, we’ll start with a simple example, a freehand sketching tool, and incrementally add new pieces, each showing another feature of canvas widgets.

Creating Items

When you create a new canvas widget, it is essentially a large rectangle with nothing on it, truly a blank canvas, in other words. To do anything useful with it, you’ll need to add items to it. There are a wide variety of different types of items you can add. Here, we’ll add a simple line item to the canvas.

To create a line, you need to specify its starting and ending coordinates. Coordinates are expressed as the number of pixels away from the top-left corner, horizontally and vertically, i.e. (x,y). The pixel at the top-left corner, known as the origin, has coordinates (0,0). The «x» value increases as you move to the right, and the «y» value increases as you move down. A line is described by two points, which we’d refer to as (x0,y0) and (x1,y1). This code creates a line from (10,5) to (200,50):

The create_line method returns an item id (an integer) that uniquely refers to this item. We’ll see how it can be used shortly. Often, we don’t need to refer to the item later and can ignore the returned id.

The create line command returns an item id (an integer) that uniquely refers to this item. We’ll see how it can be used shortly. Often, we don’t need to refer to the item later and can ignore the returned id.

This command returns an item object representing the line. We’ll see how it can be used shortly. Often, we don’t need to refer to the item later, and can ignore the returned item object.

Internally, Tk refers to individual canvas items by a unique id, an integer starting at 1 and counting up for each object created. Ruby encapsulates this well inside item objects. In some cases, as well as to understand much of the reference documentation, you’ll need this numeric id. You can retrieve it via the id method of a canvas item object.

The create_line method returns an item id (an integer) that uniquely refers to this item. We’ll see how it can be used shortly. Often, we don’t need to refer to the item later and can ignore the returned id.

A Simple Sketchpad

Let’s start our simple sketchpad example. For now, we’ll implement freehand drawing on the canvas with the mouse. We create a canvas widget and attach event bindings to it to capture mouse clicks and drags. When the mouse is first pressed, we’ll remember that location as the «start» of our next line. As the mouse is moved with the mouse button held down, we create a line item from this «start» position to the current mouse location. This current location becomes the «start» position for the next line item. Every mouse drag creates a new line item.

Item Attributes

When creating items, you can also specify one or more item attributes, affecting how it appears. For example, we can specify that the line should be red and three pixels wide.

The exact set of attributes will vary according to the type of item. Some commonly used ones are:

If you have canvas items that change state, creating the item with both the regular and disabled* attribute variants can simplify your code. You simply need to change the item’s state rather than writing code to change multiple display attributes. The same applies to the active* attribute variants. Both encourage a more declarative style that can remove a lot of boilerplate code.

Just like with Tk widgets, you can change the attributes of canvas items after they’re created.

Item Types

Canvas widgets support a wide variety of item types.

Our sketchpad created simple line items, each a single segment with a start point and an end point. Lines items can also consist of multiple segments.

Lines have several interesting additional attributes, allowing for drawing curves, arrows, and more.

Rectangle

Rectangles are specified by the coordinates of opposing corners, e.g., top-left and bottom-right. They can be filled in (via fill ) with one color, and the outline given a different color.

Ovals items work exactly the same as rectangles.

Polygon

Image

Image items can display arbitrary images. By default, the item is centered at the coordinates you specify, but this can be changed with the anchor option, e.g., nw means the coordinates are where to put the top-left of the image.

Text items can display a block of text. Positioning the text works the same as with image items. Specify the text to display using the text attribute. All of the text in the item will have the same color (specified by the fill attribute) and the same font (specified by a font attribute).

Widget

One of the coolest things you can do with the canvas widget is embed other widgets inside it. This can be a lowly button, an entry (think in-place editing of text items), a listbox, a frame itself containing a complex set of widgets. anything! Remember when we said way back when that a canvas widget could act as a geometry manager? This is what we meant.

Canvas items that display other widgets are known as window items (Tk’s longstanding terminology for widgets). They are positioned like text and image items. You can give them explicit width and height attributes; they default to the widget’s preferred size. Finally, it’s important that the widget you’re placing on the canvas (via the window ) attribute be a child widget of the canvas.

Modifying Items

We’ve seen how you can modify the configuration options on an item — its color, width, etc. There are several other things you can do with items.

To delete items, use the delete method.

To change an item’s size and position, you can use the coords method. You supply new coordinates for the item, specified the same way as when you first created it. Calling this method without a new set of coordinates will return the current coordinates of the item. You can use the move method to offset one or more items horizontally or vertically from their current position.

All items are ordered from top to bottom in what’s called the stacking order. If an item later in the stacking order overlaps an item below it, the first item will be drawn on top of the second. The raise ( lift in Tkinter) and lower methods allow you to adjust an item’s position in the stacking order.

There are several more operations detailed in the reference manual to modify items and retrieve information about them.

Event Bindings

We’ve already seen that the canvas widget as a whole, like any other Tk widget, can capture events using the bind command.

You can also attach bindings to individual items in the canvas (or groups of them, as we’ll see in the next section using tags). So if you want to know whether or not a particular item has been clicked on, you don’t need to watch for mouse click events for the canvas as a whole and then figure out if that click happened on your item. Tk will take care of all this for you.

To capture these events, you use a bind command built into the canvas. It works exactly like the regular bind command, taking an event pattern and a callback. The only difference is you specify the canvas item this binding applies to.

Note the difference between the item-specific tag_bind method and the widget-level bind method.

Note the difference between the item-specific bind method and the widget-level g_bind method.

Let’s add some code to our sketchpad example to allow changing the drawing color. We’ll first create a few different rectangle items, each filled with a different color. We’ll then attach a binding to each of these. When they’re clicked on, they’ll set a global variable to the new drawing color. Our mouse motion binding will look at that variable when creating the line segments.

We’ve seen that every canvas item can be referred to by a unique id number. There is another handy and powerful way to refer to items on a canvas, using tags.

A tag is just an identifier of your creation, something meaningful to your program. You can attach tags to canvas items; each item can have any number of tags. Unlike item id numbers, which are unique for each item, many items can share the same tag.

What can you do with tags? We saw that you can use the item id to modify a canvas item (and we’ll see soon there are other things you can do to items, like move them around, delete them, etc.). Any time you can use an item id, you can use a tag. For example, you can change the color of all items having a specific tag.

Tags are a good way to identify collections of items in your canvas (items in a drawn line, items in a palette, etc.). You can use tags to correlate canvas items to particular objects in your application (for example, tag all canvas items that are part of the robot with id #X37 with the tag «robotX37»). With tags, you don’t have to keep track of the ids of canvas items to refer to groups of items later; tags let Tk do that for you.

You can assign tags when creating an item using the tags item configuration option. You can add tags later with the addtag method or remove them with the dtags method. You can get the list of tags for an item with the gettags method or return a list of item id numbers having the given tag with the find command.

As you can see, methods like withtag accept either an individual item or a tag; in the latter case, they will apply to all items having that tag (which could be none). The addtag and find methods have many other options, allowing you to specify items near a point, overlapping a particular area, etc.

Let’s use tags first to put a border around whichever item in our color palette is currently selected.

The canvas itemconfigure method provides another way to change the properties of a canvas item. The advantage over dealing with the canvas item object directly is that we can specify a tag, so that the change we’re making applies to all items having that tag. Without this, we could use gettags to get all the items, iterate through them, and set the option, but itemconfigure is more convenient.

Let’s also use tags to make the current stroke being drawn appear more prominent. When the mouse button is released, we’ll return the line to normal.

Scrolling

In many applications, you’ll want the canvas to be larger than what appears on the screen. You can attach horizontal and vertical scrollbars to the canvas in the usual way via the xview and yview methods.

You should be able to modify the sketchpad program to add scrolling, given what you already know. Give it a try.

Once you’ve done that, scroll the canvas down just a little bit, and then try drawing. You’ll see that the line you’re drawing appears above where the mouse is pointing! Surprised?

What’s going on is that the global bind command doesn’t know that the canvas is scrolled (it doesn’t know the details of any particular widget). So if you’ve scrolled the canvas down by 50 pixels, and you click on the top left corner, bind will report that you’ve clicked at (0,0). But we know that because of the scrolling, that position should really be (0,50).

The canvasx and canvasy methods translate the position onscreen (which bind reports) into the actual point on the canvas (taking into account scrolling).

Be careful if you’re adding canvasx and canvasy methods directly to the event binding scripts. You need to watch the quoting and substitutions to ensure the conversions are done when the event fires. As always, it’s better to place that code in a procedure separate from the event binding itself.

Here then, is our complete example. We probably don’t want the palette to be scrolled away when the canvas is scrolled, but we’ll leave that for another day.

Spotted a mistake? Couldn’t find what you were looking for? Suggestions? Let me know!
If you’ve found this tutorial useful, please check out Modern Tkinter.

Источник