The Arthur Paint System

Gradient Brushes

With Qt 4 it is possible to fill shapes using gradient brushes. A gradient in this case is used to describe the transition from one color at a given point to different color at another point. A gradient can span from one color to another or over a number of colors by specifying multiple colors at positions in the gradient area. Qt 4 supports linear, radial, and conical gradients.

Linear gradients are specified using two control points. Setting a linear gradient brush is done by creating a QLinearGradient object and setting it as a brush.

 QLinearGradient gradient(0, 0, 100, 100);
 gradient.setColorAt(0, Qt::red);
 gradient.setColorAt(0.5, Qt::green);
 gradient.setColorAt(1, Qt::blue);
 painter.setBrush(gradient);
 painter.drawRect(0, 0, 100, 100);

The code shown above produces a pattern as show in the following pixmap:

Radial gradients are specified using a center, a radius, and a focal point. Setting a radial brush is done by creating a QRadialGradient object and setting it as a brush.

 QRadialGradient gradient(50, 50, 50, 30, 30);
 gradient.setColorAt(0.2, Qt::white);
 gradient.setColorAt(0.8, Qt::green);
 gradient.setColorAt(1, Qt::black);
 painter.setBrush(gradient);
 painter.drawEllipse(0, 0, 100, 100);

The code shown above produces a pattern as shown in the following pixmap:

Conical gradients are specified using a center and a start angle. Setting a conical brush is done by creating a QConicalGradient object and setting it as a brush.

 QConicalGradient gradient(60, 40, 0);
 gradient.setColorAt(0, Qt::black);
 gradient.setColorAt(0.4, Qt::green);
 gradient.setColorAt(0.6, Qt::white);
 gradient.setColorAt(1, Qt::black);
 painter.setBrush(gradient);
 painter.drawEllipse(0, 0, 100, 100);

The code shown above produces a pattern as shown in the following pixmap:

Alpha-Blended Drawing

With Qt 4 we support alpha-blended outlining and filling. The alpha channel of a color is defined through QColor. The alpha channel specifies the transparency effect, 0 represents a fully transparent color, while 255 represents a fully opaque color. For example:

 // Specfiy semi-transparent red
 painter.setBrush(QColor(255, 0, 0, 127));
 painter.drawRect(0, 0, width()/2, height());

 // Specify semi-transparend blue
 painter.setBrush(QColor(0, 0, 255, 127));
 painter.drawRect(0, 0, width(), height()/2);

The code shown above produces the following output:

Alpha-blended drawing is supported on Windows, Mac OS X, and on X11 systems that have the X Render extension installed.

 // One line without anti-aliasing
 painter.drawLine(0, 0, width()/2, height());

 // One line with anti-aliasing
 painter.setRenderHint(QPainter::Antialiasing);
 painter.drawLine(width()/2, 0, width()/2, height());

 QPainterPath path;
 path.addRect(20, 20, 60, 60);
 path.addBezier(0, 0,  99, 0,  50, 50,  99, 99);
 path.addBezier(99, 99,  0, 99,  50, 50,  0, 0);
 painter.drawPath(path);

 QPixmap buffer(size());
 QPainter painter(&buffer);

 // Paint code here

 painter.end();
 bitBlt(this, 0, 0, &buffer);

 QPainter painter(this);

 // Paint code here

 painter.end();

 unbufferedWidget->setAttribute(Qt::WA_PaintOnScreen);

 QLinearGradient gradient(0, 0, 100, 100);
 gradient.setColorAt(0, Qt::blue);
 gradient.setColorAt(1, Qt::red);
 painter.setPen(QPen(gradient, 0));
 for (int y=fontSize; y<100; y+=fontSize)
     drawText(0, y, text);

 QImage image(100, 100, 32);
 QPainter painter(&image);

 // painter commands.

 painter.end();

     QSvgWidget window(":/files/spheres.svg");
     window.show();