Lesson 30: Drawing Polygon & Pie in VB2022

Master advanced shape creation with GDI+ for complex graphics and data visualizations

Key Takeaway

Polygons and pie charts are essential for creating complex graphics and data visualizations. Master these techniques to elevate your VB2022 applications.

Welcome to Lesson 30 of our Visual Basic 2022 Tutorial! Building on our graphics knowledge from previous lessons, we'll now explore how to draw polygons and pie charts using VB2022's powerful GDI+ tools. These techniques are crucial for creating complex shapes, data visualizations, and custom UI elements.

30.1 Drawing Polygons

A polygon is a closed shape with three or more straight sides. To draw a polygon in VB2022, you need to define an array of points that form the vertices of the shape.

1. Define Points

Create Point objects for each vertex of your polygon

2. Create Point Array

Group all points into a single array

3. Draw the Polygon

Use DrawPolygon with a Pen and the point array

Figure 30.1: Polygon with defined vertices

Pro Tip: Polygon Creation

Points must be defined in either clockwise or counter-clockwise order to form a proper polygon.

Example 30.1: Drawing a Triangle

This example demonstrates how to draw a basic triangle:

DrawTriangle.vb
Private Sub BtnDrawTriangle_Click(sender As Object, e As EventArgs) Handles BtnDrawTriangle.Click
    ' Create graphics object
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Define triangle vertices
    Dim point1 As New Point(100, 50)
    Dim point2 As New Point(50, 150)
    Dim point3 As New Point(150, 150)
    
    ' Create point array
    Dim trianglePoints As Point() = {point1, point2, point3}
    
    ' Create a pen
    Dim myPen As New Pen(Color.DarkBlue, 3)
    
    ' Draw the triangle
    g.DrawPolygon(myPen, trianglePoints)
    
    ' Clean up resources
    myPen.Dispose()
    g.Dispose()
End Sub

Triangle Drawing Result

Figure 30.2: Triangle drawn with VB2022

Example 30.2: Drawing a Pentagon

Create a regular pentagon using trigonometric functions:

DrawPentagon.vb
Private Sub BtnDrawPentagon_Click(sender As Object, e As EventArgs) Handles BtnDrawPentagon.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim centerX As Integer = 150
    Dim centerY As Integer = 150
    Dim radius As Integer = 100
    Dim sides As Integer = 5
    Dim points(sides - 1) As Point
    
    ' Calculate vertices
    For i As Integer = 0 To sides - 1
        Dim angle As Double = Math.PI / 2 + i * 2 * Math.PI / sides
        points(i) = New Point(
            centerX + radius * Math.Cos(angle),
            centerY + radius * Math.Sin(angle)
        )
    Next
    
    ' Draw pentagon
    Dim myPen As New Pen(Color.DarkGreen, 3)
    g.DrawPolygon(myPen, points)
    
    ' Clean up
    myPen.Dispose()
    g.Dispose()
End Sub

Pentagon Drawing Result

Figure 30.3: Pentagon drawn with VB2022

30.2 Drawing Pie Shapes

Pie shapes are essential for creating pie charts and circular progress indicators. The DrawPie method requires a bounding rectangle and two angles.

1 Start Angle

Beginning angle (0° = 3 o'clock position)

2 Sweep Angle

Direction and size of the pie segment

3 Bounding Rectangle

Defines the size and position of the ellipse that contains the pie

Sweep Angle Start Angle (0°)
Figure 30.4: Pie segment with start and sweep angles

Example 30.3: Basic Pie Segment

Draw a pie segment starting at 0° with a 90° sweep:

DrawPie.vb
Private Sub BtnDrawPie_Click(sender As Object, e As EventArgs) Handles BtnDrawPie.Click
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Define bounding rectangle
    Dim rect As New Rectangle(50, 50, 200, 200)
    
    ' Start angle (0° = east direction)
    Dim startAngle As Single = 0
    
    ' Sweep angle (90° clockwise)
    Dim sweepAngle As Single = 90
    
    ' Create pen
    Dim myPen As New Pen(Color.DarkBlue, 3)
    
    ' Draw pie segment
    g.DrawPie(myPen, rect, startAngle, sweepAngle)
    
    ' Clean up
    myPen.Dispose()
    g.Dispose()
End Sub

Pie Segment Result

Figure 30.5: 90° pie segment

Example 30.4: Complete Pie Chart

Combine multiple pie segments to create a complete pie chart:

PieChart.vb
Private Sub BtnDrawPieChart_Click(sender As Object, e As EventArgs) Handles BtnDrawPieChart.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim rect As New Rectangle(50, 50, 200, 200)
    Dim startAngle As Single = 0
    
    ' Segment 1: 40% - Blue
    Dim sweep1 As Single = 360 * 0.4
    g.DrawPie(New Pen(Color.Blue, 2), rect, startAngle, sweep1)
    startAngle += sweep1
    
    ' Segment 2: 25% - Green
    Dim sweep2 As Single = 360 * 0.25
    g.DrawPie(New Pen(Color.Green, 2), rect, startAngle, sweep2)
    startAngle += sweep2
    
    ' Segment 3: 20% - Red
    Dim sweep3 As Single = 360 * 0.2
    g.DrawPie(New Pen(Color.Red, 2), rect, startAngle, sweep3)
    startAngle += sweep3
    
    ' Segment 4: 15% - Orange
    Dim sweep4 As Single = 360 * 0.15
    g.DrawPie(New Pen(Color.Orange, 2), rect, startAngle, sweep4)
    
    ' Clean up
    g.Dispose()
End Sub

Pie Chart Result

Figure 30.6: Complete pie chart with multiple segments

Example 30.5: Progress Pie

Create an animated progress indicator using a pie shape:

ProgressPie.vb
Private progressValue As Integer = 0
Private progressTimer As New Timer()

Private Sub BtnStartProgress_Click(sender As Object, e As EventArgs) Handles BtnStartProgress.Click
    progressValue = 0
    progressTimer.Interval = 100 ' 100 ms
    AddHandler progressTimer.Tick, AddressOf UpdateProgress
    progressTimer.Start()
End Sub

Private Sub UpdateProgress(sender As Object, e As EventArgs)
    If progressValue >= 100 Then
        progressTimer.Stop()
        RemoveHandler progressTimer.Tick, AddressOf UpdateProgress
        Return
    End If
    
    progressValue += 1
    Me.Invalidate() ' Force redraw
End Sub

Private Sub MainForm_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
    Dim g As Graphics = e.Graphics
    Dim rect As New Rectangle(50, 50, 200, 200)
    
    ' Draw background circle
    g.DrawEllipse(Pens.LightGray, rect)
    
    ' Draw progress pie
    Dim sweepAngle As Single = 360 * (progressValue / 100)
    g.DrawPie(New Pen(Color.Blue, 3), rect, -90, sweepAngle)
    
    ' Draw progress text
    Dim text As String = $"{progressValue}%"
    Dim font As New Font("Arial", 24, FontStyle.Bold)
    Dim textSize As SizeF = g.MeasureString(text, font)
    Dim textX As Single = rect.X + (rect.Width - textSize.Width) / 2
    Dim textY As Single = rect.Y + (rect.Height - textSize.Height) / 2
    g.DrawString(text, font, Brushes.Black, textX, textY)
    
    font.Dispose()
End Sub

Progress Pie Result

50%
Figure 30.7: Animated progress pie at 50%

Polygon & Pie Summary

Master these essential techniques for drawing polygons and pie shapes in VB2022:

Concept Description Key Methods
Polygons Closed shapes with 3+ sides DrawPolygon(), Point array
Pie Segments Circular segments for charts DrawPie(), startAngle, sweepAngle
Regular Polygons Equal sides and angles Trigonometric calculations
Pie Charts Data visualization tool Multiple DrawPie calls
Animated Progress Dynamic pie indicators Timer control, Paint event

Best Practices

Always dispose of Graphics and Pen objects. Use the Paint event for persistent graphics.

Performance Tips

For complex or animated graphics, use double buffering to prevent flickering.

Advanced Features

Explore FillPolygon and FillPie methods for solid shapes with various brushes.

Practical Exercises

Apply your polygon and pie drawing knowledge with these hands-on exercises:

Exercise 1: Shape Generator

Create an application that lets users generate regular polygons with configurable sides, size, and colors.

Exercise 2: Data Visualization

Build a program that reads data from a file or database and visualizes it as a pie chart with a legend.

Exercise 3: Interactive Polygon Editor

Develop an interface where users can click to add polygon vertices and see the shape update in real-time.

Exercise 4: Star Shapes

Implement a star polygon generator that creates stars with configurable points and depth.

Exercise 5: Donut Chart

Create a donut chart visualization by combining multiple pie segments with different radii.

Challenge Exercise: Shape Morphing

Create an animation that smoothly morphs between different polygon shapes using interpolation.

Next Lesson

Learn how to add colors to your shapes in Lesson 31: Coloring Shapes.

Related Resources

VB6 Tutorial

Mastering VB6 Programming

Explore Tutorials

Visual Basic Examples

Practical VB code samples for real-world applications

View Examples

Excel VBA Tutorial

Learn how to automate Excel by creating VBA macros

Learn More