Basic Drawing Example

Window Class Implementation

In the constructor we create and initialize the various widgets appearing in the main application window.

 Window::Window()
 {
     renderArea = new RenderArea;

     shapeComboBox = new QComboBox;
     shapeComboBox->addItem(tr("Polygon"), RenderArea::Polygon);
     shapeComboBox->addItem(tr("Rectangle"), RenderArea::Rect);
     shapeComboBox->addItem(tr("Rounded Rectangle"), RenderArea::RoundedRect);
     shapeComboBox->addItem(tr("Ellipse"), RenderArea::Ellipse);
     shapeComboBox->addItem(tr("Pie"), RenderArea::Pie);
     shapeComboBox->addItem(tr("Chord"), RenderArea::Chord);
     shapeComboBox->addItem(tr("Path"), RenderArea::Path);
     shapeComboBox->addItem(tr("Line"), RenderArea::Line);
     shapeComboBox->addItem(tr("Polyline"), RenderArea::Polyline);
     shapeComboBox->addItem(tr("Arc"), RenderArea::Arc);
     shapeComboBox->addItem(tr("Points"), RenderArea::Points);
     shapeComboBox->addItem(tr("Text"), RenderArea::Text);
     shapeComboBox->addItem(tr("Pixmap"), RenderArea::Pixmap);

     shapeLabel = new QLabel(tr("&Shape:"));
     shapeLabel->setBuddy(shapeComboBox);

First we create the RenderArea widget that will render the currently active shape. Then we create the Shape combobox, and add the associated items (i.e. the different shapes a QPainter can draw).

     penWidthSpinBox = new QSpinBox;
     penWidthSpinBox->setRange(0, 20);
 #if defined(Q_OS_SYMBIAN) || defined(Q_WS_MAEMO_5) || defined(Q_WS_SIMULATOR)
     penWidthSpinBox->setSpecialValueText(tr("0"));
 #else
     penWidthSpinBox->setSpecialValueText(tr("0 (cosmetic pen)"));
 #endif

     penWidthLabel = new QLabel(tr("Pen &Width:"));
     penWidthLabel->setBuddy(penWidthSpinBox);

QPainter's pen is a QPen object; the QPen class defines how a painter should draw lines and outlines of shapes. A pen has several properties: Width, style, cap and join.

A pen's width can be zero or greater, but the most common width is zero. Note that this doesn't mean 0 pixels, but implies that the shape is drawn as smoothly as possible although perhaps not mathematically correct.

We create a QSpinBox for the Pen Width parameter.

     penStyleComboBox = new QComboBox;
     penStyleComboBox->addItem(tr("Solid"), Qt::SolidLine);
     penStyleComboBox->addItem(tr("Dash"), Qt::DashLine);
     penStyleComboBox->addItem(tr("Dot"), Qt::DotLine);
     penStyleComboBox->addItem(tr("Dash Dot"), Qt::DashDotLine);
     penStyleComboBox->addItem(tr("Dash Dot Dot"), Qt::DashDotDotLine);
     penStyleComboBox->addItem(tr("None"), Qt::NoPen);

     penStyleLabel = new QLabel(tr("&Pen Style:"));
     penStyleLabel->setBuddy(penStyleComboBox);

     penCapComboBox = new QComboBox;
     penCapComboBox->addItem(tr("Flat"), Qt::FlatCap);
     penCapComboBox->addItem(tr("Square"), Qt::SquareCap);
     penCapComboBox->addItem(tr("Round"), Qt::RoundCap);

     penCapLabel = new QLabel(tr("Pen &Cap:"));
     penCapLabel->setBuddy(penCapComboBox);

     penJoinComboBox = new QComboBox;
     penJoinComboBox->addItem(tr("Miter"), Qt::MiterJoin);
     penJoinComboBox->addItem(tr("Bevel"), Qt::BevelJoin);
     penJoinComboBox->addItem(tr("Round"), Qt::RoundJoin);

     penJoinLabel = new QLabel(tr("Pen &Join:"));
     penJoinLabel->setBuddy(penJoinComboBox);

The pen style defines the line type. The default style is solid (Qt::SolidLine). Setting the style to none (Qt::NoPen) tells the painter to not draw lines or outlines. The pen cap defines how the end points of lines are drawn. And the pen join defines how two lines join when multiple connected lines are drawn. The cap and join only apply to lines with a width of 1 pixel or greater.

We create QComboBoxes for each of the Pen Style, Pen Cap and Pen Join parameters, and adds the associated items (i.e the values of the Qt::PenStyle, Qt::PenCapStyle and Qt::PenJoinStyle enums respectively).

     brushStyleComboBox = new QComboBox;
     brushStyleComboBox->addItem(tr("Linear Gradient"),
             Qt::LinearGradientPattern);
     brushStyleComboBox->addItem(tr("Radial Gradient"),
             Qt::RadialGradientPattern);
     brushStyleComboBox->addItem(tr("Conical Gradient"),
             Qt::ConicalGradientPattern);
     brushStyleComboBox->addItem(tr("Texture"), Qt::TexturePattern);
     brushStyleComboBox->addItem(tr("Solid"), Qt::SolidPattern);
     brushStyleComboBox->addItem(tr("Horizontal"), Qt::HorPattern);
     brushStyleComboBox->addItem(tr("Vertical"), Qt::VerPattern);
     brushStyleComboBox->addItem(tr("Cross"), Qt::CrossPattern);
     brushStyleComboBox->addItem(tr("Backward Diagonal"), Qt::BDiagPattern);
     brushStyleComboBox->addItem(tr("Forward Diagonal"), Qt::FDiagPattern);
     brushStyleComboBox->addItem(tr("Diagonal Cross"), Qt::DiagCrossPattern);
     brushStyleComboBox->addItem(tr("Dense 1"), Qt::Dense1Pattern);
     brushStyleComboBox->addItem(tr("Dense 2"), Qt::Dense2Pattern);
     brushStyleComboBox->addItem(tr("Dense 3"), Qt::Dense3Pattern);
     brushStyleComboBox->addItem(tr("Dense 4"), Qt::Dense4Pattern);
     brushStyleComboBox->addItem(tr("Dense 5"), Qt::Dense5Pattern);
     brushStyleComboBox->addItem(tr("Dense 6"), Qt::Dense6Pattern);
     brushStyleComboBox->addItem(tr("Dense 7"), Qt::Dense7Pattern);
     brushStyleComboBox->addItem(tr("None"), Qt::NoBrush);

     brushStyleLabel = new QLabel(tr("&Brush:"));
     brushStyleLabel->setBuddy(brushStyleComboBox);

The QBrush class defines the fill pattern of shapes drawn by a QPainter. The default brush style is Qt::NoBrush. This style tells the painter to not fill shapes. The standard style for filling is Qt::SolidPattern.

We create a QComboBox for the Brush Style parameter, and add the associated items (i.e. the values of the Qt::BrushStyle enum).

     otherOptionsLabel = new QLabel(tr("Options:"));
     antialiasingCheckBox = new QCheckBox(tr("&Antialiasing"));

Antialiasing is a feature that "smoothes" the pixels to create more even and less jagged lines, and can be applied using QPainter's render hints. QPainter::RenderHints are used to specify flags to QPainter that may or may not be respected by any given engine.

We simply create a QCheckBox for the Antialiasing option.

     transformationsCheckBox = new QCheckBox(tr("&Transformations"));

The Transformations option implies a manipulation of the coordinate system that will appear as if the rendered shape is rotated in three dimensions.

We use the QPainter::translate(), QPainter::rotate() and QPainter::scale() functions to implement this feature represented in the main application window by a simple QCheckBox.

     connect(shapeComboBox, SIGNAL(activated(int)),
             this, SLOT(shapeChanged()));
     connect(penWidthSpinBox, SIGNAL(valueChanged(int)),
             this, SLOT(penChanged()));
     connect(penStyleComboBox, SIGNAL(activated(int)),
             this, SLOT(penChanged()));
     connect(penCapComboBox, SIGNAL(activated(int)),
             this, SLOT(penChanged()));
     connect(penJoinComboBox, SIGNAL(activated(int)),
             this, SLOT(penChanged()));
     connect(brushStyleComboBox, SIGNAL(activated(int)),
             this, SLOT(brushChanged()));
     connect(antialiasingCheckBox, SIGNAL(toggled(bool)),
             renderArea, SLOT(setAntialiased(bool)));
     connect(transformationsCheckBox, SIGNAL(toggled(bool)),
             renderArea, SLOT(setTransformed(bool)));

Then we connect the parameter widgets with their associated slots using the static QObject::connect() function, ensuring that the RenderArea widget is updated whenever the user changes the shape, or any of the other parameters.

     QGridLayout *mainLayout = new QGridLayout;
 #if defined(Q_OS_SYMBIAN) || defined(Q_WS_MAEMO_5) || defined(Q_WS_SIMULATOR)
     mainLayout->setSizeConstraint(QLayout::SetNoConstraint);
 #endif
     mainLayout->setColumnStretch(0, 1);
     mainLayout->setColumnStretch(3, 1);
     mainLayout->addWidget(renderArea, 0, 0, 1, 4);
     mainLayout->addWidget(shapeLabel, 2, 0, Qt::AlignRight);
     mainLayout->addWidget(shapeComboBox, 2, 1);
     mainLayout->addWidget(penWidthLabel, 3, 0, Qt::AlignRight);
     mainLayout->addWidget(penWidthSpinBox, 3, 1);
     mainLayout->addWidget(penStyleLabel, 4, 0, Qt::AlignRight);
     mainLayout->addWidget(penStyleComboBox, 4, 1);
     mainLayout->addWidget(penCapLabel, 3, 2, Qt::AlignRight);
     mainLayout->addWidget(penCapComboBox, 3, 3);
     mainLayout->addWidget(penJoinLabel, 2, 2, Qt::AlignRight);
     mainLayout->addWidget(penJoinComboBox, 2, 3);
     mainLayout->addWidget(brushStyleLabel, 4, 2, Qt::AlignRight);
     mainLayout->addWidget(brushStyleComboBox, 4, 3);
     mainLayout->addWidget(otherOptionsLabel, 5, 0, Qt::AlignRight);
     mainLayout->addWidget(antialiasingCheckBox, 5, 1, 1, 1, Qt::AlignRight);
     mainLayout->addWidget(transformationsCheckBox, 5, 2, 1, 2, Qt::AlignRight);
     setLayout(mainLayout);

     shapeChanged();
     penChanged();
     brushChanged();
     antialiasingCheckBox->setChecked(true);

     setWindowTitle(tr("Basic Drawing"));
 }

Finally, we add the various widgets to a layout, and call the shapeChanged(), penChanged(), and brushChanged() slots to initialize the application. We also turn on antialiasing.

 void Window::shapeChanged()
 {
     RenderArea::Shape shape = RenderArea::Shape(shapeComboBox->itemData(
             shapeComboBox->currentIndex(), IdRole).toInt());
     renderArea->setShape(shape);
 }

The shapeChanged() slot is called whenever the user changes the currently active shape.

First we retrieve the shape the user has chosen using the QComboBox::itemData() function. This function returns the data for the given role in the given index in the combobox. We use QComboBox::currentIndex() to retrieve the index of the shape, and the role is defined by the Qt::ItemDataRole enum; IdRole is an alias for Qt::UserRole.

Note that Qt::UserRole is only the first role that can be used for application-specific purposes. If you need to store different data in the same index, you can use different roles by simply incrementing the value of Qt::UserRole, for example: 'Qt::UserRole + 1' and 'Qt::UserRole + 2'. However, it is a good programming practice to give each role their own name: 'myFirstRole = Qt::UserRole + 1' and 'mySecondRole = Qt::UserRole + 2'. Even though we only need a single role in this particular example, we add the following line of code to the beginning of the window.cpp file.

 const int IdRole = Qt::UserRole;

The QComboBox::itemData() function returns the data as a QVariant, so we need to cast the data to RenderArea::Shape. If there is no data for the given role, the function returns QVariant::Invalid.

In the end we call the RenderArea::setShape() slot to update the RenderArea widget.

 void Window::penChanged()
 {
     int width = penWidthSpinBox->value();
     Qt::PenStyle style = Qt::PenStyle(penStyleComboBox->itemData(
             penStyleComboBox->currentIndex(), IdRole).toInt());
     Qt::PenCapStyle cap = Qt::PenCapStyle(penCapComboBox->itemData(
             penCapComboBox->currentIndex(), IdRole).toInt());
     Qt::PenJoinStyle join = Qt::PenJoinStyle(penJoinComboBox->itemData(
             penJoinComboBox->currentIndex(), IdRole).toInt());

     renderArea->setPen(QPen(Qt::blue, width, style, cap, join));
 }

We call the penChanged() slot whenever the user changes any of the pen parameters. Again we use the QComboBox::itemData() function to retrieve the parameters, and then we call the RenderArea::setPen() slot to update the RenderArea widget.

 void Window::brushChanged()
 {
     Qt::BrushStyle style = Qt::BrushStyle(brushStyleComboBox->itemData(

The brushChanged() slot is called whenever the user changes the brush parameter which we retrieve using the QComboBox::itemData() function as before.

     if (style == Qt::LinearGradientPattern) {
         QLinearGradient linearGradient(0, 0, 100, 100);
         linearGradient.setColorAt(0.0, Qt::white);
         linearGradient.setColorAt(0.2, Qt::green);
         linearGradient.setColorAt(1.0, Qt::black);
         renderArea->setBrush(linearGradient);

If the brush parameter is a gradient fill, special actions are required.

The QGradient class is used in combination with QBrush to specify gradient fills. Qt currently supports three types of gradient fills: linear, radial and conical. Each of these is represented by a subclass of QGradient: QLinearGradient, QRadialGradient and QConicalGradient.

So if the brush style is Qt::LinearGradientPattern, we first create a QLinearGradient object with interpolation area between the coordinates passed as arguments to the constructor. The positions are specified using logical coordinates. Then we set the gradient's colors using the QGradient::setColorAt() function. The colors is defined using stop points which are composed by a position (between 0 and 1) and a QColor. The set of stop points describes how the gradient area should be filled. A gradient can have an arbitrary number of stop points.

In the end we call RenderArea::setBrush() slot to update the RenderArea widget's brush with the QLinearGradient object.

     } else if (style == Qt::RadialGradientPattern) {
         QRadialGradient radialGradient(50, 50, 50, 70, 70);
         radialGradient.setColorAt(0.0, Qt::white);
         radialGradient.setColorAt(0.2, Qt::green);
         radialGradient.setColorAt(1.0, Qt::black);
         renderArea->setBrush(radialGradient);
     } else if (style == Qt::ConicalGradientPattern) {
         QConicalGradient conicalGradient(50, 50, 150);
         conicalGradient.setColorAt(0.0, Qt::white);
         conicalGradient.setColorAt(0.2, Qt::green);
         conicalGradient.setColorAt(1.0, Qt::black);
         renderArea->setBrush(conicalGradient);

A similar pattern of actions, as the one used for QLinearGradient, is used in the cases of Qt::RadialGradientPattern and Qt::ConicalGradientPattern.

The only difference is the arguments passed to the constructor: Regarding the QRadialGradient constructor the first argument is the center, and the second the radial gradient's radius. The third argument is optional, but can be used to define the focal point of the gradient inside the circle (the default focal point is the circle center). Regarding the QConicalGradient constructor, the first argument specifies the center of the conical, and the second specifies the start angle of the interpolation.

     } else if (style == Qt::TexturePattern) {
         renderArea->setBrush(QBrush(QPixmap(":/images/brick.png")));

If the brush style is Qt::TexturePattern we create a QBrush from a QPixmap. Then we call RenderArea::setBrush() slot to update the RenderArea widget with the newly created brush.

     } else {
         renderArea->setBrush(QBrush(Qt::green, style));
     }
 }

Otherwise we simply create a brush with the given style and a green color, and then call RenderArea::setBrush() slot to update the RenderArea widget with the newly created brush.

 class RenderArea : public QWidget
 {
     Q_OBJECT

 public:
     enum Shape { Line, Points, Polyline, Polygon, Rect, RoundedRect, Ellipse, Arc,
                  Chord, Pie, Path, Text, Pixmap };

     RenderArea(QWidget *parent = 0);

     QSize minimumSizeHint() const;
     QSize sizeHint() const;

 public slots:
     void setShape(Shape shape);
     void setPen(const QPen &pen);
     void setBrush(const QBrush &brush);
     void setAntialiased(bool antialiased);
     void setTransformed(bool transformed);

 protected:
     void paintEvent(QPaintEvent *event);

 private:
     Shape shape;
     QPen pen;
     QBrush brush;
     bool antialiased;
     bool transformed;
     QPixmap pixmap;
 };

 RenderArea::RenderArea(QWidget *parent)
     : QWidget(parent)
 {
     shape = Polygon;
     antialiased = false;
     transformed = false;
     pixmap.load(":/images/qt-logo.png");

     setBackgroundRole(QPalette::Base);
     setAutoFillBackground(true);
 }

 QSize RenderArea::sizeHint() const
 {
     return QSize(400, 200);
 }

 QSize RenderArea::minimumSizeHint() const
 {
     return QSize(100, 100);
 }

 void RenderArea::setShape(Shape shape)
 {
     this->shape = shape;
     update();
 }

 void RenderArea::setPen(const QPen &pen)
 {
     this->pen = pen;
     update();
 }

 void RenderArea::setBrush(const QBrush &brush)
 {
     this->brush = brush;
     update();
 }

 void RenderArea::setAntialiased(bool antialiased)
 {
     this->antialiased = antialiased;
     update();
 }

 void RenderArea::setTransformed(bool transformed)
 {
     this->transformed = transformed;
     update();
 }

 void RenderArea::paintEvent(QPaintEvent * /* event */)
 {
     static const QPoint points[4] = {
         QPoint(10, 80),
         QPoint(20, 10),
         QPoint(80, 30),
         QPoint(90, 70)
     };

     QRect rect(10, 20, 80, 60);

     QPainterPath path;
     path.moveTo(20, 80);
     path.lineTo(20, 30);
     path.cubicTo(80, 0, 50, 50, 80, 80);

     int startAngle = 20 * 16;
     int arcLength = 120 * 16;

     QPainter painter(this);
     painter.setPen(pen);
     painter.setBrush(brush);
     if (antialiased)
         painter.setRenderHint(QPainter::Antialiasing, true);

     for (int x = 0; x < width(); x += 100) {
         for (int y = 0; y < height(); y += 100) {
             painter.save();
             painter.translate(x, y);

             if (transformed) {
                 painter.translate(50, 50);
                 painter.rotate(60.0);
                 painter.scale(0.6, 0.9);
                 painter.translate(-50, -50);
             }

             switch (shape) {
             case Line:
                 painter.drawLine(rect.bottomLeft(), rect.topRight());
                 break;
             case Points:
                 painter.drawPoints(points, 4);
                 break;
             case Polyline:
                 painter.drawPolyline(points, 4);
                 break;
             case Polygon:
                 painter.drawPolygon(points, 4);
                 break;
             case Rect:
                 painter.drawRect(rect);
                 break;
             case RoundedRect:
                 painter.drawRoundedRect(rect, 25, 25, Qt::RelativeSize);
                 break;
             case Ellipse:
                 painter.drawEllipse(rect);
                 break;
             case Arc:
                 painter.drawArc(rect, startAngle, arcLength);
                 break;
             case Chord:
                 painter.drawChord(rect, startAngle, arcLength);
                 break;
             case Pie:
                 painter.drawPie(rect, startAngle, arcLength);
                 break;
             case Path:
                 painter.drawPath(path);
                 break;
             case Text:
                 painter.drawText(rect, Qt::AlignCenter, tr("Qt by\nNokia"));
                 break;
             case Pixmap:
                 painter.drawPixmap(10, 10, pixmap);
             }

             painter.restore();
         }
     }

     painter.setRenderHint(QPainter::Antialiasing, false);
     painter.setPen(palette().dark().color());
     painter.setBrush(Qt::NoBrush);
     painter.drawRect(QRect(0, 0, width() - 1, height() - 1));
 }