Drawing Shapes

GDI+ Tools: The Pen

Introduction

The most basic tool you can use is the pen. The GDI+ library provides a pen through the Pen class.

To obtain a pen, you can declare a variable of type Pen using one of the constructors of its class.

The primary piece of information you must specify about a pen is its color. To do this, you can use the following constructor: 

Public Sub New(color As Color)

Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim pnBorder As Pen
            Dim clr As Color = Color.Violet

            pnBorder = New Pen(clr)

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

Instead of first declaring a Color variable, you can directly define the color in the constructor.

If you just want to create a regular pen whose only known characteristic would be its color, the System.Drawing namespace provides the Pens class. The primary, and in fact only, role of the Pens class is to define a simple pen and only specify its color. To make this possible, the Pens class is equipped with only static properties that each represents the name of a color. The names are those of common colors (such as Red, Green, Blue, Yellow, Violet, et), the colors used on web pages (such as LightBlue or DarkGreen), the colors defined in Microsoft Windows (such as ActiveBorder, AppWorkspace, or ButtonFace, etc), and many others. When accessing a Pens property, it produces a Pen object. This means that you can access a pen to initialize a Pen variable. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim pnBorder As Pen
            Dim clr As Color = Color.Violet
            pnBorder = New Pen(clr)

            pnBorder = Pens.Lavender

End Sub

If you have already created a pen, to change its color, you can assign the desired color name or color value to the Pen.Color property.

The simplest pen is meant to draw a tinny line. Here is an example of a line drawn with a simple pen:

Such a simple pen is said to have a width of 1 pixel. To give you the ability to support or modify the width of a pen, the Pen class is equipped with a Width property.

When creating a pen, to specify is width, you can use the following constructor:

Public Sub New(color As Color, width As Single)

While the first argument represents the color as we saw in the previous section, the second argument specifies the width, which must be a floating-point value. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim pnBorder As Pen  = new Pen(Color.Tomato, 5.0F)

End Sub

If you have already defined a pen and you want to change its width, the Pen class provides the Width property. Using this property, to modify the width of a pen, assign a floating-point number to its Width property. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim pnBorder As Pen = New Pen(Color.Brown)
            ' Do something, if necessary
            pnBorder.Width = 3.0
            ' Do something, if necessary

End Sub

In the same way, you can change, increase, or decrease the width of a pen as often as you want. Here are examples:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim pnBorder As Pen = New Pen(Color.Brown)
            ' Do something, if necessary
            pnBorder.Width = 3.0
            ' Do something, if necessary
            pnBorder.Width = 6.0
            ' Do something, if necessary
            pnBorder.Width = 12.0
            ' Do something, if necessary
            pnBorder.Width = 26.0
            ' Do something, if necessary
            pnBorder.Width = 44.0
            ' Do something, if necessary

End Sub

We may get the following result:

If a pen has already been defined and you want to know its width, get the value of its Width property.

If you use a pen with a small width, such as 1 pixel, you may not notice how a line drawn with it starts but with a significantly wide pen, you would notice that it starts with a flat shape. An alternative is to have round, square, or triangle start. This is referred to as the start cap.

To support the starting shape of a line, the Pen class is equipped with a property named StartCap. The Pen.StartCap property is of based on the LineCap enumeration whose members are: AnchorMask, ArrowAnchor, Custom, DiamondAnchor, Flat, NoAnchor, Round, RoundAnchor, Square, SquareAnchor, and Triangle. To specify the start cap, assign the desired LineCap member to the StartCap property of the pen. Here are examples:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim pnBorder As Pen = New Pen(Color.Brown)
            pnBorder.Width = 12.0
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.AnchorMask
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.Flat
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.NoAnchor
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.Round
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.RoundAnchor
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.Square
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.SquareAnchor
            ' Do something, if necessary
            pnBorder.StartCap = System.Drawing.Drawing2D.LineCap.Triangle

End Sub

These may produce the following results:

If none of the available members of the LineCap enumeration suits you, you can define a custom cap using the CustomStartCap class.

You can also control the end cap of a line. To support this, the Pen class is equipped with a property named EndCap that also is based on the LineCap enumeration with the same value. Using a combination of the start and end caps, you can control how a line starts and how it ends. If none of the available members of the LineCap enumeration suits you, you can define a custom cap using the CustomEndCap class.

A rectangle is a geometric figure made of four sides that compose four right angles. To draw a rectangle, you can either specify the Rectangle value that encloses it, or you can define its location and its dimensions. To draw a rectangle that is enclosed in a Rectangle value, you can use the following version of the Graphics.DrawRectangle() method:

Public Sub DrawRectangle(pen As Pen, rect As Rectangle)

Remember that such a rectangle object can be illustrated as follows:

After defining a Rectangle variable, you can pass it to the method. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

        End Sub

        Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Red)
            Dim Rect As Rectangle = New Rectangle(20, 20, 248, 162)

            e.Graphics.DrawRectangle(penCurrent, Rect)

        End Sub
    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

Remember that you can also define a Pen and/or a Rectangle objects in the parentheses of the method:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Red)
            Dim Rect As Rectangle = New Rectangle(20, 20, 248, 162)

            e.Graphics.DrawRectangle(New Pen(Color.Red), _
                   New Rectangle(20, 20, 248, 162))

End Sub

This would produce:

It is (very) important to remember that the third argument of the Rectangle represents its width (and not its right) value and the fourth argument represents its height (and not its bottom) value. This is a confusing fact for those who have programmed in GDI: GDI+ defines a Rectangle differently than GDI. In fact, to determine the location and dimensions of a rectangle to draw, the Graphics class provides the following versions of the DrawRectangle() method:

Public Sub DrawRectangle(pen As Pen, x As Integer, _
		          y As Integer, width As Integer, _
		          height As Integer)
Public Sub DrawRectangle(pen As Pen, x As Single, _
		          y As Single, width As Single, _
		          height As Single)

This time, the rectangle is represented by its location with a point at (x, y) and its dimensions with the width and height argument. This can be illustrated in a Windows coordinate system as follows:

Based on this, the earlier rectangle can also be drawn with the following:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint
            e.Graphics.DrawRectangle(New Pen(Color.Red), 20, 20, 248, 162)

End Sub

A square is a rectangle whose four sides are equal.

1. Start Microsoft Visual Basic and create a new Windows Application named WeeklySales1
2. Design the form as follows:
    

   Control Name Text Label   Monday Label   Tuesday Label   Wednesday Label   Thursday Label   Friday TextBox txtMonday 0 TextBox txtTuesday 0 TextBox txtWednesday 0 TextBox txtThursday 0 TextBox txtFriday 0 Button Generate btnGenerate

3. Double-click an unoccupied area of the form and change the file as follows:
    

   Public Class Form1 Private graphDrawingArea As Graphics Private bmpDrawingArea As Bitmap Private Sub Form1_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load bmpDrawingArea = New Bitmap(Width, Height) graphDrawingArea = Graphics.FromImage(bmpDrawingArea) End Sub End Class

4. In the Method Name combo box, select Paint and implement its event as follows:
    

   Private Sub Form1_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _ Handles Me.Paint e.Graphics.DrawImage(bmpDrawingArea, 0, 0) End Sub

5. In the Class Name combo box, select btnGenerate
6. In the Method Name combo box, select Click and implement the event as follows:
    

   Private Sub btnGenerate_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles btnGenerate.Click Dim monday As Integer Dim tuesday As Integer Dim wednesday As Integer Dim thursday As Integer Dim friday As Integer Try monday = CInt(txtMonday.Text) / 100 Catch MsgBox("Invalid sales on Monday") txtMonday.Text = "0" End Try Try tuesday = CInt(txtTuesday.Text) / 100 Catch MsgBox("Invalid sales on Tuesday") txtTuesday.Text = "0" End Try Try wednesday = Integer.Parse(txtWednesday.Text) / 100 Catch MsgBox("Invalid sales on Wednesday") txtWednesday.Text = "0" End Try Try thursday = CInt(txtThursday.Text) / 100 Catch MsgBox("Invalid sales on Thursday") txtThursday.Text = "0" End Try Try friday = CInt(txtFriday.Text) / 100 Catch MsgBox("Invalid sales on Friday") txtFriday.Text = "0" End Try graphDrawingArea.Clear(BackColor) graphDrawingArea.DrawRectangle(New Pen(Color.Red), _ txtMonday.Left + 10, _ 300 - monday, 40, monday) graphDrawingArea.DrawRectangle(New Pen(Color.Blue), _ txtTuesday.Left + 10, _ 300 - tuesday, 40, tuesday) graphDrawingArea.DrawRectangle(New Pen(Color.Fuchsia), _ txtWednesday.Left + 5, _ 300 - wednesday, 40, wednesday) graphDrawingArea.DrawRectangle(New Pen(Color.Brown), _ txtThursday.Left + 5, _ 300 - thursday, 40, thursday) graphDrawingArea.DrawRectangle(New Pen(Color.Turquoise), _ txtFriday.Left + 5, _ 300 - friday, 40, friday) graphDrawingArea.DrawRectangle(New Pen(Color.Black), _ 10, 300, Width - 30, 1) Invalidate() End Sub

7. Execute the application and test the form
    
    
8. After using it, close the form

The DrawRectangle() method is used to draw one rectangle. If you plan to draw many rectangles, you can proceed in one step by using the Graphics.DrawRectangles() method. It comes in two versions whose syntaxes are:

Public Sub DrawRectangles(pen As Pen, rects As Rectangle() )
Public Sub DrawRectangles(pen As Pen, rects As RectangleF())

This method requires an array of Rectangle or RectangleF values. When executed, it draws individual rectangles using each member of the array as its own rectangle. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Red)
            Dim Rect As Rectangle() =  _
			New Rectangle(20, 20, 120, 20), _
                                    	New Rectangle(20, 50, 120, 30), _
                     		New Rectangle(20, 90, 120, 40), _
                     		New Rectangle(20, 140, 120, 60)}

            e.Graphics.DrawRectangles(penCurrent, Rect)

End Sub

This would produce:

1. To add a project, in the Solution Explorer, right-click the top node (Solution 'WeeklySales1') -> Add-> New Project...
2. Make sure Windows Application is selected, set the Name to YearlySales1 and click OK
3. Design the form as follows:
    

   Control Name Text GroupBox   Current Year's Sales Label   1st Qtr Label   2nd Qtr Label   3rd Qtr Label   4th Qtr TextBox txtCurrentQtr1 0 TextBox txtCurrentQtr2 0 TextBox txtCurrentQtr3 0 TextBox txtCurrentQtr4 0 Button Close btnClose GroupBox   Previous Year's Sales Label   1st Qtr Label   2nd Qtr Label   3rd Qtr Label   4th Qtr TextBox txtPreviousQtr1 0 TextBox txtPreviousQtr2 0 TextBox txtPreviousQtr3 0 TextBox txtPreviousQtr4 0 Button Generate btnGenerate Label   _________ Legend _________ Label lblCurYear This Year's Sales Label lblLastYear Last Year's Sales

4. Double-click an unoccupied area of the form and change the file as follows:
    

   Public Class Form1 Private graphDrawingArea As Graphics Private bmpDrawingArea As Bitmap Private Sub Form1_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load bmpDrawingArea = New Bitmap(Width, Height) graphDrawingArea = Graphics.FromImage(bmpDrawingArea) End Sub End Class

5. In Method Name combo box, select Paint and implement its event as follows:
    

   Private Sub Form1_Paint(ByVal sender As Object, _ ByVal e As System.Windows.Forms.PaintEventArgs) _ Handles Me.Paint e.Graphics.DrawImage(bmpDrawingArea, 0, 0) End Sub

6. In the Class Name combo box, select btnGenerate
7. In the Method Name combo box, select Click and implement the event as follows:
    

   Private Sub btnGenerate_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles btnGenerate.Click Dim curQtr1 As Integer Dim curQtr2 As Integer Dim curQtr3 As Integer Dim curQtr4 As Integer Dim prvQtr1 As Integer Dim prvQtr2 As Integer Dim prvQtr3 As Integer Dim prvQtr4 As Integer ' Retrieve the values of the current year's sales Try curQtr1 = CInt(txtCurrentQtr1.Text) / 100 Catch MsgBox("Invalid value for the first quater") curQtr1 = 0 End Try Try curQtr2 = CInt(txtCurrentQtr2.Text) / 100 Catch MsgBox("Invalid value for the second quater") curQtr2 = 0 End Try Try curQtr3 = CInt(txtCurrentQtr3.Text) / 100 Catch MsgBox("Invalid value for the third quater") curQtr3 = 0 End Try Try curQtr4 = CInt(txtCurrentQtr4.Text) / 100 Catch MsgBox("Invalid value for the fourth quater") curQtr4 = 0 End Try ' Create an array of Rectangle objects for the current year Dim rectCurrentYear As Rectangle() = { _ New Rectangle(txtCurrentQtr1.Left + 20, _ 380 - curQtr1, 40, curQtr1), _ New Rectangle(txtCurrentQtr2.Left + 20, _ 380 - curQtr2, 40, curQtr2), _ New Rectangle(txtCurrentQtr3.Left + 20, _ 380 - curQtr3, 40, curQtr3), _ New Rectangle(txtCurrentQtr4.Left + 20, _ 380 - curQtr4, 40, curQtr4)} ' Retrieve the values of last year's sales Try prvQtr1 = CInt(txtPreviousQtr1.Text) / 100 Catch MsgBox("Invalid value for the third quater") prvQtr1 = 0 End Try Try prvQtr2 = CInt(txtPreviousQtr2.Text) / 100 Catch MsgBox("Invalid value for the third quater") prvQtr2 = 0 End Try Try prvQtr3 = CInt(txtPreviousQtr3.Text) / 100 Catch MsgBox("Invalid value for the third quater") prvQtr3 = 0 End Try Try prvQtr4 = CInt(txtPreviousQtr4.Text) / 100 Catch MsgBox("Invalid value for the third quater") prvQtr4 = 0 End Try ' Create an array of Rectangle objects for the previous year Dim rectPreviousYear As Rectangle() = { _ New Rectangle(txtPreviousQtr1.Left + 30, _ 380 - prvQtr1, 40, prvQtr1), _ New Rectangle(txtPreviousQtr2.Left + 30, _ 380 - prvQtr2, 40, prvQtr2), _ New Rectangle(txtPreviousQtr3.Left + 30, _ 380 - prvQtr3, 40, prvQtr3), _ New Rectangle(txtPreviousQtr4.Left + 30, _ 380 - prvQtr4, 40, prvQtr4)} ' In case the user has changed the values, ' erase the previous chart graphDrawingArea.Clear(BackColor) ' Draw the chart for the previous year first to send it back graphDrawingArea.DrawRectangles(New Pen(Color.Blue), _ rectPreviousYear) ' Draw the chart for the current year in front graphDrawingArea.DrawRectangles(New Pen(Color.Red), _ rectCurrentYear) ' Draw the small rectangles of the legend graphDrawingArea.DrawRectangle(New Pen(Color.Blue), _ lblCurYear.Left - 30, _ lblCurYear.Top, 14, 10) graphDrawingArea.DrawRectangle(New Pen(Color.Red), _ lblLastYear.Left - 30, _ lblLastYear.Top, 14, 10) graphDrawingArea.DrawRectangle(New Pen(Color.Black), _ 25, 380, Width - 220, 1) Invalidate() End Sub

8. In the Class Name combo box, select btnClose
9. In the Method Name combo box, select Click and implement its event as follows:
    

   Private Sub btnClose_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) _ Handles btnClose.Click End End Sub

10. Execute the application and test the form
     
     
11. After using it, close the form

An ellipse is a closed continuous line whose points are positioned so that two points exactly opposite each other have the exact same distant from a central point. It can be illustrated as follows:

Because an ellipse can fit in a rectangle, in GDI+ programming, an ellipse is defined with regards to a rectangle it would fit in. To draw an ellipse, you can use the Graphics.DrawEllipse() method that comes in four versions whose syntaxes are:

Public Sub DrawEllipse(pen As Pen, rect As Rectangle)
Public Sub DrawEllipse(pen As Pen, rect As RectangleF)
Public Sub DrawEllipse(pen As Pen, x As Integer, _
		    y As Integer, width As Integer, height As Integer)
Public Sub DrawEllipse(pen As Pen, x As Single, _
		    y As Single, width As Single, height As Single)

The arguments of this method play the same roll as those of the Graphics.DrawRectangle() method:

Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Red)
            e.Graphics.DrawEllipse(penCurrent, New Rectangle(20, 20, 226, 144))

End Sub

A line is a junction of two points. This means that a line has a beginning and an end:

The beginning and the end are two distinct points. Based on this, a line is represented either with two Point values or by four numbers representing its values on the Cartesian axes. To draw a line, the Graphics class is equipped with the following overloaded DrawLine() method: 

Public Sub DrawLine(pen As Pen, pt1 As Point, pt2 As Point)
Public Sub DrawLine(pen As Pen, pt1 As PointF, pt2 As PointF)
Public Sub DrawLine(pen As Pen, x1 As Integer, _
		 y1 As Integer, x2 As Integer, y2 As Integer)
Public Sub DrawLine(pen As Pen, x1 As Single, _
		 y1 As Single, x2 As Single, y2 As Single)

If the line is represented with natural numbers, its origin can be specified as a Point pt1 and its end would be represented with a Point pt2. If the line is drawn using floating numbers, you can start it at one PointF pt1 and end it at another PointF pt2. Otherwise, you can specify the starting point with coordinates (x1, y1) and the end would be represented with coordinates (x2, y2). The same type of line can be drawn using decimal values from coordinates (x1, y1) to coordinates (x2, y2).

Here is an example that draws three lines:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim penCurrent As Pen = New Pen(Color.Red)
            e.Graphics.DrawLine(penCurrent, 20, 20, 205, 20)

            penCurrent = New Pen(Color.Green, 3.5)
            e.Graphics.DrawLine(penCurrent, 40, 40, 225, 40)

            penCurrent = New Pen(Color.Blue, 7.25)
            e.Graphics.DrawLine(penCurrent, 30, 60, 215, 60)

End Sub

The above DrawLine() method is used to draw one line. If you intend to draw a group of lines at once, you can use the Graphics.DrawLines() method. It is overloaded with two versions as follows:

Public Sub DrawLines(pen As Pen, points As Point())
Public Sub DrawLines(pen As Pen, points As PointF())

To use this method, you should first define an array of either Point for natural numbers that represent Cartesian coordinates or PointF for floating numbers. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

            Dim Coordinates As Point() = {New Point(20, 10), New Point(205, 20), _
                                New Point(40, 40), New Point(225, 60), _
                                New Point(30, 80), New Point(215, 100)}

            Dim penCurrent As Pen = New Pen(Color.Red)
            e.Graphics.DrawLines(penCurrent, Coordinates)

End Sub

This would produce:

A polygon is a series of connected lines with the whole shape being closed. In other words, a polygon is defined a group of lines so that, except for the first line of the group, the starting point of each line is the same as the end point of the previous line and the end point of the last line is connected to the start point of the first line.

To draw a polygon, you can use the Graphics.Polygon() method. It is overloaded with two versions as follows:

Public Sub DrawPolygon(pen As Pen, points As Point())
Public Sub DrawPolygon(pen As Pen, points As PointF())

To use this method, you can first declare a Point or PointF array and pass it as the second argument to the method. Here is an example:

Private Sub FormPaint(ByVal sender As Object, _
                              ByVal e As PaintEventArgs) _
                              Handles MyBase.Paint

    Dim pt As Point() = { _
	New Point(20, 50), New Point(180, 50), New Point(180, 20), _
               New Point(230, 70), New Point(180, 120), New Point(180, 90), _
                      New Point(20, 90)}

            Dim penCurrent As Pen = New Pen(Color.Red)
            e.Graphics.DrawPolygon(penCurrent, pt)

End Sub

This would produce: