Как сделать прямоугольник канвас

Добавил пользователь Владимир З.
Обновлено: 05.10.2024

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

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

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

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

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

Первые координаты – верхний левый угол, вторые – правый нижний. В приведенном примере, когда на второй прямоугольник попадает курсор мыши, его рамка становится пунктирной, что определяется свойством activedash .

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

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

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

Более сложные для понимания фигуры получаются при использовании метода create_arc . В зависимости от значения опции style можно получить сектор (по умолчанию), сегмент ( CHORD ) или дугу ( ARC ). Также как в случае create_oval координаты задают прямоугольник, в который вписана окружность (или эллипс), из которой "вырезают" сектор, сегмент или дугу. Опции start присваивается градус начала фигуры, extent определяет угол поворота.

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

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

Практическая работа

Создайте на холсте подобное изображение:

Для создания травы используется цикл.

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

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

create_polygon() – как говорилось выше данный метод позволяет рисовать произвольные многоугольники. В него передаются координат точек. Пары координат можно передавать через запятую (50, 100, 50, 400, 100, 400, 100, 150, 150, 150, 150, 400, 200, 400, 200, 100) или для удобства пары координат можно заключать в скобки ((400, 500), (500, 500), (450, 100)).

Метод кроме координат может принимать дополнительные параметры:

width – ширина линии (установим 7 пикселей);

fill – цвет фигуры (установим blue);

activefill – цвет фигуры при наведении курсора мыши (установим red);

outline – цвет контура фигуры (установим green);

activeoutline – цвет контура фигуры при наведении курсора мыши (установим black)

HTML Canvas предоставляет методы для рисования прямоугольников, fillRect() и strokeRect() , но я не могу найти метод для создания прямоугольников с закругленными углами. Как я могу это сделать?


Еще вариант: использовать .arcTo позволяющий рисовать конкретную дугу

Если учитывать радиус углов может выйти следующая функция


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

Функцию можно переделать и на разные радиусы, просто заменить r для каждой строки, скажем, на r[0] (верхняя строка для верхнего правого угла) и так далее по часовой стрелке.

Update

Для объяснения кода добавляю пример с обычным прямым углом и со скругленным, параметры которого можно менять (rx,ry). Тут становится понятна реализация "нативного" метода roundRect() , где последний параметр radii (радиусы) может иметь несколько форматов. Это может быть список из 1, 2, 3 или 4 чисел, а также DOMPointInit (состоящий из радиуса[x] и радиуса[y]).

Затем по некоторому алгоритму входящие данные преобразуются в т.н. список нормализованных радиусов. [r] преобразуется в [r,r,r,r] , [r1,r2] => [r1,r2,r1,r2] , [r1,r2,r3] => [r1,r2,r2,r3] . И [r1,r2,r3,r4] остается тем же. Отсчет идет от левого верхнего угла и по часовой стрелке. (Хотя в коде выше алгоритм другой).

Соответственно DOMPointInit может быть представлен любой из радиусов. Если бы это был просто массив из двух чисел, то было бы не совсем очевидно как их использовать, ведь по ходу "движения" векторного пути первое значение не всегда по х , поэтому по сути это сложный радиус представлен . И по этой же причине arcTo или arc не могут быть использованы в качестве скругления ведь они имеют один радиус. Кроме того, не обеспечивается касательность дуги к продолжению прямой.

Напротив, квадратичная Безье ( q , Q в краткой форме SVG путей ) при условии, что контрольная точка совпадает с условной точкой угла, всегда обеспечит касательность к оставшимся от этого угла прямым. А разные радиусы rx и ry обеспечиваются соответствующими отступами от условного угла. Это и демонстрирует код ниже.

В HTML5 есть тег canvas, который создаёт поле для рисования. На нём можно рисовать с помощью скриптов JavaScript. Разберём как это работает.

Подготовка поля для рисования

Сначала необходимо на странице прописать тег: Теперь с помощью JavaScript надо обратиться к этому полю. Сначала получим ссылку на него через getElementById а затем создадим объект, в котором будет находиться так называемый "контекст", через методы которого будем рисовать: Теперь обращаясь к методам в объекте ctx можно рисовать различные фигуры в пределах области canvas. Попробуем сделать это.

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

  • Первая команда beginPath говорит о том, что надо приготовиться к рисованию.
  • Вторая команда moveTo(50, 50) говорит о том, куда JavaScript должен поставить свой карандаш, откуда начнётся рисование. В скобках задаётся горизонтальная и вертикальная координата в пикселях (от левого верхнего края canvas). В нашем случае это точка находится на расстоянии 100 пикселей от верхнего и левого края.
  • Третья команда lineTo(150, 50) говорит о том, куда JavaScript должен тянуть свой карандаш. В скобках задаётся горизонтальная и вертикальная координата в пикселях. В нашем случае это точка находится на расстоянии 100 пикселей от верхнего края и 150 от левого. То есть получится горизонтальная линия по центру canvas.
  • Последняя четвёртая команда stroke говорит, что надо закончить рисование.

Заливка рисунка

Попробуем разукрасить полученный квадрат не чёрным цветом, а синим. Для этого надо использовать метод fill. Точно так же как и изменение цвета/толщины линий, этот метод должен быть вызван до вызова метода stroke (который стоит в последней строчке примера). Не обязательно, чтобы фигура была закончена и "закрыта". То есть можно не ставить closePath, а нарисовать три стороны и применить закрашивание fill, тогда всё равно закрасится именно нужная область: Чтобы изменить цвет заливки, используем метод fillStyle, которому передадим нужный цвет в обычном CSS формате (название цвета, HEX или RGB): Получится такой синий квадрат:

канва рамка

Как в Canva вставить фото в рамку

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

Посмотрите видео, чтобы лучше понимать, что и как происходит.

инструменты для редактирования в Канва

Чтобы заменить картинку на другую просто перетащите новую на место старой, замена происходит автоматически.

Готовые шаблонны можно увеличить или уменьшить, потянув за угловые маркеры. Однако, вам не удастся изменить только одну сторону, соотношение сторон не меняется. Пропорции их остаются прежними!

Изменение размера рамки в Канва

Как в Канве сделать рамку для фото

Как же быть, если нужна рамка определенных размеров, например, вытянутый прямоугольник? Что делать, если таковой не найдется в библиотеке Рамок?

У Канвы множество инструментов, которые позволят это сделать самостоятельно. Давайте расширять собственные возможности!

Как сделать рамку в канве самому: прямоугольная рамка любых пропорций

Сетка в Canva

Я использую Сетки. Показываю по шагам.
Открываю вкладку Элементы и затем СЕТКИ. И вставляю в макет сетку самую первую, на одну ячейку.

Меняю соотношение сторон так, как мне необходимо. Для этого есть маркеры на каждой стороне.

маркеры в Канве

Копирую (дублирую) сетку. То есть получаю копию точно такого же размера.

Дублирование сетки в Канве

Сдвигаю дубликат немного в сторону для удобства работы. Меняю изображение на цвет, который задумала для рамочки.

Смена фото на фон

Зажимаю SHIFT на клавиатуре и немного растягиваю полученный прямоугольник, чтобы получился немного больше исходника, но с тем же соотношением сторон.

растягиваю прямоугольник в Канве

Смена расположения в Канва

Очень помогают тонкие розовые линии, которые появляются на картинке тогда, когда центр нижнего слоя точно совпадает с центром верхнего.

Получили фото в тонкой рамке.

Фото в Канве

Как изменить размер картинки с рамкой

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

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

Как сдвинуть картинку с рамкой одновременно

Но ситуация не безвыходная. Обойдемся и без встроенной группировки.

Пошагово это делается так:

  1. Выделите рамку (нижний слой).
  2. Нажмите на клавиатуре SHIFT.
  3. Кликните по картинке.
  4. Отпустите SHIFT.

Вы увидите, что картинка и рамка обе выделены. Об этом говорят тонкие голубые вспомогательные линии. Одна выделена пунктиром, а другая – сплошной.

Выджелены в Канве

Теперь можете двигать сколько угодно до тех пор, пока опять мышкой не кликните где-то в другом месте макета либо вновь не нажмете SHIFT, разъединяя рамку и картинку.

Как в Канве сделать рамку для текста или для видео

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

Вместо картинки в верхнюю сетку также легко вставить видео.

Урок по работе с роликами найдете в статье «Как сделать видео в Канве для соцсетей«. А также вам в помощь и соответствующий ролик, смотрите, применяйте!

Я думаю, что для тех, кто работает в Канве, но изучил еще не все ее возможности, этот урок будет полезен.

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

Читайте также: