**Course Title:** Qt 6 Application Development with C++ **Section Title:** Graphics and Animations in Qt **Topic:** Basic 2D drawing using QPainter ### Overview Qt 6 offers a powerful graphics framework that enables developers to create complex graphical interfaces and dynamic visuals. One of the foundational components of this framework is the `QPainter` class, which provides a 2D drawing API for rendering graphics. In this topic, we will delve into the world of basic 2D drawing using `QPainter`, covering its key concepts, usage, and practical examples. ### What is QPainter? `QPainter` is a Qt class that provides a platform-independent way to perform 2D drawing on widgets, devices, and images. It is used to render various types of graphics, from simple shapes to complex scenes. With `QPainter`, you can draw lines, rectangles, polygons, text, and images using various styles and brushes. ### QPainter Basics Before we dive into the code, let's cover some basic concepts related to `QPainter`: * **Paint devices**: These are the surfaces on which `QPainter` draws. Common paint devices include widgets, images, and print devices. * **Brushes**: Brushes determine the style and color used for filling shapes. Qt provides several pre-defined brushes, and you can also create custom brushes. * **Pens**: Pens are used to draw outlines and lines. They define the color, width, and style of the lines. * **Fonts**: Fonts are used to draw text. ### Drawing with QPainter To draw with `QPainter`, you need to: 1. Create a `QPainter` object. 2. Set the paint device and start painting. 3. Use drawing functions to create shapes and text. 4. End painting. Here is an example of drawing a simple rectangle using `QPainter`: ```cpp #include <QWidget> #include <QPainter> class QPainterExample : public QWidget { Q_OBJECT public: QPainterExample(QWidget *parent = nullptr) : QWidget(parent) { } void paintEvent(QPaintEvent *) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); QBrush brush(Qt::red); painter.setBrush(brush); painter.drawRect(100, 100, 200, 200); } }; ``` In this example, we create a `QPainter` object in the `paintEvent` method, which is called whenever the widget needs to be redrawn. We then set the brush to red and draw a rectangle using the `drawRect` function. ### Drawing Shapes and Text `QPainter` provides various functions for drawing shapes and text: * `drawLine()`: Draws a line. * `drawRect()`: Draws a rectangle. * `drawRoundedRect()`: Draws a rounded rectangle. * `drawEllipse()`: Draws an ellipse. * `drawPolygon()`: Draws a polygon. * `drawText()`: Draws text. Here is an example of drawing a few shapes and text: ```cpp void paintEvent(QPaintEvent *) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // Draw a line QPen pen(Qt::black); painter.setPen(pen); painter.drawLine(10, 10, 50, 50); // Draw a rectangle QBrush brush(Qt::red); painter.setBrush(brush); painter.drawRect(100, 100, 200, 200); // Draw text painter.setPen(Qt::black); painter.drawText(300, 300, "Hello, World!"); } ``` ### Style Sheets and Painter Qt 6 introduces a new feature called Style Sheets, which allows you to customize the appearance of your application using CSS-like syntax. You can use Style Sheets to style your widgets and paint devices. To use Style Sheets with `QPainter`, you need to: 1. Enable Style Sheets for your application. 2. Set a style sheet for your widget or paint device. 3. Use the `QPainter` functions as usual. Here is an example of using Style Sheets with `QPainter`: ```cpp class QPainterExample : public QWidget { Q_OBJECT public: QPainterExample(QWidget *parent = nullptr) : QWidget(parent) { setStyleSheet("background-color: #cccccc;"); } void paintEvent(QPaintEvent *) { QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); // Draw a rectangle QBrush brush(Qt::red); painter.setBrush(brush); painter.drawRect(100, 100, 200, 200); } }; ``` In this example, we set a style sheet for the widget to change the background color. We then use the `QPainter` functions as usual. ### Conclusion In this topic, we covered the basics of 2D drawing using `QPainter` in Qt 6. We explored the key concepts, usage, and practical examples of drawing shapes, text, and using Style Sheets. With this knowledge, you can create complex graphical interfaces and dynamic visuals for your Qt applications. ### Additional Resources * Qt 6 documentation: [QPainter Class](https://doc.qt.io/qt-6/qpainter.html) * Qt 6 documentation: [Painting and Rendering Overview](https://doc.qt.io/qt-6/painting.html) ### Exercises 1. Create a simple painting application that allows users to draw lines, rectangles, and ellipses using `QPainter`. 2. Use Style Sheets to customize the appearance of your painting application. 3. Implement a feature that saves the painted image to a file. Please leave a comment below if you have any questions or need help with the exercises.