Введение в Python
Поиск
Новое на сайте
Примитивный Paint на Python
В данной статье мы напишем простенькую рисовалку на Python. На этом примере мы потренируемся в создании GUI, использовании макетов компоновки в tkinter, передаче дополнительных аргументов в функцию-обработчик нажатия кнопки и использовании lambda-функции в Python.
Для этого примера удобнее будет использовать классовый подход к созданию GUI. Для начала определим класс Paint:
Запустив этот код вы должны получить простенькое окно, с которым мы будем работать дальше.
Теперь напишем для класса Paint метод setUI, в котором будет задаваться расположение всех кнопок, меток и самого поля для рисования. У нас будет два ряда кнопок, первый ряд с кнопками устанавливающими цвет, второй ряд устанавливает размер кисти для рисования. Под ними будет идти поле для рисования.
Это достаточно объемный метод, однако многие строки повторяются, так что наберитесь терпения:
Не забудьте добавить вызов этого метода в __init__, чтобы все работало.
Если вы сделали все верно, то при запуске всего кода вы увидите следующее окно:
Теперь создадим метод рисования на холсте. Для начала создадим переменные класса устанавливающие размер и цвет кисти, в метод __init__ допишите:
Сам метод рисования будет выглядеть следующим образом:
Осталось только привязать к канвасу обработку только что созданного метода. Добавьте следую строку после прикрепления канваса (self.canvas.grid. )
означает «при движении зажатой левой кнопки мыши» вызывать метод draw. Теперь мы можем рисовать!
Уже выглядит неплохо. Добавим возможность изменять цвет кисти, заставим кнопки верхнего ряда работать. Для этого сначала создадим метод изменения цвета кисти:
После этого в каждой кнопке верхнего ряда следует добавить код обработки нажатия этой кнопки по следующему шаблону:
Теперь добавим метод изменения размера кисти:
И модернизируем код каждой кнопки нижнего ряда по следующему шаблону:
Логика работы этих кнопок та же, что и у кнопок изменения цвета кисти. Получаем следующий результат:
На этом практически все, осталось добавить функционал очистки холста. Мы оставили место в верхнем ряду кнопок, его и заполним. Добавьте следующий код в наш метод setUI:
Для очистки холста мы используем метод delete класса Canvas, чтобы удалить все с холста в качестве аргумента методу delete мы передаем «all». Вот и все, у нас есть примитивный Paint.
Пишем графическую программу на Python с tkinter
В работе со студентами и учениками я заметила, что при изучении какого-либо языка программирования большой интерес вызывает работа с графикой. Даже те студенты, которые скучали на заданиях про числа Фибоначчи, и уже казалось бы у них пропадал интерес к изучению языка, активизировались на темах, связанных с графикой.
Поэтому предлагаю потренироваться в написании небольшой графической програмки на Python с использованием tkinter (кроссплатформенная библиотека для разработки графического интерфейса на языке Python).
Код в этой статье написан для Python 3.5.
Задание: написание программы для рисования на холсте произвольного размера кругов разных цветов.
Не сложно, возможно программа «детская», но я думаю, для яркой иллюстрации того, что может tkinter самое оно.
Хочу рассказать сначала о том, как указать цвет. Конечно удобным для компьютера способом. Для этого в tkinter есть специальный инструмент, который можно запустить таким образом:
Примечание: как сказано в коментариях ниже — звёздочка не все импортирует, надёжнее будет написать
from tkinter import colorchooser
Можно для определения цвета рисования использовать английские название цветов. Здесь хочу заметить, что не все они поддерживаются. Тут говорится, что без проблем вы можете использовать цвета «white», «black», «red», «green», «blue», «cyan», «yellow», «magenta». Но я все таки поэкспериментировала, и вы увидите дальше, что из этого вышло.
Для того, чтобы рисовать в Python необходимо создать холст. Для рисования используется система координат х и у, где точка (0, 0) находится в верхнем левом углу.
В общем хватит вступлений — начнем.
Библиотека Tkinter: Разработка программы Paint
В этой статье мы разработаем простую “рисовалку” на Python. Программа будет примитивная, но мы потренируемся в создании макетов компоновки в tkinter, передаче аргументов в функцию-обработчик, а также применим анонимные функции.
Класс Paint
В нашей программе мы будем применять ООП и поэтому создаем класс и называем его “Paint”. Листинг:
Данный код создает каркас для нашей будущей программы. Далее мы создаем для нашего класса функцию setUI, в которой будем задавать расположение всех кнопок, меток и самого холста – поля для рисования. Листинг:
В метод __init__ нужно добавить вызов этого метода:
Разработка метода draw()
Разработаем метод для рисования на холсте. В метод __init__ нужно добавить параметры кисти по умолчанию:
Листинг метода draw():
Рисование осуществляется путем создания кругов на холсте: пользователь зажимает левую кнопку мыши и при движении мышью, по пути следования курсора будут отрисовываться круги.
Осталось только привязать к холсту обработку только что созданного метода. Код:
Изменение цвета и размера кисти
Разработаем метод изменения цвета кисти:
После этого в каждой кнопке верхнего ряда следует добавить код обработки нажатия этой кнопки по следующему шаблону:
Код “command=lambda: self.set_color(“red”)” привязывает функцию с нужным нам аргументом к кнопке. Используем lambda-функцию т.к. без lambda функция вызовется сразу при создании кнопки, а не только при ее нажатии.
Рассмотрим метод изменения размера кисти:
Модернизируем код каждой кнопки нижнего ряда по следующему шаблону:
Осталось добавить кнопку “Очистить” для нашей программы. Данная кнопка будет очищать холст. Листинг:
Полный листинг программы
Разработка нашей программы закончилась. Соберем всю нашу программу в один файл и проверим на работоспособность. Листинг:
Для полного понимания работы программы рекомендуется читать комментарии к коду. Программа получилась очень простая и поэтому мы рекомендуем самостоятельно доработать или переработать код данной программы. Пишите свои варианты в комментариях.
QPainter and Bitmap Graphics
Introduction to the core features of QPainter
Custom Widgets course
The first step towards creating custom widgets in PyQt5 is understanding bitmap (pixel-based) graphic operations. All standard widgets draw themselves as bitmaps on a rectangular «canvas» that forms the shape of the widget. Once you understand how this works you can draw any widget you like!
A bitmap is a rectangular grids of pixels, where each pixel is stored individually as a number of bits. Contrast with vector graphics, where the image is stored as a series of drawing instructions which are repeated to form the image.
In this tutorial we’ll take a look at QPainter — Qt’s API for performing bitmap graphic operations and the basis for drawing your own widgets. We’ll go through some basic drawing operations and finally put it all together to create our own little Paint app.
QPainter
Save this to a file and run it and you should see the following — a single black line inside the window frame —
A single black line on the canvas.
Drawing primitives
QPainter provides a huge number of methods for drawing shapes and lines on a bitmap surface (in 5.12 there are 192 QPainter specific non-event methods). The good news is that most of these are overloaded methods which are simply different ways of calling the same base methods.
For example, there are 5 different drawLine methods, all of which draw the same line, but differ in how the coordinates of what to draw are defined.
| Method | Description |
|---|---|
| drawLine(line) | Draw a QLine instance |
| drawLine(line) | Draw a QLineF instance |
| drawLine(x1, y1, x2, y2) | Draw a line between x1, y2 and x2, y2 ( int ) |
| drawLine(p1, p2) | Draw a line between p1 and p2 (both QPoint ) |
| drawLine(p1, p2) | Draw a line between p1 and p2 (both QPointF ) |
Ignoring the F-variants, we have 3 unique ways to draw a line — with a line object, with two sets of coordinates (x1, y1), (x2, y2) or with two QPoint objects. When you discover that a QLine itself is defined as QLine(const QPoint & p1, const QPoint & p2) or QLine(int x1, int y1, int x2, int y2) you see that they are all in fact, exactly the same thing. The different call signatures are simply there for convenience.
For each example, replace the draw_something method in your stub application and re-run it to see the output.
drawPoint
This draws a point, or pixel at a given point on the canvas. Each call to drawPoint draws one pixel. Replace your draw_something code with the following.
If you re-run the file you will see a window, but this time there is a single dot, in black in the middle of it. You’ll probably need to move the window around to spot it.
Drawing a single point (pixel) with QPainter
That really isn’t much to look at. To make things more interesting we can change the colour and size of the point we’re drawing. In PyQt the colour and thickness of lines is defined using the active pen on the QPainter. You can set this by creating a QPen instance and applying it.
This will give the following mildly more interesting result..
A big red dot.
You are free to perform multiple draw operations with your QPainter until the painter is ended. Drawing onto the canvas is very quick — here we’re drawing 10k dots at random.
The dots are 3 pixel-width and black (the default pen).
10k 3-pixel dots on a canvas
Will produce the following output —
Random pattern of 3 width dots
There can only ever be one QPen active on a QPainter — the current pen.
That’s about as much excitement as you can have drawing dots onto a screen, so we’ll move on to look at some other drawing operations.
drawLine
We already drew a line on the canvas at the beginning to test things are working. But what we didn’t try was setting the pen to control the line appearance.
In this example we’re also using QPoint to define the two points to connect with a line, rather than passing individual x1, y1, x2, y2 parameters — remember that both methods are functionally identical.
A thick blue line
drawRect, drawRects and drawRoundedRect
A square is just a rectangle with the same width and height.
Drawing rectangles
You can also replace the multiple calls to drawRect with a single call to drawRects passing in multiple QRect objects. This will produce exactly the same result.
Filled rectangles
As for the pen, there is only ever one brush active on a given painter, but you can switch between them or change them while drawing. There are a number of brush style patterns available. You’ll probably use Qt.SolidPattern more than any others though.
You must set a style to see any fill at all as the default is Qt.NoBrush
The drawRoundedRect methods draw a rectangle, but with rounded edges, and so take two extra parameters for the x & y radius of the corners.
Rounded rectangles.
There is an optional final parameter to toggle between the x & y ellipse radii of the corners being defined in absolute pixel terms Qt.RelativeSize (the default) or relative to the size of the rectangle (passed as a value 0…100). Pass Qt.RelativeSize to enable this.
drawEllipse
The final primitive draw method we’ll look at now is drawEllipse which can be used to draw an ellipse or a circle.
A circle is just an ellipse with an equal width and height.
In this example drawEllipse is taking 4 parameters, with the first two being the x & y position of the top left of the rectangle in which the ellipse will be drawn, while the last two parameters are the width and height of that rectangle respectively.
Drawing an ellipse with x, y, width, height or QRect.
You can achieve the same by passing in a QRect
There is another call signature which takes the centre of the ellipse as the first parameter, provided as QPoint or QPointF object, and then a x and y radius. The example below shows it in action.
Drawing an ellipse using Point & radius.
You can fill ellipses by setting QBrush just as for filling rectangles, the same features for style and colour are available.
Finally, we’ll take a brief tour through the QPainter text drawing methods. To control the current font on a QPainter you use setFont passing in a QFont instance. With this you can control the family, weight and size (among other things) of the text you write. However, the colour of the text is still defined using the current pen.
The width of the pen has no effect on the appearance of the text.
Bitmap text hello world example.
There are also methods for drawing text within a specified area. Here the parameters define the x & y position and the width & height of the bounding box. Text outside this box is clipped (hidden). The 5th parameter flags can be used to control alignment of the text within the box among other things.
Bounding box clipped on drawText.
You have complete control over the display of text by setting the active font on the painter via a QFont object. Check out the QFont documentation for more information.
Create GUI Applications with Python & Qt5
The easy way to create desktop applications
The complete guide to building GUI applications with PyQt5. From the basics of creating a desktop window to the key features you need to build real apps.
Downloadable ebook (PDF, ePub) & Complete Source code
To support developers in [[ countryRegion ]] I give a [[ localizedDiscount[couponCode] ]]% discount with the code [[ couponCode ]] — Enjoy!
For [[ activeDiscount.description ]] I’m giving a [[ activeDiscount.discount ]]% discount with the code [[ couponCode ]] — Enjoy!
A bit of fun with QPainter
That got a bit heavy, so let’s take a breather and make something fun. So far we’ve been programmatically defining draw operations to perform. But we can just as easily draw in response to user input — for example allowing a user to scribble all over the canvas. In this part we’ll take what we’ve learned so far and use it to build a rudimentary Paint app.
We can start with the same simple application outline, adding a mouseMoveEvent handler to the MainWindow class in place of our draw method. Here we’ll take the current position of the user’s mouse and plot a point on the canvas.
If you save this and run it you should be able to move your mouse over the screen and click to draw individual points. It should look something like this —
Drawing individual mouseMoveEvent points.
The issue here is that when you move the mouse around quickly it actually jumps between locations on the screen, rather than moving smoothly from one place to the next. The mouseMoveEvent is fired for each location the mouse is in, but that’s not enough to draw a continuous line, unless you move very slowly.
The solution to this is to draw lines instead of points. On each event we simply draw a line from where we were (previous e.x() and e.y() ) to where we are now (current e.x() and e.y() ). We can do this by tracking last_x and last_y ourselves.
We also need to forget the last position when releasing the mouse, or we’ll start drawing from that location again after moving the mouse across the page — i.e. we won’t be able to break the line.
If you run this you should be able to scribble on the screen as you would expect.
Drawing with the mouse, using a continuous line.
It’s still a bit dull, so let’s add a simple palette to allow us to change the pen colour.
This is easily fixed by moving the mouse handling onto the QLabel itself— it’s event coordinates are always relative to itself. This we wrap up as an custom Canvas object, which handles the creation of the pixmap surface, sets up the x & y locations and the holds the current pen colour (set to black by default).
This self-contained Canvas is a drop-in drawable surface you could use in your own apps.
With those two new parts defined, we simply need to iterate over our list of colours, create a QPaletteButton passing in the colour, connect its pressed signal to the set_pen_color handler on the canvas (indirectly through a lambda to pass the additional colour data) and add it to the palette layout.
This should give you a fully-functioning multicolour paint application, where you can draw lines on the canvas and select colours from the palette.
Unfortunately, it doesn’t make you a good artist.
Spray
Define the SPRAY_PARTICLES and SPRAY_DIAMETER variables at the top of your file and import the random standard library module. The image below shows the spray behaviour when using the following settings:
For the spray can we don’t need to track the previous position, as we always spray around the current point.
If you want a challenge, you could try adding an additional button to toggle between draw and spray mode, or an input to define the brush/spray diameter.
For a fully-functional drawing program written with PyQt5 check out my 15 Minute App «Piecasso».
If you found this tutorial helpful, please consider sharing it with your network.
Your support helps me to continue writing these tutorials. Thankyou!
Компьютерная графика → Как рисовать на Python с помощью библиотеки Pillow?
В питоне есть библиотека PIL(Python Image Library) и его близнец Pillow(расширенная версия PIL).
Эта библиотека позволяют по разному работать с изображениями, в том числе и самому рисовать их. Если захотите вы можете с помощью этой библиотеки написать свой Photoshop.
В этой статье я кратко расскажу как создавать свои изображения и рисовать графики на них.
Не во всех установках питона есть в комплекте библиотека Pillow. Поэтому, вам придется его самому установить. Как установить вы можете прочитать в интернете.
Создание нового изображения и сохранение в файл
Для начала мы попробуем создать пустое изображение размером 400×300 пикселей и сохраним его в файл с названием empty.png чтобы можно было его открыть и посмотреть.
Теперь создадим новое изображение с типом «RGB» и размером (400, 300) и сохраним в файл empty.png:
Если вы запустите эту программу, вы получите в той же папке новый файл empty.png c черным фоном без ничего.
Рисуем линии и квадратики
Теперь нарисуем красную горизонтальную решетку c 10 линиями:
Так как, ширину и высоты мы будем часто использовать в вычислениях, а они могут меняться, я записал их в переменные width, height.
Если вы заметили я импортировал файл ImageColor, которая помогает работе с цветами. Например чтобы получить цвет по имени нужно вызвать метод ImageColor.getrgb().
После этого у вас получится такое изображение:
Нарисуем эллипсы и круги:
Здесь я использовал функцию ImageColor.getcolor() чтобы получить цвет по его HEX значения в RGB палитре. И мы получаем:
Это было самое простое. Идем дальше.
График функции и относительные координаты
Сейчас попробуем нарисовать график функции y=5*x^2+x^3-x^4. Гугл его нарисовал так:
Смотрите, тут в гугле можно увеличивать и уменшать, двигать график в разные стороны. Это называется мастштабированием. Система координат на нашем изображении в python и система координат этого графика разные.
Давайте попробуем в лоб нарисовать график в нашей системе координат, не думаю о масштабах.
Создаем функцию для функции графика:
Рисуем график точками:
Получитcя такое изображение:
Возможно вы ничего не заметите, но в верхнем левом углу есть три красные точки )) Понятно, что не учитывя масштаба, не получится ничего нарисовать.
Чтобы нарисовать график вам нужно мысленно попробовать наложить его на изображение:
И возможно вы поймете как правильно рисовать.
1. Определим область для рисования графика и вычислим коэффициенты масштабрирования(наложения).
2. Все вычисления будем делать в системе координат графика
3. Когда нужно нарисовать уже, координаты графика будем конвертировать в наши коориданы используя коэффициенты масштабирования.
Оо, это больше похоже на график функции? Давайте попробуем соединить точки линиями и добавить оси координат.
Вот это наш график функции.
Мы написали универсальную функцию convert, которую можно использовать в любых случаях когда нужно масштабировать отображение. Теперь меняя переменные start_x, end_x, start_y, end_y вы можете двигать, увеличивать и уменьшать график!
Показать на экране
Чуть не забыл. Вы можете открыть изображение сразу, используя метод show()