Click here to Skip to main content
Click here to Skip to main content

Simple Image Annotation - How to dynamically add rotated text to an image

, 2 Jul 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Add outlined text to an image, rotate it, and move it around with the mouse.

Introduction

This is a simple demonstration of how to draw rotated text with or without an outline onto an image, and move it around with the mouse.

Background

This is a starter program which can easily grow with many options like multiple objects, save options, text change, color choice... depending on what you want to do with it, but I want to keep this example simple. I was working on a photo organization program, and wanted to have annotation as part of the program. I couldn't find a simple explanation to get started, so here it is.

Points of Interest

Drawing the Text

I used the GraphicsPath.AddString and Graphics.DrawPath methods instead of the Graphics.Drawstring because I also wanted to be able to outline the text. DrawString only fills in the text, but the GraphicsPath can be filled in or just drawn as an outline. To rotate the text, the Matrix structure's RotateAt was used.

  1. Create a Graphics object (we'll call the canvas) from a copy of the image.
  2. Set SmoothingMode to AntiAlias so the text isn't blocky.
  3. Create a GraphicsPath for the text.
  4. Rotate a Matrix by the given value at the center point of the text.
  5. Use TransformPoints to get the rotated corner points for the text bounds.
  6. Draw the path for the filled in text on the canvas.
  7. Draw the outline of the path for the text on the canvas.
  8. Now, you have an annotated image that can be drawn or saved how and where you wish.
Private Sub Form1_Paint(ByVal sender As Object, _
    ByVal e As System.Windows.Forms.PaintEventArgs) _
    Handles MyBase.Paint

    Dim tbm As Bitmap = CType(bm.Clone, Bitmap)
    Dim g As Graphics = Graphics.FromImage(tbm)
    Dim mx As Matrix = New Matrix
    Dim br As SolidBrush = New SolidBrush(Color.FromArgb(tbarTrans.Value, _
                                          Color.LightCoral))

    'Set the Points for the Text region        
    SetptsText()

    'Smooth the Text
    g.SmoothingMode = SmoothingMode.AntiAlias

    'Make the GraphicsPath for the Text
    Dim emsize As Single = Me.CreateGraphics.DpiY * pic_font.SizeInPoints / 72
    gpathText.AddString(strText, pic_font.FontFamily, CInt(pic_font.Style), _
        emsize, New RectangleF(ptText.X, ptText.Y, szText.Width, szText.Height), _
        StringFormat.GenericDefault)

    'Draw a copy of the image to the Graphics Object canvas
    g.DrawImage(CType(bm.Clone, Bitmap), 0, 0)

    'Rotate the Matrix at the center point
    mx.RotateAt(tbarRotate.Value, _
        New Point(ptText.X + (szText.Width / 2), _
        ptText.Y + (szText.Height / 2)))

    'Get the points for the rotated text bounds
    mx.TransformPoints(ptsText)

    'Transform the Graphics Object with the Matrix
    g.Transform = mx

    'Draw the Rotated Text
    g.FillPath(br, pathText)
    If chkAddOutline.Checked Then
        Using pn As Pen = New Pen(Color.FromArgb(tbarTrans.Value, Color.White), 1)
            g.DrawPath(pn, pathText)
        End Using
    End If

    'Draw the box if the mouse is over the Text
    If MouseOver Then
        g.ResetTransform()
        g.DrawPolygon(ptsTextPen, ptsText)
    End If

    'Draw the whole thing to the form
    e.Graphics.DrawImage(tbm, 10, 10)

    tbm.Dispose()
    g.Dispose()
    mx.Dispose()
    br.Dispose()
    pathText.Dispose()

End Sub

Tracking the Text Location

To know if the mouse is over the text, I could have gotten the bounds for the rotated text and used the Rectangle.Contains(pt.x,pt.y) in the mouse events, but that creates hits when you are not really over the actual text when it is rotated. To check if a point is over the text itself, take the corners of the rectangular bounds of the text as a point array and use a rotated Matrix to transform the points. Create a Region from a GraphicsPath made from the the rotated points, and check if the mouse location is within the Region with the IsVisible method.

Public Function IsMouseOverText(ByVal X As Integer, ByVal Y As Integer) As Boolean
 'Make a Graphics Path from the rotated ptsText. 
 Using gp As New GraphicsPath()
     gp.AddPolygon(ptsText)

     'Convert to Region.
     Using TextRegion As New Region(gp)
         'Is the point inside the region.
         Return TextRegion.IsVisible(X, Y)
     End Using

 End Using
End Function

Moving the Text

To be able to move the text, it has to be layered separate from the image. Each time the text is drawn, use a clean copy of the original image and draw the text in the new location. Use the MouseUp, MouseDown, and MouseMove events, and the boolean MouseOver and MouseMoving variables and the MouseOffset point variable.

In the MouseDown event, flag the MouseMoving variable and set the MouseOffset point to the difference between the current cursor location and the upper left corner of the text.

Private Sub Form1_MouseDown(ByVal sender As Object, _
            ByVal e As System.Windows.Forms.MouseEventArgs) _
            Handles Me.MouseDown

    'Check if the pointer is over the Text
    If IsMouseOverText(e.X - 10, e.Y - 10) Then
        MouseMoving = True
        'Determine the upper left corner point 
        'from where the mouse was clicked
        MovingOffset.X = e.X - ptText.X
        MovingOffset.Y = e.Y - ptText.Y
    Else
        MouseMoving = False
    End If

End Sub

If the mouse is moving, but the button is not pressed, set the MouseOver flag so the selection box will be drawn or not depending on whether the mouse is over the text. If the button is pressed, set the upper left corner of the text to the new location minus the MouseOffset.

Private Sub Form1_MouseMove(ByVal sender As Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseMove

    'Check if the pointer is over the Text
    If IsMouseOverText(e.X - 10, e.Y - 10) Then
        If Not MouseOver Then
            MouseOver = True
            Me.Refresh()
        End If
    Else
        If MouseOver Then
            MouseOver = False
            Me.Refresh()
        End If
    End If

    If e.Button = Windows.Forms.MouseButtons.Left And MouseMoving Then
        ptText.X = CInt(e.X - MovingOffset.X)
        ptText.Y = CInt(e.Y - MovingOffset.Y)
        Me.Refresh()
    End If
End Sub

If the mouse button is released, set MouseMoving to False.

Private Sub Form1_MouseUp(ByVal sender As Object, _
        ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp
    MouseMoving = False
    Me.Refresh()
End Sub

Enjoy!

History

  • Version 1.0 - June 2008 - First trial.
  • Version 2.0 - July 2008 - While fixing a bug in determining if the mouse is over the text, I figured out a simpler method of checking if the mouse is inside the text region.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

SSDiver2112
Software Developer
United States United States
I first got hooked on programing with the TI994A. After it finally lost all support I reluctantly moved to the Apple IIe. Thank You BeagleBros for getting me through. I wrote programs for my Scuba buisness during this time. Currently I am a Database manager and software developer. I started with VBA and VB6 and now having fun with VB.NET

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey22-Feb-12 0:37 
Questionhow to move multiple objects seperately? PinmemberMember 81827079-Sep-11 5:59 
AnswerRe: how to move multiple objects seperately? PinmemberSSDiver21129-Sep-11 7:02 
QuestionHow to save the position of the rotated text PinmemberMember 39763562-Jul-11 3:00 
AnswerRe: How to save the position of the rotated text PinmemberSSDiver21126-Jul-11 13:54 
GeneralRe: How to save the position of the rotated text PinmemberMember 39763566-Jul-11 21:50 
GeneralRe: How to save the position of the rotated text PinmemberSSDiver21129-Jul-11 7:06 
QuestionRegarding Size of the Image PinmemberMember 397635624-Jun-11 7:43 
QuestionImage Resize PinmemberMember 397635621-Jun-11 13:04 
AnswerRe: Image Resize PinmemberSSDiver211221-Jun-11 15:20 
GeneralRe: Image Resize PinmemberMember 397635622-Jun-11 0:21 
QuestionHow to Change font using Font Dialog? [modified] PinmemberMember 397635620-Jun-11 23:30 
AnswerRe: How to Change font using Font Dialog? PinmemberSSDiver211221-Jun-11 4:20 
GeneralRe: How to Change font using Font Dialog? PinmemberMember 397635621-Jun-11 6:04 
AnswerRe: How to Change font using Font Dialog? PinmemberSSDiver211221-Jun-11 4:43 
GeneralRe: How to Change font using Font Dialog? PinmemberMember 397635621-Jun-11 6:54 
GeneralRe: How to Change font using Font Dialog? PinmemberSSDiver211221-Jun-11 8:23 
QuestionHow to save? PinmemberMember 397635628-May-11 1:00 
AnswerRe: How to save? PinmemberSSDiver211229-May-11 19:49 
GeneralRe: How to save? [modified] PinmemberMember 397635629-May-11 23:39 
GeneralRe: How to save? PinmemberSSDiver211230-May-11 15:25 
GeneralRe: How to save? PinmemberMember 397635630-May-11 21:29 
GeneralRe: How to save? PinmemberSSDiver211231-May-11 3:13 
GeneralRe: How to save? [modified] PinmemberMember 397635631-May-11 4:27 
GeneralRe: How to save? PinmemberSSDiver211231-May-11 7:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 2 Jul 2008
Article Copyright 2008 by SSDiver2112
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid