Canvas. Идентификаторы, теги и анимация
Изучив размещение геометрических примитивов на экземпляре Canvas, в этом уроке рассмотрим, как можно обращаться к уже созданным фигурам для изменения их свойств, а также создадим анимацию.
В Tkinter существует два способа «пометить» фигуры, размещенные на холсте, – это идентификаторы и теги. Первые всегда уникальны для каждого объекта. Два объекта не могут иметь одни и тот же идентификатор. Теги не уникальны. Группа объектов на холсте может иметь один и тот же тег. Это дает возможность менять свойства всей группы. Отдельно взятая фигура на Canvas может иметь как идентификатор, так и тег.
Идентификаторы
Методы, создающие фигуры на холсте, возвращают численные идентификаторы этих объектов, которые можно присвоить переменным, через которые позднее обращаться к созданным фигурам.
С помощью метода itemconfig можно изменять другие свойства. Метод coords устанавливает новые координаты фигуры, если они заданы. Если указывается только идентификатор или тег, то coords возвращает текущие координаты.
Здесь при получении холстом фокуса (нажать Tab ) изменится цвет и размер квадрата.
Метод tag_bind позволяет привязать событие (например, щелчок кнопкой мыши) к определенной фигуре на Canvas. Таким образом, можно реализовать обращение к различным областям холста с помощью одного и того же события. Пример ниже иллюстрирует, как изменения на холсте зависят от того, где произведен клик.
Практическая работа. Анимация в tkinter
В данной программе создается анимация круга, который движется от левой границы холста до правой:
Метод after вызывает функцию, переданную вторым аргументом, через количество миллисекунд, указанных первым аргументом.
Курс с примерами решений практических работ: android-приложение, pdf-версия.
Справочник
Функции модуля 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, рисование графики ч.1 / tkinter 18
В предыдущих материалах основное внимание было уделено стандартному виджету Tkinter. Однако вне внимания остался виджет Canvas. Причина в том, что он предоставляет массу графических возможностей и заслуживает отдельного рассмотрения.
Canvas (полотно) — это прямоугольная область, в которой можно выводить не только текст или геометрические фигуры, такие как линии, прямоугольники или овалы, но также другие виджеты Tkinter. Все вложенные объекты называются элементами Canvas, и у каждого есть свой идентификатор, с помощью которого ими можно манипулировать еще до момента отображения.
Рассмотрим методы класса Canvas на реальных примерах, что поможет познакомиться с распространенными паттернами, которые в дальнейшем помогут при создании приложений.
Понимание системы координат
Для рисования графических элементов на полотне, нужно обозначать их положение с помощью системы координат. Поскольку Canvas — это двумерная область, то точки будут обозначаться координатами горизонтальной и вертикальной осей — традиционными x и y соответственно.
На примере простого приложения можно легко изобразить, как именно стоит располагать эти точки по отношению к основанию системы координат, которая находится в верхнем левом углу области полотна.
Следующая программа содержит пустое полотно, а также метку, которая показывает положение курсора на нем. Можно перемещать курсор и видеть, в каком положении он находится. Это явно показывает, как изменяются координаты x и y в зависимости от положения курсора:
Синтаксис создания виджета подобен, другим объектам 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() вызывает функцию, переданную вторым аргументом, через количество миллисекунд, указанных первым аргументом.
Учебник по Tkinter Часть 1 – Создание холста Tkinter
Привет всем! Давайте узнаем, как создать холст Tkinter в этом уроке. Поскольку библиотека Tkinter действительно большая, мы рассмотрим много интересного
Привет всем! Давайте узнаем, как создать холст Tkinter в этом уроке. Поскольку библиотека Tkinter действительно большая, в ближайшее время мы рассмотрим много интересных тем!
Что такое Tkinter?
Tkinter – это интерфейс Python, с помощью которого мы можем создавать GUI s (Графические пользовательские интерфейсы).
Эта библиотека является кроссплатформенной, что означает, что она является идеальным выбором для разработчиков Python, поскольку код вашего приложения теперь может быть независимым от платформы!
Самое лучшее в этом то, что он уже поставляется в предустановленном с Python! Так что нет необходимости устанавливать это отдельно.
Но на всякий случай мы проверим, правильно ли работает Tkinter в нашей системе. Поэтому перейдите в командную строку Windows (или Bash на Linux/Mac) и введите:
Окно примера должно выглядеть следующим образом, указывая, что Tkinter работает:
И если вы хотите использовать эту библиотеку, это всего лишь одна строка!
Теперь мы можем приступить к написанию нашей первой программы на Tkinter. Для этого я создам простую программу, которая отображает изображения на экране.
Давайте начнем с вашего первого шага к созданию приложения: Создание нового холста!
Создание холста Tkinter
Шаг 1: Создайте приложение и дескриптор главного объекта
Этот объект обычно называется объектом root ( master object). Это связано с тем, что ваше графическое приложение использует все вызовы через этот объект. Ваше приложение не может работать без этого объекта.
Чтобы создать главный объект, выполните следующие действия:
Теперь мы создали главный объект. Теперь для запуска приложения, как правило, такие программы разрабатываются в виде цикла событий /.
Теперь нам также нужен дескриптор для нашего приложения, чтобы приложение могло использовать этот объект и передавать его в цикл событий.
Класс тз.Фрейм имеет это для нас. Поэтому мы создадим класс приложения, который наследует этот класс. Итак, теперь мы можем напрямую вызвать основной цикл из нашего объекта приложения.
Теперь super.__init__(master) фактически изменит главный объект, поэтому мы обновим нашу собственную копию до самой последней, так как она понадобится нам для других вызовов.
Чтобы запустить основной цикл, просто вызовите эту функцию!
Теперь, если вы запустите эту программу, вы получите следующий результат.
Часть 2: Создайте наш холст Tkinter
Теперь мы готовы создать наш холст!
Мы можем использовать tk.Canvas() метод создания холста для нас.
Его инициализация выглядит следующим образом:
Эта линия создаст объект холста с синим фоном и заданными шириной и высотой (пиксели).
Теперь мы можем отобразить наш пустой холст в нашем главном цикле!
Теперь давайте запустим эту программу:
Отлично! Похоже, это работает, как и ожидалось. Теперь давайте сделаем еще кое-что на холсте.
Давайте отобразим этот образ Debian Linux в вашем приложении.
Мы можем создать элемент изображения с помощью tk.Фотоизображение класс.
Давайте поместим его под метод addImage() для нашего класса.
Теперь вся программа выглядит следующим образом:
Но когда вы запустите программу, вы снова получите только синий холст. Почему это происходит?
Согласно этому потоку в StackOverflow, объект изображения img собирается Python и не отображается.
Если вы сейчас запустите эту программу, вы получите правильный вывод:
Мы решили эту проблему!
Теперь вы можете продолжать делать различные вещи с Tkinter, такие как рисование фигур и отображение похожих изображений. документация может помочь вам в этом.
Вывод
В этой статье мы узнали о Tkinter Canvas и о том, как мы можем создать Tkinter canvas и отобразить его на нашем экране. Следите за обновлениями для получения дополнительных учебных пособий по этому модулю!
