Painting in Ruby Qt

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, maximise it, or minimise 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

The end method completes painting. Any resources used while painting are released.

Patterns
Figure: Patterns

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.

Shapes
Figure: Shapes

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.

Transparent rectangles
Figure: Transparent rectangles

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.

Donut
Figure: Donut

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.

Drawing text
Figure: Drawing text

In this part of the Ruby Qt programming tutorial, we did some painting.