Painting in Qyoto
In this part of the Qyoto C# programming tutorial we will do some painting.
When do we need to paint? There are situations, when we need to create a widget from scratch. In such a case, we need to do painting. Or we want to create charts, special ornaments, effects or widget enhancements.
The QPainter class is instrumental when we do some painting in the Qyoto library. Paint events are received in the PaintEvent() method. To do custom painting, we must reimplement this method.
Patterns
In Qyoto, there are various patterns, that we can use to fill the interiors of shapes.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# tutorial
*
* This program draws nine rectangles.
* The interiors are filled with
* different built-in patterns.
*
* @author jan bodnar
* website zetcode.com
* last modified April 2009
*/
public class QyotoApp : QMainWindow {
public QyotoApp() {
SetWindowTitle("Patterns");
Resize(350, 280);
Move(300, 300);
Show();
}
protected override void PaintEvent(QPaintEvent e)
{
QPainter painter = new QPainter(this);
DrawPatterns(painter);
painter.End();
}
void DrawPatterns(QPainter painter) {
painter.SetPen(Qt.PenStyle.NoPen);
painter.SetBrush(Qt.BrushStyle.HorPattern);
painter.DrawRect(10, 15, 90, 60);
painter.SetBrush(Qt.BrushStyle.VerPattern);
painter.DrawRect(130, 15, 90, 60);
painter.SetBrush(Qt.BrushStyle.CrossPattern);
painter.DrawRect(250, 15, 90, 60);
painter.SetBrush(Qt.BrushStyle.Dense7Pattern);
painter.DrawRect(10, 105, 90, 60);
painter.SetBrush(Qt.BrushStyle.Dense6Pattern);
painter.DrawRect(130, 105, 90, 60);
painter.SetBrush(Qt.BrushStyle.Dense5Pattern);
painter.DrawRect(250, 105, 90, 60);
painter.SetBrush(Qt.BrushStyle.BDiagPattern);
painter.DrawRect(10, 195, 90, 60);
painter.SetBrush(Qt.BrushStyle.FDiagPattern);
painter.DrawRect(130, 195, 90, 60);
painter.SetBrush(Qt.BrushStyle.DiagCrossPattern);
painter.DrawRect(250, 195, 90, 60);
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
In the code example, we will draw nine rectangles and fill them with different brush patterns.
protected override void PaintEvent(QPaintEvent e)
{
QPainter painter = new QPainter(this);
DrawPatterns(painter);
painter.End();
}
When the window area needs to be redrawn, the PaintEvent() method is called. This happens, when we resize the window, maximize it or minimize it etc. Inside this method, we create the QPainter object. This object is used to do all painting in Qyoto. The painting itself is delegated to the DrawPatterns() method. The End() method releases resources used when doing painting.
painter.SetPen(Qt.PenStyle.NoPen);
The pen object is used to draw outlines of the shapes. In our example we will not use a pen.
painter.SetBrush(Qt.BrushStyle.HorPattern);
We set a horizontal pattern as a brush.
painter.DrawRect(10, 15, 90, 60);
We draw a rectangle, with the current pen and brush. The first two parameters of the method are the x, y coordinates. The last two parameters are the width and height of the rectangle.
Shapes
The Qyoto painting API can draw various shapes. The following programming code example will show some of them.
using System;
using System.Collections.Generic;
using Qyoto;
/**
* ZetCode Qyoto C# tutorial
*
* This program draws basic shapes
* available in Qyoto.
*
* @author jan bodnar
* website zetcode.com
* last modified April 2009
*/
public class QyotoApp : QMainWindow {
public QyotoApp() {
SetWindowTitle("Shapes");
Resize(350, 280);
Move(300, 300);
Show();
}
protected override void PaintEvent(QPaintEvent e)
{
QPainter painter = new QPainter(this);
DrawShapes(painter);
painter.End();
}
void DrawShapes(QPainter painter) {
painter.SetRenderHint(QPainter.RenderHint.Antialiasing);
painter.SetPen(new QPen(new QBrush(new QColor("Gray")), 1));
painter.SetBrush(new QColor("Gray"));
QPainterPath path1 = new QPainterPath();
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);
List points = new List();
points.Add(new QPoint(130, 140));
points.Add(new QPoint(180, 170));
points.Add(new QPoint(180, 140));
points.Add(new QPoint(220, 110));
points.Add(new QPoint(140, 100));
QPolygon polygon = new QPolygon(points);
painter.DrawPolygon(polygon);
painter.DrawRect(250, 110, 60, 60);
QPointF baseline = new QPointF(20, 250);
QFont font = new QFont("Georgia", 55);
QPainterPath path2 = new QPainterPath();
path2.AddText(baseline, font, "Q");
painter.DrawPath(path2);
painter.DrawEllipse(140, 200, 60, 60);
painter.DrawEllipse(240, 200, 90, 60);
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
In this code example, we draw nine different shapes on the window. A complex path, a pie, a chord, a rounded rectangle, a polygon, a rectangle, a character based shape, a circle and an ellipse.
painter.SetRenderHint(QPainter.RenderHint.Antialiasing);
We use antialiasing in the example. Antialiased shapes look better, but it takes more time to draw them.
painter.SetPen(new QPen(new QBrush(new QColor("Gray")), 1));
painter.SetBrush(new QColor("Gray"));
We use a dark gray pen and brush to draw the shapes.
QPainterPath path1 = new QPainterPath(); path1.MoveTo(5, 5); path1.CubicTo(40, 5, 50, 50, 99, 99); path1.CubicTo(5, 99, 50, 50, 5, 5); painter.DrawPath(path1);
The first complex shape is created with the QPainterPath object. The QPainterPath class provides a container for painting operations. A painter path is an object composed of a number of graphical building blocks, such as rectangles, ellipses, lines, and 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 three lines draw a pie, a chord and a rounded rectangle.
Listpoints = new List (); points.Add(new QPoint(130, 140)); points.Add(new QPoint(180, 170)); points.Add(new QPoint(180, 140)); points.Add(new QPoint(220, 110)); points.Add(new QPoint(140, 100)); QPolygon polygon = new QPolygon(points); painter.DrawPolygon(polygon);
We use a list of five points to create a polygon.
QPointF baseline = new QPointF(20, 250);
QFont font = new QFont("Georgia", 55);
QPainterPath path2 = new QPainterPath();
path2.AddText(baseline, font, "Q");
painter.DrawPath(path2);
These lines create a character based shape.
painter.DrawEllipse(140, 200, 60, 60); painter.DrawEllipse(240, 200, 90, 60);
These two lines create a circle and an ellipse respectively.
Transparent rectangles
Transparency is the quality of being able to see through a material. The easiest way to understand transparency is to imagine a piece of glass or water. Technically, the rays of light can go through the glass and this way we can see objects behind the glass.
In computer graphics, we can achieve transparency effects using alpha compositing. Alpha compositing is the process of combining an image with a background to create the appearance of partial transparency. The composition process uses an alpha channel. (wikipedia.org, answers.com)
using System;
using Qyoto;
/**
* ZetCode Qyoto C# tutorial
*
* This program draws ten
* rectangles with different
* levels of transparency
*
* @author jan bodnar
* website zetcode.com
* last modified April 2009
*/
public class QyotoApp : QMainWindow {
public QyotoApp() {
SetWindowTitle("Transparent rectangles");
Resize(590, 90);
Move(300, 300);
Show();
}
protected override void PaintEvent(QPaintEvent e)
{
QPainter painter = new QPainter(this);
DrawRectangles(painter);
painter.End();
}
void DrawRectangles(QPainter painter) {
painter.SetPen(Qt.PenStyle.NoPen);
for (int i=1; i<11; i++) {
painter.SetBrush(new QColor(0, 0, 255, i*25));
painter.DrawRect(50*i, 20, 40, 40);
}
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
In the example we will draw ten rectangles with different levels of transparency.
painter.SetPen(Qt.PenStyle.NoPen);
We use no pen.
for (int i=1; i<11; i++) {
painter.SetBrush(new QColor(0, 0, 255, i*25));
painter.DrawRect(50*i, 20, 40, 40);
}
The last parameter of the QColor object is the alpha transparency value.
Donut Shape
In the following example we create a complex shape by rotating a bunch of ellipses.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# tutorial
*
* This program draws a donut
* shape
*
* @author jan bodnar
* website zetcode.com
* last modified April 2009
*/
public class QyotoApp : QMainWindow {
public QyotoApp() {
SetWindowTitle("Donut");
Resize(350, 280);
Move(300, 300);
Show();
}
protected override void PaintEvent(QPaintEvent e)
{
QPainter painter = new QPainter(this);
DrawDonut(painter);
painter.End();
}
void DrawDonut(QPainter painter) {
QColor color = new QColor();
color.SetNamedColor("#333333");
painter.SetPen(new QPen(color, 0.5));
painter.SetRenderHint(QPainter.RenderHint.Antialiasing);
int h = Height();
int w = Width();
painter.Translate(new QPoint(w/2, h/2));
for (double rot=0; rot < 360.0; rot+=5.0 ) {
painter.DrawEllipse(-125, -40, 250, 80);
painter.Rotate(5.0);
}
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
In this example, we create a donut. The shape resembles a cookie, hence the name donut.
QColor color = new QColor();
color.SetNamedColor("#333333");
We can use a hexadecimal notation to create a color object.
int h = Height(); int w = Width();
Here we determine the width and height of the window.
painter.Translate(new QPoint(w/2, h/2));
We move the coordinate system to the middle of the window. This way we make the drawing mathematically easier.
for (double rot=0; rot < 360.0; rot+=5.0 ) {
painter.DrawEllipse(-125, -40, 250, 80);
painter.Rotate(5.0);
}
We draw an ellipse object 72 times. Each time, we rotate the ellipse by 5 degrees. This will create our donut shape.
Drawing text
In the last example, we are going to draw text on the window.
using System;
using Qyoto;
/**
* ZetCode Qyoto C# tutorial
*
* This program draws text
* on the window
*
* @author jan bodnar
* website zetcode.com
* last modified April 2009
*/
public class QyotoApp : QMainWindow {
public QyotoApp() {
SetWindowTitle("Soulmate");
Resize(370, 240);
Move(300, 300);
Show();
}
protected override void PaintEvent(QPaintEvent e)
{
QPainter painter = new QPainter(this);
DrawLyrics(painter);
painter.End();
}
void DrawLyrics(QPainter painter) {
painter.SetBrush(new QColor(25, 25, 25));
painter.SetFont(new QFont("Purisa", 10));
painter.DrawText(new QPoint(20, 30),
"Most relationships seem so transitory");
painter.DrawText(new QPoint(20, 60),
"They're good but not the permanent one");
painter.DrawText(new QPoint(20, 120),
"Who doesn't long for someone to hold");
painter.DrawText(new QPoint(20, 150),
"Who knows how to love without being told");
painter.DrawText(new QPoint(20, 180),
"Somebody tell me why I'm on my own");
painter.DrawText(new QPoint(20, 210),
"If there's a soulmate for everyone");
}
public static int Main(String[] args) {
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
}
}
We draw a song lyrics on the window.
painter.SetFont(new QFont("Purisa", 10));
We set a Purisa font for our text.
painter.DrawText(new QPoint(20, 30),
"Most relationships seem so transitory");
The DrawText() method is used to draw the text.
In this part of the Qyoto C# programming tutorial, we did some painting.