Python

PyQt5 drawing tutorial (Painting APIs)

In this tutorial, we will learn how to draw vector graphics in PyQt5. In Python, the PyQt5 module is the easiest module you can use for drawing purposes as you will see.

Before getting started, let’s create a window using PyQt5 where we will be drawing our graphics.


 

Create a PyQt5 window

To create the window, import the following modules:


Now create the Window class which provides a window for our application where we can have a menu bar, status bar, graphics, etc.

Inside this class, we will have two methods; the first method is a constructor which is automatically called when the object of the class is created.

The second method called InitWindow, it sets the parameters we defined in our constructor, for example, the title of our application window, length, and width etc.


In the constructor, the parameters are initialized and in the InitWindow() method, the parameters are applied to the window using setGeometry() function.

Now the main steps: Create an instance of QApplication, and object of Window class then execute the window.


Our window is now ready and we can create graphics easily:

PyQt5 drawing tutorial

Draw a circle

To draw graphics, import the following modules:


The QPainter provides various functions to draw the basic shapes. For example, lines, rectangles etc. The QBrush modules provide colors, textures, etc. for a shape. The QPen defines the working of QPainter that is how should QPainter design or style a shape.

  1. The first step is to define the method where all painting work will be done, the method is paintEvent():

def paintEvent(self, event):

  1. Create a painter object:

painter = QPainter(self)

  1. Now set the QPen for the painter and assign the color and style to the line for the circle:

painter.setPen(QPen(Qt.green,  8, Qt.DashLine))

The value 8 is the width of the circle line.

  1. Draw the circle using drawEllipse(x_axis, y_axis, width, height) The drawEllipse() method is called using painter object we created in step 2. Define the x and y axis where the circle will be placed in the window and the size (height and width).

painter.drawEllipse(40, 40, 400, 400)

The output will be as follows:

Draw PyQt5 circle

In this example, we have used the DashLine as line style, we can also use SolidLine to create a solid lined continuous circle as follows:

painter.setPen(QPen(Qt.green,  8, Qt.SolidLine))

Draw solid line circle

We can have the following line styles:

PyQt5 line styles

This image is extracted from the QPen Official Documentation.


Draw a Filled Circle

You can draw a filled circle by using the QBrush. Set the color of the pattern and pattern style.

  1. Set the brush as we set the pen in the last section using the painter object:

painter.setBrush(QBrush(Qt.red, Qt.SolidPattern))

Draw a filled circle

The entire painterEvent function will be like this:


There are many other patterns that we can use for example the cross pattern:

painter.setBrush(QBrush(Qt.red, Qt.CrossPattern))

Draw cross pattern circle

You can have the following patterns to fill in the circle or any other shape:

PyQt5 fill patterns

This image is extracted from the QBrush Official Document.


Draw Half Circle

To create a half circle, we will be using the drawArc() method. Follow the steps below:

  1. Create a painter object:

painter = QPainter()

  1. Now activate the painter by using the begin() method:

painter.begin(self)

  1. Now use the setRenderHint() method which returns the flag specifying the rendering hints set for the painter object.

painter.setRenderHint(QPainter.Antialiasing)

  1. Set the Pen for the arc:

painter.setPen(QtCore.Qt.green)

  1. Set the brush:

painter.setBrush(QtCore.Qt.white)

  1. Finally, draw the arc:

painter.drawArc(100, 70, 300, 300, 0 * 16, 180 * 16)

The first two parameters are the x and y axis respectively. Then we have the width and size of the arc, then the start angle. In the end, we have defined the span angle.

The result will be like this:

Draw half circle

You can create a half circle upside down by changing the 180 degrees to -180 degrees:

painter.drawArc(100, 70, 300, 300, 0 * 16, -180 * 16)

Draw half circle upside down

To create a vertical half circle:

painter.drawArc(100, 70, 300, 300, 90 * 16, 180 * 16)

Draw vertical half circle

Draw a Line

In this section, you will learn to draw a line. A line can be drawn by using the drawLine() function.

The drawLine() function draws a line from point a to point b. Follow the steps below:

  1. Create a painter object:

painter = QPainter()

  1. Now activate the painter by using the begin() method:

painter.begin(self)

  1. Now use the setRenderHint() method which returns the flag specifying the rendering hints set for the painter object.

painter.setRenderHint(QPainter.Antialiasing)

  1. Set the Pen for the line:

painter.setPen(QtCore.Qt.red)

  1. Set the brush:

painter.setBrush(QtCore.Qt.white)

  1. Finally, draw the line:

painter.drawLine(0, 0, 200, 200)

The result will be like this:

Draw a line


Draw Horizontal Line

You can draw a horizontal line by using the drawLine() method. Consider the following code:


The code is the same as we used in the last section but you have to organize the points in the drawLine() function to get a horizontal line. This will generate the following result:

Draw horizontal line

Similarly, we can create a vertical line by using the following points in the drawLine() function:

painter.drawLine(100, 100, 100, 400)

The result will be like this:

Draw vertical line

Draw an arrow

To draw an arrow, one will be a horizontal line and the remaining two lines for the head of the arrow. These lines will be drawn using the drawLine() function. Consider the code below:


The first drawLine() function is for the horizontal line, the second function creates the lower part of the arrow head and the third function creates the upper part of the arrow head.

Draw an arrow

Draw an arc

You can draw an arc using the drawArc() method. The syntax of drawArc() function is as follows:

drawArc(x_axis, y_axis, width, length, startAngle, spanAngle)

In the following example, we will be creating an arc from 0 degrees to 90 degrees:


This will create an arc like the following:

Draw an arc


Draw a curve

To draw a curve, you should use the QPainterPath module.

First of all, import the module:

from PyQt5.QtGui import QPainterPath

Now create a QPainter and a QPainterPath object inside the paintEvent() method:


Then repeat the old steps of activating the painter, rendering hints for painter objects, and setting the pen and brush:


Then use the moveTo() function of the QPainterPath module to move to x and y axis in the window:

path.moveTo(40, 40)

Then use the cubicTo() of QPainterPath function which creates a curve between the current position and the end point (x, y).

path.cubicTo(40, 40, 150, 250, 250, 40)

Finally, use the drawPath() method and pass the path object to draw the curve.

The output will be like this:

Draw a curve

Draw an Ellipse

You can draw an ellipse using the drawEllipse() function like we did when drawing the circle. Just change the points accordingly and you will get the ellipse. Consider the following code:


Draw an ellipse

Draw a rectangle

To draw a rectangle we will be using the drawRect() method of QPainter module.

First of all, create the QPainter object in the paintEvent function:


After the painter object, we used the setPen() method to set the color of the rectangle and the line style which is a solid line in our example.

Then just use the drawRect() method to draw the rectangle on the window. The above code will generate the following result:

Draw a rectangle

We can use other line styles, for example, DotLine which will be as follows:

painter.setPen(QPen(Qt.black,  5, Qt.DotLine))

Draw a dot line rectangle


Draw a filled Rectangle

You can draw a filled rectangle by using the setBrush() function as follows:


The output will be as follows:

Draw a filled rectangle

Draw a Triangle

To draw a triangle, you can use the lineTo() function of the QPainterPath module.

Consider the code below:


In the above code, we create objects of the respective classes/ modules. Then activate the painter and render the hints. Then set the pen (pen color).

At last, we use three lineTo() functions on different points to create three lines so that they are joined together as below:

Draw a triangle

Draw a filled Triangle

You can use the setBrush() method to draw a filled triangle as follows:

painter.setBrush(QtCore.Qt.blue)

The output will be like the following:

Draw a filled triangle

Draw a Gradient

We will be using the LinearGradient and for this, we will import the QLinearGradient module.


We have created a gradient object and passed the values to the QLinearGradient module. Next, we have passed values for the color to the QLinearGradient module and at the end, we set our brush with the gradient object.

The output will be like this:

Draw a gradient

Draw a Polygon

To draw a polygon, you can use the QPolygon method of QPolygon module. First, you have to import the QPoint from QtCore and QPolygon from QtGui as in the code below:


In the code below, we declared an array of points which is passed to the QPolygon() method and then used the drawPolygon() method to draw a polygon.


The output is as below:

Draw a Polygon

Draw on Image

For this, we have imported everything from the QtWidgets, QtGui and QtCore modules as below:


Now the paintEvent method:

  1. Create a QPainter object.
  2. Then to import the image we have created an object of the QPixmap and passed the link to the image. Our image looks like this:
    Shape
  3. Now we have to display the image on the window, we used the drawPixmap().
  4. Set the pen (the line color and line style for rectangle).
  5. Draw the rectangle using drawLine() and it will be drawn on top of the image.


The output is as follows:

Draw on image

 

Drawing vector images is very simple in PyQt5. I hope you find the tutorial useful.

Thank you.

Ayesha Tariq
Ayesha Tariq is a full stack software engineer, web developer, and blockchain developer enthusiast. She has extensive knowledge of C/C++, Java, Kotlin, Python, and various others.

4 thoughts on “PyQt5 drawing tutorial (Painting APIs)

Leave a Reply

Your email address will not be published. Required fields are marked *