Lesson 29: Mastering Text Drawing in VB2022

Learn GDI+ techniques for rendering text with custom fonts, styles, and effects in VB.NET applications

Key Takeaway

Text drawing in VB2022 is more than just displaying strings - it's about creating visually engaging content with precise positioning, custom styles, and advanced effects.

Welcome to Lesson 29 of our Visual Basic 2022 Tutorial! Building on our graphics knowledge from previous lessons, we'll now explore how to draw text using VB2022's powerful GDI+ tools. Text rendering is essential for creating user interfaces, labels, annotations, and custom text effects.

29.1 Core Text Drawing Concepts

Text drawing in VB2022 revolves around the DrawString method, which requires three essential components: a font, a brush, and a position.

1. Font Objects

Define text appearance with typeface, size, and style

2. Brush Objects

Determine text color and fill patterns

3. Positioning

Precise control over text location and alignment

Text drawing concepts
Figure 29.1: Core elements of text drawing

Pro Tip: Coordinate System

Remember that in VB2022's coordinate system, text positioning starts from the top-left corner of the text baseline.

29.2 Drawing Text: Practical Examples

Create text with various fonts, colors, and effects using the DrawString method:

Example 29.1: Basic Text Drawing

This example demonstrates how to draw basic text with a custom font and color:

BasicText.vb
Private Sub BtnDrawText_Click(sender As Object, e As EventArgs) Handles BtnDrawText.Click
    ' Create graphics object
    Dim g As Graphics = Me.CreateGraphics()
    
    ' Create a font
    Dim textFont As New Font("Arial", 24, FontStyle.Bold)
    
    ' Create a brush
    Dim textBrush As New SolidBrush(Color.DarkBlue)
    
    ' Define text and position
    Dim myText As String = "Hello VB2022!"
    Dim positionX As Integer = 50
    Dim positionY As Integer = 100
    
    ' Draw the text
    g.DrawString(myText, textFont, textBrush, positionX, positionY)
    
    ' Clean up resources
    textFont.Dispose()
    textBrush.Dispose()
    g.Dispose()
End Sub

Text Drawing Result

Basic text drawing
Figure 29.2: Basic text drawing with custom font

Example 29.2: Centered Text

Learn how to center text both horizontally and vertically:

CenteredText.vb
Private Sub BtnCenterText_Click(sender As Object, e As EventArgs) Handles BtnCenterText.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim text As String = "Centered Text"
    Dim textFont As New Font("Times New Roman", 28, FontStyle.Bold)
    Dim textBrush As New SolidBrush(Color.DarkGreen)
    
    ' Create StringFormat for alignment
    Dim format As New StringFormat()
    format.Alignment = StringAlignment.Center
    format.LineAlignment = StringAlignment.Center
    
    ' Create rectangle for centering
    Dim rect As New Rectangle(0, 0, Me.ClientSize.Width, Me.ClientSize.Height)
    
    ' Draw centered text
    g.DrawString(text, textFont, textBrush, rect, format)
    
    ' Clean up
    textFont.Dispose()
    textBrush.Dispose()
    format.Dispose()
    g.Dispose()
End Sub

Centered Text Result

Centered text
Figure 29.3: Perfectly centered text

29.3 Advanced Text Techniques

VB2022 allows for creative text implementations with various effects:

1 Text Rotation

Draw text at any angle using transformations

2 Gradient Text

Apply smooth color transitions to text

3 Text Effects

Create outlines, shadows, and other effects

Example 29.3: Rotated Text

Create text rotated at a 45-degree angle:

RotatedText.vb
Private Sub BtnRotateText_Click(sender As Object, e As EventArgs) Handles BtnRotateText.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim text As String = "Rotated Text"
    Dim textFont As New Font("Impact", 28, FontStyle.Regular)
    Dim textBrush As New SolidBrush(Color.DarkMagenta)
    
    ' Save original graphics state
    Dim originalState As Drawing2D.GraphicsState = g.Save()
    
    ' Move rotation point to (200, 150)
    g.TranslateTransform(200, 150)
    
    ' Rotate 45 degrees
    g.RotateTransform(45)
    
    ' Draw text at rotation point
    g.DrawString(text, textFont, textBrush, 0, 0)
    
    ' Restore original state
    g.Restore(originalState)
    
    ' Clean up
    textFont.Dispose()
    textBrush.Dispose()
    g.Dispose()
End Sub

Rotated Text Result

Rotated text
Figure 29.4: Text rotated at 45 degrees

Example 29.4: Gradient Text

Create text with a smooth color gradient:

GradientText.vb
Private Sub BtnGradientText_Click(sender As Object, e As EventArgs) Handles BtnGradientText.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim text As String = "Gradient Text"
    Dim textFont As New Font("Verdana", 32, FontStyle.Bold)
    
    ' Create gradient brush
    Dim gradientBrush As New Drawing2D.LinearGradientBrush(
        New Point(50, 100),
        New Point(350, 100),
        Color.Red,
        Color.Blue)
    
    ' Draw text with gradient
    g.DrawString(text, textFont, gradientBrush, 50, 100)
    
    ' Clean up
    textFont.Dispose()
    gradientBrush.Dispose()
    g.Dispose()
End Sub

Gradient Text Result

Gradient text
Figure 29.5: Text with gradient color effect

Example 29.5: Text with Background

Create text with a background rectangle for better visibility:

TextBackground.vb
Private Sub BtnTextBackground_Click(sender As Object, e As EventArgs) Handles BtnTextBackground.Click
    Dim g As Graphics = Me.CreateGraphics()
    Dim text As String = "Text with Background"
    Dim textFont As New Font("Georgia", 20, FontStyle.Bold)
    Dim textBrush As New SolidBrush(Color.White)
    Dim bgBrush As New SolidBrush(Color.FromArgb(150, 0, 0, 150))
    
    ' Measure text size
    Dim textSize As SizeF = g.MeasureString(text, textFont)
    
    ' Define background rectangle
    Dim bgRect As New Rectangle(50, 100, textSize.Width + 20, textSize.Height + 10)
    
    ' Draw background
    g.FillRectangle(bgBrush, bgRect)
    
    ' Draw text
    g.DrawString(text, textFont, textBrush, 60, 105)
    
    ' Clean up
    textFont.Dispose()
    textBrush.Dispose()
    bgBrush.Dispose()
    g.Dispose()
End Sub

Text with Background Result

Text with background
Figure 29.6: Text with semi-transparent background

Text Drawing Summary

Master these essential techniques for drawing text in VB2022:

Concept Description Key Methods
Basic Text Simple text rendering DrawString(), Font, Brush
Text Alignment Positioning text precisely StringFormat, MeasureString
Text Effects Rotated and transformed text RotateTransform, TranslateTransform
Gradient Text Color transitions in text LinearGradientBrush
Text Background Enhancing text visibility FillRectangle, MeasureString

Best Practices

Always dispose of Graphics, Font, and Brush objects. Use MeasureString for precise text positioning.

Performance Tips

For frequently updated text, create a Bitmap object and draw to it, then render the bitmap to the screen.

Advanced Features

Explore PathGradientBrush for radial gradients, and GraphicsPath for text outlines and complex shapes.

Practical Exercises

Apply your text drawing knowledge with these hands-on exercises:

Exercise 1: Digital Clock

Create a digital clock that displays the current time in large, centered digits that update every second.

Exercise 2: Text Animation

Develop an application where text moves across the screen with smooth animation using a Timer control.

Exercise 3: Custom Label Generator

Build a program that lets users enter text, choose font, color, and position, then renders it on the form.

Exercise 4: Circular Text

Create an application that draws text along a circular path using trigonometric functions.

Exercise 5: Text Effects Gallery

Implement a gallery showing different text effects: outline, shadow, gradient, and 3D text.

Challenge Exercise: Text Editor Preview

Create a WYSIWYG text editor preview that shows how text will appear with different fonts, sizes, and styles.

Next Lesson

Learn how to draw polygons and pie shapes in Lesson 30: Drawing Polygon & Pie.

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