Question

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.

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.

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.

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.

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.

Figure: Drawing text

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