Draw rotated text in VB/ASP.NET using the Matrix class

While working on 2D drawings in VB.NET, you might find yourself in a situation where you may want to rotate a text or any other object on the drawing canvas. I discovered this technique when I was trying to draw my text vertically from bottom to top and the System.Drawing.StringFormat class’s built in vertical text format would only support top to bottom layout. Then I discovered the System.Drawing.Drawing2D.Matrix class which is used for geometric transformation. Using the Matrix class you can rotate the drawing canvas to any desired angle, draw the text/object and then rotate it back to the original position.

Example of rotated text:

I have implemented the drawing by using ASP.NET web application where the drawing is generated by an aspx page. To view the image in web browser, you just need to create an HTML image tag on a new page and set the image source(src) to the .aspx file. The .aspx file code to generate a sample PNG file is given below. The main functionality for rotating the text is implemented in the RotateString subroutine which is provided with the text, rotation angle, and the x and y coordinates.

Imports System.Drawing
Imports System.IO
Imports System.Drawing.Drawing2D

Partial Public Class TextImageDraw
    Inherits System.Web.UI.Page

    'Dimensions of the bitmap
    Const DRAWING_HEIGHT As Integer = 300
    Const DRAWING_WIDTH As Integer = 300

    Dim bitmap As New Bitmap(DRAWING_WIDTH, DRAWING_HEIGHT)
    Dim myDrawing As Graphics = Graphics.FromImage(bitmap)

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim myDrawingBackgroundColor As New SolidBrush(Color.AliceBlue)
        'Fill Drawing Background
        myDrawing.FillRectangle(myDrawingBackgroundColor, 0, 0, DRAWING_WIDTH, DRAWING_HEIGHT)

        myDrawing.TextRenderingHint = Text.TextRenderingHint.AntiAlias

        Dim myText As String = "   web3o.blogspot.com"

        'Text Rotation Cordinates
        Dim xCordinate As Integer = DRAWING_WIDTH / 2
        Dim yCordinate As Integer = DRAWING_HEIGHT / 2

        'Draw Rotation Center
        myDrawing.DrawEllipse(Pens.Black, New Rectangle(xCordinate - 1, yCordinate - 1, 3, 3))

        'Draw Header Text
        Dim headingText As String = "Rotating Text"
        Dim headingFont As Font = New Font("arial", FontSize.XLarge, FontStyle.Regular)
        Dim headingTextWidth As Double = myDrawing.MeasureString(headingText, headingFont).Width
        Dim headingTextHeight As Double = myDrawing.MeasureString(headingText, headingFont).Height
        myDrawing.DrawString(headingText, headingFont, Brushes.Red, _
                             (DRAWING_WIDTH - headingTextWidth) / 2, 2)

        'Draw Text in 360 degrees with 30 degree interval
        For angle = 0 To 330 Step 30
            RotateString(myText, angle, xCordinate, yCordinate)
        Next

        'Draw Footer Text
        myDrawing.DrawString(headingText, headingFont, Brushes.Red, _
                            (DRAWING_WIDTH - headingTextWidth) / 2, _
                            DRAWING_HEIGHT - headingTextHeight - 2)

        'Set smoothing mode for the drawing to Anti-alias
        myDrawing.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias

        'Write the image to browser...
        Response.ClearContent()
        Response.ContentType = "image/png"
        Dim mem As New MemoryStream()
        bitmap.Save(mem, System.Drawing.Imaging.ImageFormat.Png)
        mem.WriteTo(Response.OutputStream)
        myDrawing.Dispose()
        bitmap.Dispose()
    End Sub

    Private Sub RotateString(ByVal Text As String, ByVal angle As Integer, _
                             ByVal x As Integer, ByVal y As Integer)
        Dim myFont As Font = New Font("arial", FontSize.XLarge, FontStyle.Regular)
        Dim myColor As SolidBrush = New SolidBrush(Color.Black)
        ' Make a rotation matrix
        Dim myMatrix As New Matrix
        myMatrix.RotateAt(angle * -1, New Point(x, y)) 'Rotate drawing
        myDrawing.Transform = myMatrix
        myDrawing.DrawString(Text, myFont, myColor, x, y) 'Draw the text string
        myMatrix.RotateAt(angle, New Point(x, y)) 'Rotate back
        myDrawing.Transform = myMatrix
    End Sub

End Class

You can just copy the RotateString subroutine to your code and pass the Graphics class object along with other parameters to draw the rotated string on it.

del.icio.us Tags: ASP.NEt,VB.NET,Rotate Text,Matrix Transform