Как сделать рисовалку в python
Обновлено: 04.07.2024
Недавно снова натолкнулся на рекламу о программировании на PYTHON и решил немного погрузиться в процесс самого модного и гибкого для новичков софта. Программисты в данной программе нужны и востребованы, на Х/Х желающих оторвать с руками специалистов по программированию в "питончике"- масса. Я конечно далек от того, чтобы называть свои навыки программированием, но одно могу сказать точно, "история" эта интересная.
Давайте попробуем нарисовать векторный луч, абсолютно с нуля. С самого начала: установка софта, установка редактора, ввод кодов для нашей программы/алгоритма. Затем выполним просмотр введенной программы.
1. Установка софта.
Работать будем конечно в " PYTHON ", программа распространяется бесплатно, поэтому качать с торрентов всякий пропатченный и залеченный софт небезопасно, возьмем оригинальный вариант
Берем только стабильную версию третьей серии (3) никакими "rc", не сбиваем себя с толку это тестовые варианты, возможно нестабильные в работе, такого нам не надо. Я писал статью на момент существования версии 3.6, однако сейчас на сайте разработчика красуется версия 3.9 (по сути аналогичная история)
Друзья так как мы работаем под Windows и и использованием кириллицы в основе своего ПО, то при установке требуется соблюдения следующих действий, не сложный, но обязательных.
Внутренний функционал питона довольно мощный, и его вполне достаточно для реализации многих проектов. Однако питон не был бы таким популярным среди программистов, если бы не мог расширять свой функционал за счет дополнительных модулей (ещё их называют библиотеками или пакетами) с помощью всего лишь одной строчки кода.
Каждый существующий модуль написан для решения задач в конкретной области. И первым модулем, который не включён в стандартную библиотеку питона, с которым мы познакомимся, будет модуль drawzero .
drawzero — это простая и удобная графическая библиотека, в которой есть функции для рисования простых фигур. Чтобы получить к ним доступ, надо в начале программы написать строку
Установка drawzero
Перед первым использованием модуль drawzero нужно установить. Для этого в терминале нужно выполнить команду
Под linux и MacOS вместо pip нужно вводить pip3 .
import os, sys python = sys.executable user = '--user' if 'venv' not in python else '' cmd = '"<>" -m pip install drawzero --upgrade <>'.format(python, user) print(cmd) os.system(cmd)
Если в результате её запуска вывод будет примерно такой как ниже, то у вас успех!
C:\some\path\Python38\python.exe -m pip install drawzero --upgrade --user Collecting drawzero . что-то про downloading или Using cached Collecting pygame . что-то про downloading или Using cached Installing collected packages: pygame, drawzero Successfully installed drawzero-0.1.4 pygame-1.9.6
A. Основы основ
Итак, приступим к рисованию!
Скопируйте и запустите программу ниже. В результате запуска должно открыться окно с нарисованной по диагонали красной линией. Сдавать код этой задачи не нужно :)
Осваиваем геометрию с помощью кода
Система координат в программировании и система координат в математике немного отличаются. В программировании точка с координатами (0, 0) находится в верхнем левом углу. Ось x направлена от неё вправо, а ось y — вниз.
Любая точка имеет позицию (координату) относительно оси x и относительно оси y , поэтому координаты каждой точки это пара чисел — сначала x , потом y . Эти координаты указываются через запятую и записываются в круглых скобках.
Рисование отрезка выполняется, как мы уже знаем, с помощью команды line . В скобках указываются параметры: цвет и две точки — концы отрезка. Именно в таком порядке.
Цвет пока можно выбирать из следующих вариантов: "black" , "white" , "red" , "green" , "blue" , "yellow" , "brown" . Скоро мы научимся выбирать любые цвета.
Закомментировать сразу несколько строк кода можно, предварительно выделив эти строки, нажать Ctrl-/ (нажав и удерживая клавишу Ctrl, нажать клавишу / ). Повторное нажатие той же комбинации клавиш убирает комментарии в блоке кода, если он был перед этим закомментирован.
Рисование окружности выполняется с помощью команды circle . В скобках указываются параметры: цвет, координаты центра окружности и радиус:
Рисование прямоугольника выполняется с помощью команды rect . В скобках указываются параметры: цвет, координаты левой верхней вершины, ширина (вдоль оси x ), высота (вдоль оси y ). То есть, при помощи такой функции можно рисовать только прямоугольники, параллельные осям координат.
B. Три линии
Нарисуйте три линии так, чтобы получился треугольник (любой).
C. Три окружности
Теперь нарисуйте три окружности. Все три центра должны быть разными точками, а окружности вложены друг в друга и не пересекаться. То есть вторая окружность должна быть строго внутри первой, а третья — внутри второй.
Примерно вот так:
D. Два прямоугольника
Нарисуйте прямоугольник внутри другого прямоугольника так, чтобы между ними получилась ровная "рамка".
Создание более сложных фигур
Рисуя треугольник линиями, можно заметить, что каждую точку мы выписывали дважды, потому что она была концом двух отрезков. Может быть можно сделать то же самое экономнее?
Нам поможет функция рисования многоугольника polygon . Первый параметр это уже знакомый нам цвет, после которого надо перечислить координаты вершин многоугольника.
Если в многоугольнике больше трёх вершин, нужно учесть, что перечислять вершины в произвольном порядке нельзя. Представьте, что вы обходите эту фигуру по часовой стрелке или против часовой стрелки. В функции polygon надо перечислять вершины одним из этих способов, начиная с любой вершины. Если порядок вершин неверный, то может получиться, например, что-то такое:
Пока мы рисовали только контуры. Теперь научимся рисовать закрашенные фигуры. Это может быть круг, прямоугольник и многоугольник. Для получения закрашенной фигуры есть команды: filled_circle , filled_rect , filled_polygon с такими же параметрами, как и у неокрашенных фигур.
E. Три треугольника
Нарисуйте три треугольника так, чтобы два из них не пересекались и находились внутри третьего.
Примерно вот так:
F. Фоторамка
Теперь нарисуйте прямоугольную рамку зелёного цвета ( 'green' ). Размер "внешней" части 700x400 . Ширина рамки 100 . Внутренность рамки должна быть чёрной ( 'black' ). Постарайтесь обойтись всего двумя командами из библиотеки drawzero .
Использование переменных
Мы познакомились с основными возможностями библиотеки drawzero . Теперь пора вспомнить про переменные — они нам скоро пригодятся.
Попробуем нарисовать какую-нибудь простенькую фигуру, например прямоугольник с закруглёнными концами.
Координаты центра окружности это середины левой и правой (вертикальных) сторон прямоугольника и их можно посчитать. Это и правда несложно. Но что, если эту картинку надо перерисовать в другом месте или, скажем, сделать исходный прямоугольник чуть выше или шире? Это по-прежнему будет несложно сделать, но придётся пересчитывать координаты центров окружностей. А если картинка такая?
Всего-то — сделали полоски чуть шире. Пришлось пересчитать почти все координаты. Теперь представим себе, что это всё надо будет пересчитать несколько раз.
Напишем ту же программу по шагам, но для вычисления координат станем использовать переменные. Что нам нужно знать об этой фигуре, для того, чтобы её нарисовать? Нам надо знать где она находится и её главные размеры.
Место можно задать по-разному. Мы запомним координаты левого верхнего угла. Размеры фигуры определяются размерами прямоугольника. А радиус круга это половина его высоты, поэтому размеров прямоугольника достаточно. Не поленимся ввести для радиуса отдельную переменную, код так будет лучше читаться.
Итак, всё готово для рисования. Теперь пишем те же самые вызовы функций рисования прямоугольников и кругов, но для вычисления всех координат используем только переменные. Надо только придумать — как вычислить координаты вертикального прямоугольника, используя имеющиеся переменные?
Очень полезно нарисовать картинку на бумаге и разобраться, откуда берутся формулы в программе, представленной ниже.
В нашей программе стало в 2 раза больше строк, зато перерисовать эту фигуру в другом месте или поменять её размер стало проще простого. Надо только изменить нужные переменные. И всё! Все координаты и размеры пересчитаются автоматически.
G. Два пластыря
Используйте для перемещения переменные, объявленные в коде. Пропорции должны быть сохранены (меньшая сторона в 5 раз меньше большей).
H. Скруглим углы
Давайте теперь сделаем не такие острые углы. Нарисуйте такую картинку:
Только "скруглить" угол можно по-разному. В идеальной фоторамке ширина должна быть одинаковой и в углах тоже. Но как понять, что такое "ширина рамки в углу"?
Давайте так: ширина это расстояние от точки на внешней границы к ближайшей к ней точке на внутренней. Изучите картинку со схемой и вы поймёте, что надо нарисовать (и в какой последовательности).
А ещё хорошо бы сделать всё на белом фоне! Для того, чтобы залить весь экран одним цветом, используйте команду `fill`. Например, заливка красным выглядит так:
I. Мишень
Хм, простая картинка — колечки одинаковой ширины. Ясно, что рисовать чёрные 'black' и белые 'white' круги, но в какой последовательности? Справитесь?
Тут, кстати, и циклы могут пригодиться :)
J. Забор
Хорошо, мишень нарисовали, а куда её повесить? Может на забор?
Работа с цветами
Пора научиться создавать свои цвета. Каждый цвет состоит из трёх компонентов: красного, зелёного и синего. Наверняка вам встречалась аббревиатура RGB (сокращение от Red, Green и Blue).
Представьте, что в абсолютно тёмной комнате вы светите на стену тремя фонариками: красным, зелёным и синим. У каждого есть регулировка интенсивности — число от 0 (фонарик выключен) до 255 (фонарик светит максимально ярко). Все фонарики светят в одну и ту же точку стены и в зависимости от настроек интенсивности всех трёх фонариков на стене получается пятно определённого цвета. Вот несколько примеров:
- R = 0, G = 0, B = 0 — все фонарики выключены, на стене чёрное пятно (которое и так не видно, потому что в комнате темно);
- R = 255, G = 255, B = 255 — все фонарики включены на максимальную мощность, на стене яркое белое пятно;
- R = 100, G = 100, B = 100 — все фонарики включены, имеют одинаковую (но небольшую) интенсивность, на стене тёмно-серое пятно;
- R = 255, G = 0, B = 0 — красный фонарик включен полностью, остальные выключены, на стене яркое красное пятно;
- R = 255, G = 0, B = 255 — красный и синий фонарики включены полностью, зелёный выключен, на стене яркое фиолетовое пятно;
В библиотеке drawzero можно определить свой цвет при помощи тройки чисел, взятой в скобки. Эту тройку можно запомнить в переменной и использовать при вызове всех функций рисования из модуля drawzero .
Цвета, приведённые в примере выше можно было сохранить так:
Нарисуем картинку из предыдущего параграфа, определив свои цвета:
K. В правильном порядке
Нарисуйте закрашенные треугольник, прямоугольник и круг, так, чтобы они "накладывались" в таком порядке, как изображено на рисунке.
L. Даже так можно?
Нарисуйте такую фигуру:
Надо обойтись 5 вызовами функций из модуля drawzero .
Немного знаков дорожного движения
Мы познакомились с основными геометрическими понятиями и тем, как их использовать в программе на Python при помощи библиотеки drawzero . Также убедились на нескольких примерах, как можно быть полезно при рисовании использовать переменные для промежуточных вычислений. Пусть даже иногда программа и становится от этого немного длиннее.
M. Движение запрещено
N. Въезд запрещён
O. Одностороннее движение
Синий цвет задаётся такой тройкой чисел: R = 48, G = 151, B = 222 .
P. Тупик
Знак имеет что-то общее с предыдущим и, немного поменяв параметры, можно почти половину взять оттуда. Используйте следующие цвета:
- белый: "white"
- красный: R = 185, G = 43, B = 31
- голубой: R = 48, G = 151, B = 222
Q. Первая медицинская помощь
Используйте следующие цвета:
- белый: "white"
- красный: R = 254, G = 0, B = 0
- голубой: R = 12, G = 105, B = 226
R. Главная дорога
То, как выглядит этот знак, найдите в поисковике. Скруглять углы и рисовать чёрные окантовки не нужно. Только белое и жёлтое.
S. Светофор
При рисовании красной треугольной рамки могут возникнуть сложности, если захочется сделать всё точно. Можно сделать и "на глаз".
В питоне есть библиотека PIL(Python Image Library) и его близнец Pillow(расширенная версия PIL).
Эта библиотека позволяют по разному работать с изображениями, в том числе и самому рисовать их. Если захотите вы можете с помощью этой библиотеки написать свой Photoshop.
В этой статье я кратко расскажу как создавать свои изображения и рисовать графики на них.
Не во всех установках питона есть в комплекте библиотека Pillow. Поэтому, вам придется его самому установить. Как установить вы можете прочитать в интернете.
Создание нового изображения и сохранение в файл
Для начала мы попробуем создать пустое изображение размером 400x300 пикселей и сохраним его в файл с названием empty.jpg чтобы можно было его открыть и посмотреть.
Создайте новый .py файл и импортируйте следующие файлы:
Image - это файл в котором есть все что нужно для открытия, создания и сохранения изображений. А ImageDraw - для рисования в изображениях.
Теперь создадим новое изображение с типом "RGB" и размером (400, 300) и сохраним в файл empty.jpg:
Как вы поняли у функции Image.new два параметра: первый - тип изображения и второй размеры. Размеры задаются в виде кортежа из двух значений.
Если вы запустите эту программу, вы получите в той же папке новый файл empty.jpg c черным фоном без ничего.
Рисуем линии и квадратики
Давайте попробуем нарисовать линию от точки (0,0) - верхняя левая и до точки (400,300) - нижняя правая.
Функция line принимает один параметр, в котором должен быть кортеж из четырех значений: первые два - координаты начальной точки, последние два - координаты конечной точки.
Теперь нарисуем красную горизонтальную решетку c 10 линиями:
Так как, ширину и высоты мы будем часто использовать в вычислениях, а они могут меняться, я записал их в переменные width, height.
Если вы заметили я импортировал файл ImageColor, которая помогает работе с цветами. Например чтобы получить цвет по имени нужно вызвать метод ImageColor.getrgb().
После этого у вас получится такое изображение:
Нарисуем эллипсы и круги:
Здесь я использовал функцию ImageColor.getcolor() чтобы получить цвет по его HEX значения в RGB палитре. И мы получаем:
Это было самое простое. Идем дальше.
График функции и относительные координаты
Сейчас попробуем нарисовать график функции y=5*x^2+x^3-x^4. Гугл его нарисовал так:
Смотрите, тут в гугле можно увеличивать и уменшать, двигать график в разные стороны. Это называется мастштабированием. Система координат на нашем изображении в python и система координат этого графика разные.
Давайте попробуем в лоб нарисовать график в нашей системе координат, не думаю о масштабах.
Создаем функцию для функции графика:
Рисуем график точками:
Получитcя такое изображение:
Возможно вы ничего не заметите, но в верхнем левом углу есть три красные точки )) Понятно, что не учитывя масштаба, не получится ничего нарисовать.
Чтобы нарисовать график вам нужно мысленно попробовать наложить его на изображение:
И возможно вы поймете как правильно рисовать.
Точка отсчета нашего изображения в левом верхнем углу, а у графика в центре. У нас ось Y увеличивается вниз, а у графика вверх. Крайние точки по оси Х у нас 0 и 400, а у графика -3 и 3. У нас нет отрицательных координат, а у графика есть. 😫🤪
1. Определим область для рисования графика и вычислим коэффициенты масштабрирования(наложения).
2. Все вычисления будем делать в системе координат графика
3. Когда нужно нарисовать уже, координаты графика будем конвертировать в наши коориданы используя коэффициенты масштабирования.
Оо, это больше похоже на график функции? Давайте попробуем соединить точки линиями и добавить оси координат.
Вот это наш график функции.
Мы написали универсальную функцию convert, которую можно использовать в любых случаях когда нужно масштабировать отображение. Теперь меняя переменные start_x, end_x, start_y, end_y вы можете двигать, увеличивать и уменьшать график!
Показать на экране
Чуть не забыл. Вы можете открыть изображение сразу, используя метод show()
Поскольку на форуме я не заметил программ с GUI, то решил дать несколько базовых уроков.
Есть много вариантов Python GUI. Вот неполный список:
Tkinter
PyGTK
PySide
PyQt
wxPython
Мы будем делать интерфейс с помощью Tkinter. Главным преимуществом его является встроенность в Python. То есть не понадобится устанавливать каких-то сторонних модулей, библиотек и прочего ПО. Из минусов можно отметить менее презентабельный внешний вид по сравнению с другими фреймворками и обёртками.
Начнём с заготовки, которая будет главным скилетом, на который можно накидать всё что угодно.
Запускаем, и получим такое окошко
Теперь пройдёмся по коду и разберёмся что там написано.
from tkinter import * - импортируем tkinter, а значок звёздочки обозначает что нам будут предоставлены все возможности библиотеки. Можно писать по-другому, импортируя исключительно то, что будет использоваться в программе, например так: from tkinter import Tk, Label Но это не очень удобно перечислять через запятую необходимые виджеты.
root = Tk() - вместо root вы можете писать всё что угодно, а Tk() это библиотека модуля tkinter , который является неким обработчиком инструкций для языка Tcl.
root.title("Моя первая графическая программа на Python") - уже из названия ясно что title является заголовком, в который вы можете записать название программы, версию.
root.geometry("400x250") - размеры окна программы. По умолчанию программа запускается в произвольном месте монитора, но стремится к верхнему левому углу экрана. Мы может сами устанавливать место где должна отображаться программа. Для этого добавим в эту конструкцию к ширине и высоте координаты X и координаты Y". При запуске окно будет находиться на 300 пикселей вправо и на 250 пикселей вниз от верхнего левого угла экрана root.geometry("400x250+300+250")
root.resizable(width=False, height=False) - в большинстве случаев нам не нужно чтобы программа меняла размеры окна, и параметрами False мы запрещаем изменения размеров ширины и высоты.
root.mainloop() - метод mainloop запускает весь цикл обработки событий, без него графическая оболочка не запустится.
Ну что же, с запуском главного окна разобрались. Теперь настало время продвигаться дальше. В графическом интерфейсе существуют такие виджеты и элементы как Button, Label, Entry, Radiobutton, Checkbutton и другие. Но всё это добро нужно как-то позиционировать в главном окне программы. Для этого существуют методы pack(), place() и grid() .
Самый простой и популярный метод pack(), применяется для самых простеньких программ. Метод place() почти не используется, а метод grid() самый сложный и самый точный. У него больше всего возможностей, и он позволяет расположить элементы именно так как вы это задумали.
Начнём конечно с самого простого - метод pack()
Добавим к нашей программе кнопку
И вот кнопка у нас появилась
В данном случае ширина кнопки была равна содержимому + отступы. Но кнопке также можно задать ширину и высоту. Попробуйте добавить значения в код width=12,height=4
btn1.pack() - здесь произошла упаковка нашей кнопки, и она стала видимой
Если мы не указали явным образом где должна располагаться кнопка, то она по умолчанию принимает следующий параметр btn1.pack(side=TOP) Их всего может быть у side 4 - BOTTOM, TOP, LEFT, RIGHT
Виджет Label или текстовая метка. Добавим её в наш код
Обратите внимание - метка добавлена выше кнопки, поэтому она и она и отображается выше. Стоит их поменять местами, и в окошке они тоже поменяются местами, попробуйте.
Читайте также: