Qt4 tutorial: Painting in Qt4

In this part of the Qt4 C++ programming tutorial we will do some painting.
The QPainter class is instrumental when we do some painting in Qt4. The painting is done with the QPainter class in a reaction to the paintEvent() method.

Lines

In the first example we will paint some lines on the client area of the window.

lines.h

#pragma once

#include <QWidget>

class Lines : public QWidget
{
  Q_OBJECT  

  public:
    Lines(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);
    void drawLines(QPainter *qp);

};

The header file.

lines.cpp

#include "lines.h"
#include <QPainter>


Lines::Lines(QWidget *parent)
    : QWidget(parent)
{

}

void Lines::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  QPainter qp(this);
  drawLines(&qp);
}

void Lines::drawLines(QPainter *qp)
{  
  QPen pen(Qt::black, 2, Qt::SolidLine);  
  qp->setPen(pen);
  qp->drawLine(20, 40, 250, 40);

  pen.setStyle(Qt::DashLine);
  qp->setPen(pen);
  qp->drawLine(20, 80, 250, 80);

  pen.setStyle(Qt::DashDotLine);
  qp->setPen(pen);
  qp->drawLine(20, 120, 250, 120);

  pen.setStyle(Qt::DotLine);
  qp->setPen(pen);
  qp->drawLine(20, 160, 250, 160);

  pen.setStyle(Qt::DashDotDotLine);
  qp->setPen(pen);
  qp->drawLine(20, 200, 250, 200);

  QVector<qreal> dashes;
  qreal space = 4;

  dashes << 1 << space << 5 << space;

  pen.setStyle(Qt::CustomDashLine);
  pen.setDashPattern(dashes);
  qp->setPen(pen);
  qp->drawLine(20, 240, 250, 240);
}

We paint six different lines on the window.

void Lines::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  QPainter qp(this);
  drawLines(&qp);
}

The paintEvent() is called when a widget is updated. It is where we create the QPainter object and do the drawing. Since we do not utilize the QPaintEvent object, we suppress the compiler warning with the Q_UNUSED macro. The real drawing is delegated to the drawLines() method.

QPen pen(Qt::black, 2, Qt::SolidLine);
qp->setPen(pen);

We create a QPen object. The pen is solid, 2px thick and of black colour. The pen is used to draw lines and outlines of shapes. The pen is set to the painter object.

qp->drawLine(20, 40, 250, 40);

Here we paint the first line. The four parameters are coordinates of two points on the window.

pen.setStyle(Qt::DashLine);

This code line sets a different pen style.

main.cpp

#include "lines.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Lines window;
  
  window.resize(280, 270);
  window.move(300, 300);
  window.setWindowTitle("Lines");
  window.show();

  return app.exec();
}

Main file.
Lines

Figure: Lines

Colours

A colour is an object representing a combination of Red, Green, and Blue (RGB) intensity values. Valid RGB values are in the range 0 to 255. In the following example, we draw 9 rectangles filled with 9 different colours.

colors.h

#pragma once

#include <QWidget>

class Colors : public QWidget
{
  public:
    Colors(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

Header file.

colors.cpp

#include "colors.h"
#include <QPainter>

Colors::Colors(QWidget *parent)
    : QWidget(parent)
{

}

void Colors::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  
  QPainter painter(this);
  painter.setPen(QColor("#d4d4d4"));

  painter.setBrush(QBrush("#c56c00"));
  painter.drawRect(10, 15, 90, 60);

  painter.setBrush(QBrush("#1ac500"));
  painter.drawRect(130, 15, 90, 60);

  painter.setBrush(QBrush("#539e47"));
  painter.drawRect(250, 15, 90, 60);

  painter.setBrush(QBrush("#004fc5"));
  painter.drawRect(10, 105, 90, 60);

  painter.setBrush(QBrush("#c50024"));
  painter.drawRect(130, 105, 90, 60);

  painter.setBrush(QBrush("#9e4757"));
  painter.drawRect(250, 105, 90, 60);

  painter.setBrush(QBrush("#5f3b00"));
  painter.drawRect(10, 195, 90, 60);

  painter.setBrush(QBrush("#4c4c4c"));
  painter.drawRect(130, 195, 90, 60);

  painter.setBrush(QBrush("#785f36"));
  painter.drawRect(250, 195, 90, 60);
}

We draw nine rectangles with different color fills. The outline of the rectangles is gray.

painter.setBrush(QBrush("#c56c00"));
painter.drawRect(10, 15, 90, 60);

The QBrush class defines the fill pattern of shapes drawn by QPainter. The drawRect() method draws the rectangle. It draws a rectangle with upper left corner at x, y point and with the given width and height. We used a hexadecimal notation to specify a colour value.

main.cpp

#include "colors.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);

  Colors window;

  window.resize(350, 280);
  window.move(300, 300);
  window.setWindowTitle("Colours");
  window.show();
  
  return app.exec();
}

Main file.
Colors

Figure: Colors

Patterns

The following programming code example is similar to the previous one. This time we fill the rectangles with various predefined patterns.

brushes.h

#pragma once

#include <QWidget>

class Brushes : public QWidget
{
  Q_OBJECT  

  public:
    Brushes(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

Header file.

brushes.cpp

#include "brushes.h"
#include <QApplication>
#include <QPainter>


Brushes::Brushes(QWidget *parent)
    : QWidget(parent)
{

}

void Brushes::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
    
  QPainter painter(this);
  painter.setPen(Qt::NoPen);

  painter.setBrush(Qt::HorPattern);
  painter.drawRect(10, 15, 90, 60);

  painter.setBrush(Qt::VerPattern);
  painter.drawRect(130, 15, 90, 60);

  painter.setBrush(Qt::CrossPattern);
  painter.drawRect(250, 15, 90, 60);

  painter.setBrush(Qt::Dense7Pattern);
  painter.drawRect(10, 105, 90, 60);

  painter.setBrush(Qt::Dense6Pattern);
  painter.drawRect(130, 105, 90, 60);

  painter.setBrush(Qt::Dense5Pattern);
  painter.drawRect(250, 105, 90, 60);

  painter.setBrush(Qt::BDiagPattern);
  painter.drawRect(10, 195, 90, 60);

  painter.setBrush(Qt::FDiagPattern);
  painter.drawRect(130, 195, 90, 60);

  painter.setBrush(Qt::DiagCrossPattern);
  painter.drawRect(250, 195, 90, 60);

}

We draw 9 rectangles with various brush patterns.

painter.setBrush(Qt::HorPattern);
painter.drawRect(10, 15, 90, 60);

We draw a rectangle with a specific pattern. The Qt::HorPattern is a constant used to create a pattern of horizontal lines.

main.cpp

#include "brushes.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication app(argc, argv); 

  Brushes window;
  
  window.resize(350, 280);
  window.move(300, 300);    
  window.setWindowTitle("Brushes");
  window.show();
  
  return app.exec();
}

Main file.

Figure: Patterns

Donut

In the following example, we will create a donut shape.

donut.h

#pragma once

#include <QWidget>

class Donut : public QWidget
{
  Q_OBJECT   

  public:
    Donut(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

Header file.

donut.cpp

#include "donut.h"
#include <QApplication>
#include <QPainter>


Donut::Donut(QWidget *parent)
    : QWidget(parent)
{

}

void Donut::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  
  QPainter painter(this);

  painter.setPen(QPen(QBrush("#535353"), 0.5));
  painter.setRenderHint(QPainter::Antialiasing);

  int h = height();
  int w = width();

  painter.translate(QPoint(w/2, h/2));

  for (qreal rot=0; rot < 360.0; rot+=5.0 ) {
      painter.drawEllipse(-125, -40, 250, 80);
      painter.rotate(5.0);
  }
}

The "Donut" is an advanced geometrical shape resembling this kind of food. We create it by drawing 72 rotated ellipses.

painter.setRenderHint(QPainter::Antialiasing);

We will paint in antialiased mode. The rendering will be of higher quality.

int h = height();
int w = width();

painter.translate(QPoint(w/2, h/2));

These lines move the beginning of the coordinate system into the middle of the window. By default, it is positioned at 0, 0 point. In another words, at the upper left corner of the window. By moving the coordinate system, the drawing will be much easier.

for (qreal rot=0; rot < 360.0; rot+=5.0 ) {
    painter.drawEllipse(-125, -40, 250, 80);
    painter.rotate(5.0);
}

In this for cycle, we draw 72 rotated ellipses.

main.cpp

#include "donut.h"
#include <QApplication>


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Donut window;

  window.resize(350, 280);
  window.move(300, 300);  
  window.setWindowTitle("Donut");
  window.show();

  return app.exec();
}

Main file.

Shapes

The Qt4 painting API can draw various shapes. The following programming code example will show some of them.

shapes.h

#include <QWidget>

class Shapes : public QWidget
{
  Q_OBJECT  

  public:
    Shapes(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

Header file.

shapes.cpp

#include "shapes.h"
#include <QPainter>
#include <QPainterPath>


Shapes::Shapes(QWidget *parent)
    : QWidget(parent)
{

}

void Shapes::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  QPainter painter(this);

  painter.setRenderHint(QPainter::Antialiasing);
  painter.setPen(QPen(QBrush("#888"), 1));
  painter.setBrush(QBrush(QColor("#888")));

  QPainterPath path1;

  path1.moveTo(5, 5);
  path1.cubicTo(40, 5,  50, 50,  99, 99);
  path1.cubicTo(5, 99,  50, 50,  5, 5);
  painter.drawPath(path1);  

  painter.drawPie(130, 20, 90, 60, 30*16, 120*16);
  painter.drawChord(240, 30, 90, 60, 0, 16*180);
  painter.drawRoundRect(20, 120, 80, 50);

  QPolygon polygon;
  polygon << QPoint(130, 140) << QPoint(180, 170)
          << QPoint(180, 140) << QPoint(220, 110)
          << QPoint(140, 100);
  painter.drawPolygon(polygon);

  painter.drawRect(250, 110, 60, 60);

  QPointF baseline(20, 250);
  QFont font("Georgia", 55);
  QPainterPath path2;
  path2.addText(baseline, font, "Q");
  painter.drawPath(path2);

  painter.drawEllipse(140, 200, 60, 60);
  painter.drawEllipse(240, 200, 90, 60);
}

We draw nine different shapes.

QPainterPath path1;

path1.moveTo(5, 5);
path1.cubicTo(40, 5,  50, 50,  99, 99);
path1.cubicTo(5, 99,  50, 50,  5, 5);
painter.drawPath(path1);

The QPainterPath is an object used to create complex shapes. We use it to draw bezier curves.

painter.drawPie(130, 20, 90, 60, 30*16, 120*16);
painter.drawChord(240, 30, 90, 60, 0, 16*180);
painter.drawRoundRect(20, 120, 80, 50);

These code lines draw a pie, a chord and a rounded rectangle.

QPolygon polygon;
polygon << QPoint(130, 140) << QPoint(180, 170)
        << QPoint(180, 140) << QPoint(220, 110)
        << QPoint(140, 100);
painter.drawPolygon(polygon);

Here we draw a polygon consisting of five points.

QPointF baseline(20, 250);
QFont font("Georgia", 55);
QPainterPath path2;
path2.addText(baseline, font, "Q");
painter.drawPath(path2);

The Qt4 programming library can be used to create a path based on a font character.

painter.drawEllipse(140, 200, 60, 60);
painter.drawEllipse(240, 200, 90, 60);

The drawEllipse() method can be used to draw an ellipse and a circle as well. The circle is a special case of an ellipse.

main.cpp

#include "shapes.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Shapes window;

  window.resize(350, 280);
  window.move(300, 300);    
  window.setWindowTitle("Shapes");
  window.show();
  
  return app.exec();
}

Main file.
Shapes

Figure: Shapes

Gradients

In computer graphics, gradient is a smooth blending of shades from light to dark or from one colour to another. In 2D drawing programs and paint programs, gradients are used to create colourful backgrounds and special effects as well as to simulate lights and shadows. (answers.com)
The following code example will show, how to create gradients in Qt4 programming library.

gradients.h

#ifndef GRADIENT_H
#define GRADIENT_H

#include <QWidget>

class Gradient : public QWidget
{

  public:
    Gradient(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

#endif

Header file.

gradients.cpp

#include "gradients.h"
#include <QApplication>
#include <QPainter>

Gradient::Gradient(QWidget *parent)
    : QWidget(parent)
{

}

void Gradient::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  
  QPainter painter(this);

  QLinearGradient grad1(0, 20, 0, 110);

  grad1.setColorAt(0.1, Qt::black);
  grad1.setColorAt(0.5, Qt::yellow);
  grad1.setColorAt(0.9, Qt::black);

  painter.fillRect(20, 20, 300, 90, grad1);

  QLinearGradient grad2(0, 55, 250, 0);

  grad2.setColorAt(0.2, Qt::black);
  grad2.setColorAt(0.5, Qt::red);
  grad2.setColorAt(0.8, Qt::black);

  painter.fillRect(20, 140, 300, 100, grad2);
}

In the code example, we will draw two rectagles and fill them with gradients.

QLinearGradient grad1(0, 20, 0, 110);

grad1.setColorAt(0.1, Qt::black);
grad1.setColorAt(0.5, Qt::yellow);
grad1.setColorAt(0.9, Qt::black);

The colorus in a gradient are defined using stop points. The setColorAt() creates a stop point at the given position with the given colour.

painter.fillRect(20, 20, 300, 90, grad1);

We fill the rectangle with the gradient.

main.cpp

#include "gradients.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Gradient window;

  window.resize(350, 260);
  window.move(300, 300);    
  window.setWindowTitle("Gradients");
  window.show();
  
  return app.exec();
}

Main file.

Figure: Gradients

Puff

In the last example of this C++ Qt4 tutorial chapter, we create a puff effect. The example will display a growing centered text, that will gradully fade out from some point. This is a very common effect, which you can often see in flash animations on the web.

puff.h

#pragma once

#include <QWidget>

class Puff : public QWidget
{
  Q_OBJECT  

  public:
    Puff(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);
    void timerEvent(QTimerEvent *event);

  private:
    int x;
    qreal opacity;
    int timerId;
};

In the header file, we have two event handlers defined. Paint event handler and timer handler.

puff.cpp

#include "puff.h"
#include <QPainter>
#include <QTimer>
#include <QTextStream>


Puff::Puff(QWidget *parent)
    : QWidget(parent)
{
  x = 1;
  opacity = 1.0;
  timerId = startTimer(15);
}

void Puff::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);  
  
  QPainter painter(this);
  QTextStream out(stdout);

  QString text = "ZetCode";

  painter.setPen(QPen(QBrush("#575555"), 1));

  QFont font("Courier", x, QFont::DemiBold);
  QFontMetrics fm(font);
  int textWidth = fm.width(text);

  painter.setFont(font);

  if (x > 10) {
    opacity -= 0.01;
    painter.setOpacity(opacity);
  }

  if (opacity <= 0) {
    killTimer(timerId);
    out << "timer stopped\n";
  }

  int h = height();
  int w = width();

  painter.translate(QPoint(w/2, h/2));
  painter.drawText(-textWidth/2, 0, text);
}

void Puff::timerEvent(QTimerEvent *e)
{
  Q_UNUSED(e);
  
  x += 1;
  repaint();
}

This is the puff.cpp file.

Puff::Puff(QWidget *parent)
    : QWidget(parent)
{
  x = 1;
  opacity = 1.0;
  timerId = startTimer(15);
}

At the constructor, we start the timer. Each 15ms a timer event is generated.

void Puff::timerEvent(QTimerEvent *event)
{
  x += 1;
  repaint();
}

Inside the timerEvent() we increase the font size and repaint the widget.

 if (x > 10) {
   opacity -= 0.01;
   painter.setOpacity(opacity);
 }

If the font size is greater than 10 points, we gradually decrease the opacity. The text fades away.

if (opacity <= 0) {
  killTimer(timerId);
  out << "timer stopped\n";
}

If the text fades away, we kill the timer.

main.cpp

#include "puff.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication app(argc, argv); 

  Puff window;

  window.resize(350, 280);
  window.move(300, 300);      
  window.setWindowTitle("Puff");
  window.show();

  return app.exec();
}

Main file.
This chapter was about painting in Qt4.

Qt4 tutorial

Saturday, April 27, 2013

Painting in Qt4

Lines

Colours

Patterns

Donut

Shapes

Gradients

Puff

No comments:

Post a Comment