Painting
In this part of the Ruby Qt 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 Painter class is instrumental when we do some painting in the Qt library. Paint events are received in the paintEvent method. To do custom painting, we must reimplement this method.
Patterns
In Qt, there are various patterns, that we can use to fill the interiors of shapes.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program draws nine rectangles.
# The interiors are filled with
# different built-in patterns.
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Patterns"
resize 350, 280
move 300, 300
show
end
def paintEvent event
painter = Qt::Painter.new self
drawPatterns painter
painter.end
end
def drawPatterns painter
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
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
In the code example, we will draw nine rectangles and fill them with different brush patterns.
def paintEvent event
painter = Qt::Painter.new self
drawPatterns painter
painter.end
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 Painter object. This object is used to do all painting in Qt. The painting itself is delegated to the drawPatterns method.
painter.setPen Qt::NoPen
The pen object is used to draw outlines of the shapes. In our example we will not use a pen.
painter.setBrush Qt::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.
painter.end
Ends painting. Any resources used while painting are released.
Shapes
The Qt painting API can draw various shapes. The following programming code example will show some of them.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program draws basic shapes
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Basic shapes"
resize 350, 280
move 300, 300
show
end
def paintEvent event
painter = Qt::Painter.new self
drawShapes painter
painter.end
end
def drawShapes painter
painter.setRenderHint Qt::Painter::Antialiasing
painter.setPen Qt::Color.new 150, 150, 150
painter.setBrush Qt::Brush.new Qt::Color.new 150, 150, 150
path1 = Qt::PainterPath.new
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
points = []
points.push Qt::Point.new 130, 140
points.push Qt::Point.new 180, 170
points.push Qt::Point.new 180, 140
points.push Qt::Point.new 220, 110
points.push Qt::Point.new 140, 100
polygon = Qt::Polygon.new points
painter.drawPolygon polygon
painter.drawRect 250, 110, 60, 60
baseline = Qt::PointF.new 20, 250
font = Qt::Font.new "Georgia", 55
path2 = Qt::PainterPath.new
path2.addText baseline, font, "Q"
painter.drawPath path2
painter.drawEllipse 140, 200, 60, 60
painter.drawEllipse 240, 200, 90, 60
end
end
app = Qt::Application.new ARGV
QtApp.new
app.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 Qt::Painter::Antialiasing
We use antialiasing in the example. Antialiased shapes look better, but it takes more time to draw them.
painter.setPen Qt::Color.new 150, 150, 150 painter.setBrush Qt::Brush.new Qt::Color.new 150, 150, 150
We use a dark gray pen and brush to draw the shapes.
path1 = Qt::PainterPath.new 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 PainterPath object. The PainterPath 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.
points = [] points.push Qt::Point.new 130, 140 points.push Qt::Point.new 180, 170 points.push Qt::Point.new 180, 140 points.push Qt::Point.new 220, 110 points.push Qt::Point.new 140, 100 polygon = Qt::Polygon.new points painter.drawPolygon polygon
We use an array of five points to create a polygon.
baseline = Qt::PointF.new 20, 250 font = Qt::Font.new "Georgia", 55 path2 = Qt::PainterPath.new 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)
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program draws ten
# rectangles with different
# levels of transparency.
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Transparent rectangles"
resize 590, 90
move 300, 300
show
end
def paintEvent event
painter = Qt::Painter.new self
drawRectangles painter
painter.end
end
def drawRectangles painter
painter.setPen Qt::NoPen
for i in 1..10
painter.setBrush Qt::Brush.new Qt::Color.new 0, 0, 255, i*25
painter.drawRect 50*i, 20, 40, 40
end
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
In the example we will draw ten rectangles with different levels of transparency.
painter.setPen Qt::NoPen
We use no pen.
for i in 1..10
painter.setBrush Qt::Brush.new Qt::Color.new 0, 0, 255, i*25
painter.drawRect 50*i, 20, 40, 40
end
The last parameter of the Color object is the alpha transparency value.
Donut Shape
In the following example we create a complex shape by rotating a bunch of ellipses.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program draws a donut
# shape
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Donut"
resize 350, 280
move 300, 300
show
end
def paintEvent event
painter = Qt::Painter.new self
drawDonut painter
painter.end
end
def drawDonut painter
painter.setRenderHint Qt::Painter::Antialiasing
color = Qt::Color.new
color.setNamedColor "#333333"
pen = Qt::Pen.new color
pen.setWidth 1
painter.setPen pen
w = width
h = height
painter.translate Qt::Point.new w/2, h/2
72.times do
painter.drawEllipse -125, -40, 250, 80
painter.rotate 5.0
end
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
In this example, we create a donut. The shape resembles a cookie, hence the name donut.
color = Qt::Color.new color.setNamedColor "#333333"
We can use a hexadecimal notation to create a color object.
w = width h = height
Here we determine the width and height of the window.
painter.translate Qt::Point.new w/2, h/2
We move the coordinate system to the middle of the window. This way we make the drawing mathematically easier.
72.times do
painter.drawEllipse -125, -40, 250, 80
painter.rotate 5.0
end
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.
#!/usr/bin/ruby
# ZetCode Ruby Qt tutorial
#
# This program draws text
# on the window
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget
def initialize
super
setWindowTitle "Soulmate"
resize 370, 240
move 300, 300
show
end
def paintEvent event
painter = Qt::Painter.new self
drawText painter
painter.end
end
def drawText painter
painter.setBrush Qt::Brush.new Qt::Color.new 25, 25, 25
painter.setFont Qt::Font.new "Purisa", 10
painter.drawText Qt::Point.new(20, 30),
"Most relationships seem so transitory"
painter.drawText Qt::Point.new(20, 60),
"They're good but not the permanent one"
painter.drawText Qt::Point.new(20, 120),
"Who doesn't long for someone to hold"
painter.drawText Qt::Point.new(20, 150),
"Who knows how to love without being told"
painter.drawText Qt::Point.new(20, 180),
"Somebody tell me why I'm on my own"
painter.drawText Qt::Point.new(20, 210),
"If there's a soulmate for everyone"
end
end
app = Qt::Application.new ARGV
QtApp.new
app.exec
We draw a song lyrics on the window.
painter.setFont Qt::Font.new "Purisa", 10
We set a Purisa font for our text.
painter.drawText Qt::Point.new(20, 30),
"Most relationships seem so transitory"
The drawText method is used to draw the text.
In this part of the Ruby Qt programming tutorial, we did some painting.