2D Painting Example

Helper Class Implementation

The constructor of the class sets up the resources it needs to paint content onto a widget:

 Helper::Helper()
 {
     QLinearGradient gradient(QPointF(50, -20), QPointF(80, 20));
     gradient.setColorAt(0.0, Qt::white);
     gradient.setColorAt(1.0, QColor(0xa6, 0xce, 0x39));

     background = QBrush(QColor(64, 32, 64));
     circleBrush = QBrush(gradient);
     circlePen = QPen(Qt::black);
     circlePen.setWidth(1);
     textPen = QPen(Qt::white);
     textFont.setPixelSize(50);
 }

The actual painting is performed in the paint() function. This takes a QPainter that has already been set up to paint onto a paint device (either a QWidget or a QGLWidget), a QPaintEvent that provides information about the region to be painted, and a measure of the elapsed time (in milliseconds) since the paint device was last updated.

 void Helper::paint(QPainter *painter, QPaintEvent *event, int elapsed)
 {
     painter->fillRect(event->rect(), background);
     painter->translate(100, 100);

We begin painting by filling in the region contained in the paint event before translating the origin of the coordinate system so that the rest of the painting operations will be displaced towards the center of the paint device.

We draw a spiral pattern of circles, using the elapsed time specified to animate them so that they appear to move outward and around the coordinate system's origin:

     painter->save();
     painter->setBrush(circleBrush);
     painter->setPen(circlePen);
     painter->rotate(elapsed * 0.030);

     qreal r = elapsed/1000.0;
     int n = 30;
     for (int i = 0; i < n; ++i) {
         painter->rotate(30);
         qreal radius = 0 + 120.0*((i+r)/n);
         qreal circleRadius = 1 + ((i+r)/n)*20;
         painter->drawEllipse(QRectF(radius, -circleRadius,
                                     circleRadius*2, circleRadius*2));
     }
     painter->restore();

Since the coordinate system is rotated many times during this process, we save() the QPainter's state beforehand and restore() it afterwards.

     painter->setPen(textPen);
     painter->setFont(textFont);
     painter->drawText(QRect(-50, -50, 100, 100), Qt::AlignCenter, "Qt");
 }

We draw some text at the origin to complete the effect.

 class Helper;
 class QPaintEvent;

 class Widget : public QWidget
 {
     Q_OBJECT

 public:
     Widget(Helper *helper, QWidget *parent);

 public slots:
     void animate();

 protected:
     void paintEvent(QPaintEvent *event);

 private:
     Helper *helper;
     int elapsed;
 };

 Widget::Widget(Helper *helper, QWidget *parent)
     : QWidget(parent), helper(helper)
 {
     elapsed = 0;
     setFixedSize(200, 200);
 }

 void Widget::animate()
 {
     elapsed = (elapsed + qobject_cast<QTimer*>(sender())->interval()) % 1000;
     repaint();
 }

 void Widget::paintEvent(QPaintEvent *event)
 {
     QPainter painter;
     painter.begin(this);
     painter.setRenderHint(QPainter::Antialiasing);
     helper->paint(&painter, event, elapsed);
     painter.end();
 }

 class Helper;
 class QPaintEvent;
 class QWidget;

 class GLWidget : public QGLWidget
 {
     Q_OBJECT

 public:
     GLWidget(Helper *helper, QWidget *parent);

 public slots:
     void animate();

 protected:
     void paintEvent(QPaintEvent *event);

 private:
     Helper *helper;
     int elapsed;
 };

 GLWidget::GLWidget(Helper *helper, QWidget *parent)
     : QGLWidget(QGLFormat(QGL::SampleBuffers), parent), helper(helper)
 {
     elapsed = 0;
     setFixedSize(200, 200);
     setAutoFillBackground(false);
 }

 void GLWidget::animate()
 {
     elapsed = (elapsed + qobject_cast<QTimer*>(sender())->interval()) % 1000;
     repaint();
 }

 void GLWidget::paintEvent(QPaintEvent *event)
 {
     QPainter painter;
     painter.begin(this);
     painter.setRenderHint(QPainter::Antialiasing);
     helper->paint(&painter, event, elapsed);
     painter.end();
 }

 class Window : public QWidget
 {
     Q_OBJECT

 public:
     Window();

 private:
     Helper helper;
 };

 Window::Window()
     : QWidget()
 {
     Widget *native = new Widget(&helper, this);
     GLWidget *openGL = new GLWidget(&helper, this);
     QLabel *nativeLabel = new QLabel(tr("Native"));
     nativeLabel->setAlignment(Qt::AlignHCenter);
     QLabel *openGLLabel = new QLabel(tr("OpenGL"));
     openGLLabel->setAlignment(Qt::AlignHCenter);

     QGridLayout *layout = new QGridLayout;
     layout->addWidget(native, 0, 0);
     layout->addWidget(openGL, 0, 1);
     layout->addWidget(nativeLabel, 1, 0);
     layout->addWidget(openGLLabel, 1, 1);
     setLayout(layout);

     QTimer *timer = new QTimer(this);
     connect(timer, SIGNAL(timeout()), native, SLOT(animate()));
     connect(timer, SIGNAL(timeout()), openGL, SLOT(animate()));
     timer->start(50);

     setWindowTitle(tr("2D Painting on Native and OpenGL Widgets"));
 }