Table of Contents




Overview





This is a simple application for creating consistent resizable arrow pointers for highlighting areas in your illustrations and diagrams. These arrow pointers are fully resizable, in a choice of forecolors and backcolors, can display multiline text, and can be dragged to point in any direction. 
The designer is intuitive and easy to use to create a unique arrow pointer, with a consistent theme. When you save your arrow pointer image, it will save to a semi-transparent PNG file, and what you see is what you get.
This application uses GDI+ and Transformations to create the arrow pointer image and rotate it to the angle you've chosen. There's a label in the designer which tells you the angle your arrow pointer is pointing towards, if exact degrees are necessary. 
Using GDI+, these are high quality images, with your specified backcolor and your specified text color. The text drawn is centred in the 'writeable' region of the arrow pointer. The arrow pointer has a black 1 pixel border.

Often in courses run by academic establishments, you need to submit a lot of diagrams in your assignment documents, and it's often useful to highlight areas in these diagrams. Diagrams are more attractive when you use a consistent highlighting theme, and that is what this application provides...





↑ Back to top



The arrowImage() Function



''' <summary>
''' arrowImage() Function
''' </summary>
''' <returns>An unrotated arrow pointer bitmap, as designed</returns>
Private Function arrowImage() As Bitmap
    Dim aw As Integer = Math.Floor(nudThickness.Value / 4)
    Dim ah As Integer = 50 + Math.Floor(nudThickness.Value / 5)
    Dim v As Integer = CInt(nudThickness.Value)
  
    Dim img As New Bitmap(Me.radius - 6, v + aw * 2)
    Dim gr As Graphics = Graphics.FromImage(img)
    gr.CompositingQuality = Drawing2D.CompositingQuality.HighQuality
    gr.InterpolationMode = Drawing2D.InterpolationMode.HighQualityBicubic
  
    Dim polygon() As Point = New Point() {New Point(0, (img.Height / 2) + 1),
                                            New Point(ah, 0),
                                            New Point(ah, aw),
                                            New Point(img.Width - 1, aw),
                                            New Point(img.Width - 1, img.Height - aw),
                                            New Point(ah, img.Height - aw),
                                            New Point(ah, img.Height),
                                            New Point(0, (img.Height / 2) + 1)}
    gr.FillPolygon(New SolidBrush(DirectCast(cboBackColor.SelectedItem, ColorComboBoxItem).color), polygon)
    gr.DrawPolygon(Pens.Black, polygon)
  
    Dim s() As String = txtCaption.Lines
    If s.Length > 0 Then
        Dim h As Integer = TextRenderer.MeasureText(s(0), Me.Font).Height
        Dim th As Integer = h * s.Length
        Dim tw As Integer = 0
        For Each line As String In s
            If TextRenderer.MeasureText(line, Me.Font).Width > tw Then
                tw = TextRenderer.MeasureText(line, Me.Font).Width
            End If
        Next
        Dim x As Integer
        Dim y As Integer
        If pointerAngle() > 180 Then
            x = ah + CInt(((img.Width - (ah - 5)) - tw) / 2)
            y = aw + CInt((v - th) / 2)
        Else
            x = CInt(((img.Width - (ah - 5)) - tw) / 2) - img.Width
            y = aw + CInt((v - th) / 2) - img.Height
        End If
  
        Dim m As New Drawing2D.Matrix
        If pointerAngle() < 180 Then
            m.Rotate(180)
            gr.Transform = m
        End If
  
        For Each line As String In s
            gr.DrawString(line, Me.Font, New SolidBrush(DirectCast(cboTextColor.SelectedItem, ColorComboBoxItem).color), x, y)
            y += h
        Next
  
    End If
  
    Return img
  
End Function




↑ Back to top


Conclusion 


GDI+ in VB.Net Windows Forms Applications can be easily used to create dynamic, flexible and consistent graphics. This example uses Transformations alongside regular GDI+ methods. Using a rotation transformation, it's possible to rotate the complete arrow image to be either drawn on the designer form or saved to a file.

Downloads


Download here...
Alternative download...


Previous TechNet version:


https://social.technet.microsoft.com/wiki/contents/articles/27067.image-arrow-pointers.aspx