GDI+ Text Transformation in VB.NET

In this article I will explain about Text Transformation in GDI+.
  • 3698
Download Files:
 

The ScaleTransform, RotateTransform, and TranslateTransform methods to transform text. We can also use a transformation matrix to transform text.

We create a Matrix object with the transformation properties and apply it to the surface using the Transform property of the Graphics object. Listing 10.21 creates a Matrix object and sets it as the Transform property. We then call DrawString, which draws the text on the form. To test this code, add the code to a form's paint event handler.

LISTING 10.21: Text transformation example

 

        Dim g As Graphics = e.Graphics
        Dim str As String = "Colors, fonts, and text are common" & " "
        elements of graphics programming." & "In this article, you learned " & "
        about the colors, fonts and text" & " representations in the " & "
        .NET Framework class library. " & "You learned how to create " & "these
         elements and use them in GDI+. "
        'Create a Matrix object
        Dim M As New Matrix(1, 0, 0.5F, 1, 0, 0)
        g.RotateTransform(45.0F, System.Drawing.Drawing2D.MatrixOrder.Prepend)
        g.TranslateTransform(-20, -70)
        g.Transform = M
        g.DrawString(str, New Font("Verdana", 10), New SolidBrush(Color.Blue), New Rectangle(50, 20, 200, 300))

 Figure 10.30 shows the outcome of Listing 10.21.

FIGURE-10_30.jpg

FIGURE 10.30: Using the transformation matrix to transform text

We can apply shearing and other effects by changing the values of Matrix. For example, if we change Matrix as follows:


Dim M As New Matrix(1, 0.5F, 0, 1, 0, 0)

the new code will generate Figure 10.31.

We can reverse the text just by changing the value of the Matrix object as follows:


Dim M As New Matrix(1, 1, 1, -1, 0, 0)

with the result shown in Figure 10.32.

The Significance of Transformation Order

The Matrix object can store a single transformation or a sequence of transformations. As we learned in Section 10.5, a sequence of transformations. As we learned in Section 10.5, a sequence of transformations is called a composite transformation, which is a result of multiplying the matrices of the individual transformations.

FIGURE-10_31.jpg

FIGURE 10.31: Using the transformation matrix to shear text

FIGURE-10_32.jpg

FIGURE 10.32: Using the transformation matrix to reverse text

In a composite transformation the order of the individual transformation is very important. Matrix operations are not cumulative. For example the result of a Graphics -> Rotate -> Translate -> Scale -> Graphics operation will be different from the result of a Graphics -> Scale -> Rotate -> Translate -> Graphics operation. The main reason that order is significant is that transformation like rotation and scaling are done with respect to the origin of the coordinate system. The result of scaling an object that is centered at the origin is different from the result of scaling an object that has been moved away from the origin. Similarly the result of rotating an object that is centered at the origin is different from the result of rotating an object that has been moved away from the origin.

The MatrixOrder enumeration, which is an argument to the transformation methods, represents the transformation order. It has two values: Append and Prepend.

Let's write an application to see how transformation order works. We create a
Windows application and add a MainMenu control and three menu items to the form. The MatrixOrder class is defined in the System.Drawing.Drawing2D namespace, so we also add a reference to this namespace.

Listing 10.22 draws a rectangle before and after applying a Scale -> Rotate -> Translate transformation sequence.

LISTING 10.22: Scale -> Rotate -> Translate transformation order


Imports
System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Text
Imports System.Windows.Forms

Public Class Form1

    Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        'Create a Graphics object
        Dim g As Graphics = Me.CreateGraphics()
        g.Clear(Me.BackColor)
        'Create a rectangle
        Dim rect As New Rectangle(20, 20, 100, 100)
        'Create a solid brush
        Dim brush As New SolidBrush(Color.Red)
        'Fill Rectangle
        g.FillRectangle(brush, rect)
        'Scale
        g.ScaleTransform(1.75F, 0.5F)
        'rotate
        g.RotateTransform(45.0F, MatrixOrder.Append)
        'Translate
        g.TranslateTransform(150.0F, 50.0F, MatrixOrder.Append)
        'Fill rectangle again
        g.FillRectangle(brush, rect)
        'Dispose of objects
        brush.Dispose()
        g.Dispose()
    End Sub
End Class

Figure 10.33 shows the output from Listing 10.22. The original rectangle is in the upper left; on the lower right is the rectangle after composite transformation.

Now let's change the order of transformation to Translate -> Rotate -> Scale with Append, as shown in Listing 10.23.

FIGURE-10_33.jpg

FIGURE 10.33: Scale ->Rotate -> Translate composite transformation

LISTING 10.23: Translate -> Rotate -> Scale transformation order with append


Imports
System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Text
Imports System.Windows.Forms

Public Class Form1

    Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        'Create a Graphics object
        Dim g As Graphics = Me.CreateGraphics()
        g.Clear(Me.BackColor)
        'Create a rectangle
        Dim rect As New Rectangle(20, 20, 100, 100)
        'Create a solid brush
        Dim brush As New SolidBrush(Color.Red)
        'Fill Rectangle
        g.FillRectangle(brush, rect)
        'Translate
        g.TranslateTransform(100.0F, 50.0F, MatrixOrder.Append)
        'Scale
        g.ScaleTransform(1.75F, 0.5F)
        'Rotate
        g.RotateTransform(45.0F, MatrixOrder.Append)
        'Fill rectangle again
        g.FillRectangle(brush, rect)
        'Dispose of objects
        brush.Dispose()
        g.Dispose()
    End Sub
End Class

FIGURE-10_34.jpg

FIGURE 10.34: Translate -> Rotate -> Scale composite transformation with Append

Figure 10.34 shows the output from Listing 10.23. The original rectangle is in the same place, but the transformed rectangle has moved.

Now let's keep the code from Listing 10.23 and change only the matrix transformation order from Append to Prepend, as shown in Listing 10.24.

LISTING 10.24: Translate -> Rotate -> Scale transformation order with Prepend


Imports
System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Text
Imports System.Windows.Forms

Public Class Form1

    Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        'Create a Graphics object
        Dim g As Graphics = Me.CreateGraphics()
        g.Clear(Me.BackColor)
        'Create a rectangle
        Dim rect As New Rectangle(20, 20, 100, 100)
        'Create a solid brush
        Dim brush As New SolidBrush(Color.Red)
        'Fill Rectangle
        g.FillRectangle(brush, rect)
        'Translate
        g.TranslateTransform(100.0F, 50.0F, MatrixOrder.Prepend)
        'Rotate
        g.RotateTransform(45.0F, MatrixOrder.Prepend)
        'Scale
        g.ScaleTransform(1.75F, 0.5F)
        'Fill rectangle again
        g.FillRectangle(brush, rect)
        'Dispose of objects
        brush.Dispose()
        g.Dispose()
    End Sub
End Class

The new output is shown in figure 10.35. The matrix order affects the result.

FIGURE-10_35.jpg

FIGURE 10.35: Translate -> Rotate -> Scale composite transformation with Prepend

Conclusion

Hope the article would have helped you in understanding Text Transformation in GDI+. Read other articles on GDI+ on the website.

Categories

More Articles

© 2018 DotNetHeaven. All rights reserved.