Question

In this part of the Visual Basic Qyoto 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.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program draws nine rectangles.
' The interiors are filled with
' different built-in patterns.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Patterns")
    
    Me.Resize(350, 280)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent)
    
    Dim painter As New QPainter(Me)
    Me.DrawPatterns(painter)
      
    painter.End()
    
  End Sub
  
  Private Sub DrawPatterns(ByRef painter As QPainter)
  
    painter.SetPen(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)
  
  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

In the code example, we will draw nine rectangles and fill them with different brush patterns.

Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent)
  
  Dim painter As New QPainter(Me)
  Me.DrawPatterns(painter)
    
  painter.End()
  
End Sub

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(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. Brush is used to paint the insides of shapes.

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.

Figure: Patterns

Shapes

The Qyoto painting API can draw various shapes. The following programming code example will show some of them.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program draws basic shapes
' available in Qyoto.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Shapes")
    
    Me.Resize(350, 280)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent)
    
    Dim painter As New QPainter(Me)
    Me.DrawShapes(painter)
      
    painter.End()
    
  End Sub
  
  Private Sub DrawShapes(ByRef painter As QPainter)
  
    painter.SetRenderHint(QPainter.RenderHint.Antialiasing)
    painter.SetPen(New QPen(New QBrush(New QColor("Gray")), 1))
    painter.SetBrush(New QBrush(New QColor("Gray")))

    Dim path1 As 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)

    Dim polygon As New QPolygon(5)
    polygon.SetPoint(0, 130, 140)
    polygon.SetPoint(1, 180, 170)
    polygon.SetPoint(2, 180, 140)
    polygon.SetPoint(3, 220, 110)
    polygon.SetPoint(4, 140, 100)

    painter.DrawPolygon(polygon)
    painter.DrawRect(250, 110, 60, 60)

    Dim baseline As New QPointF(20, 250)
    Dim font As New QFont("Georgia", 55)
    Dim path2 As New QPainterPath()
    
    path2.AddText(baseline, font, "Q")
    painter.DrawPath(path2)

    painter.DrawEllipse(140, 200, 60, 60)
    painter.DrawEllipse(240, 200, 90, 60)
  
  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

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 QBrush(New QColor("Gray")))

We use a dark gray pen and brush to draw the shapes.

Dim path1 As 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.

Dim polygon As New QPolygon(5)
polygon.SetPoint(0, 130, 140)
polygon.SetPoint(1, 180, 170)
polygon.SetPoint(2, 180, 140)
polygon.SetPoint(3, 220, 110)
polygon.SetPoint(4, 140, 100)

painter.DrawPolygon(polygon)

Here we create a polygon.

Dim baseline As New QPointF(20, 250)
Dim font As New QFont("Georgia", 55)
Dim path2 As 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.

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)

' ZetCode Mono Visual Basic Qt tutorial
'
' This program draws ten
' rectangles with different
' levels of transparency
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Transparent rectangles")
    
    Me.Resize(590, 90)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent)
    
    Dim painter As New QPainter(Me)
    Me.DrawRectangles(painter)
      
    painter.End()
    
  End Sub
  
  Private Sub DrawRectangles(ByRef painter As QPainter)
  
    painter.SetPen(PenStyle.NoPen)

    For i As Integer = 1 To 10
      painter.SetBrush(New QBrush(New QColor(0, 0, 255, i*25)))
      painter.DrawRect(50*i, 20, 40, 40)
    Next

  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

In the example we will draw ten rectangles with different levels of transparency.

painter.SetPen(PenStyle.NoPen)

We use no pen.

For i As Integer = 1 To 10
  painter.SetBrush(New QBrush(New QColor(0, 0, 255, i*25)))
  painter.DrawRect(50*i, 20, 40, 40)
Next

The last parameter of the QColor 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.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program draws a donut
' shape
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Donut")
    
    Me.Resize(350, 280)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent)
    
    Dim painter As New QPainter(Me)
    Me.DrawDonut(painter)
      
    painter.End()
    
  End Sub
  
  Private Sub DrawDonut(ByRef painter As QPainter)
  
    Dim color As New QColor()
    color.SetNamedColor("#333333")

    Dim pen As New QPen(color)
    pen.setWidthF(0.5)
    painter.SetPen(pen)
    
    painter.SetRenderHint(QPainter.RenderHint.Antialiasing)

    Dim h As Integer = Me.Height()
    Dim w As Integer = Me.Width()
    
    painter.Translate(New QPoint(w/2, h/2))

    For rot As Integer = 1 To 360 Step 5
      painter.DrawEllipse(-125, -40, 250, 80)
      painter.Rotate(5)
    Next

  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

In this example, we create a donut. The shape resembles a cookie, hence the name donut.

Dim color As New QColor()
color.SetNamedColor("#333333")

We can use a hexadecimal notation to create a color object.

Dim h As Integer = Me.Height()
Dim w As Integer = Me.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 rot As Integer = 1 To 360 Step 5
  painter.DrawEllipse(-125, -40, 250, 80)
  painter.Rotate(5)
Next

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.

' ZetCode Mono Visual Basic Qt tutorial
'
' This program draws text
' on the window
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com


Imports Qyoto


Public Class VBQApp 
  Inherits QWidget

  Public Sub New()
  
    Me.SetWindowTitle("Unfaitful")
    
    Me.Resize(300, 280)
    Me.Move(300, 300)
    Me.Show()
    
  End Sub
  
  Protected Overrides Sub PaintEvent(ByVal e As QPaintEvent)
    
    Dim painter As New QPainter(Me)
    Me.DrawLyrics(painter)
      
    painter.End()
    
  End Sub
  
  Private Sub DrawLyrics(ByRef painter As QPainter)
  
    painter.SetBrush(New QBrush(new QColor(25, 25, 25)))
    painter.SetFont(New QFont("Purisa", 10))

    painter.DrawText(New QPoint(20, 30), _
        "I don't wanna do this anymore")
    painter.DrawText(New QPoint(20, 60), _
        "I don't wanna be the reason why")
    painter.DrawText(New QPoint(20, 90), _
        "Everytime I walk out the door")
    painter.DrawText(New QPoint(20, 120), _
        "I see him die a little more inside")
    painter.DrawText(New QPoint(20, 150), _
        "I don't wanna hurt him anymore")
    painter.DrawText(New QPoint(20, 180), _
        "I don't wanna take away his life")
    painter.DrawText(New QPoint(20, 210), _
        "I don't wanna be...") 
    painter.DrawText(New QPoint(20, 240), _
        "A murderer")

  End Sub

  Public Shared Sub Main(ByVal args() As String)
    Dim qapp As New QApplication(args)
    Dim app As New VBQApp
    QApplication.Exec()
  End Sub

End Class

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), _
    "I don't wanna do this anymore")

The DrawText() method is used to draw the text.

Figure: Drawing text

In this part of the Visual Basic Qyoto programming tutorial, we did some painting.