Product and Development Musings

Annotations in ImageMan.NET Document Edition

5. January 2010 12:08

Today we are going to kick off a series of blog posts highlighting some of the great new features in our latest version of ImageMan: ImageMan.Net Document Edition.  This first post will introduce you to the annotation features you can use to add text and drawings to images or documents. 

The Document Edition includes a rich set of annotation objects including:

    • Rectangle
    • Ellipse
    • Line
    • Polygon
    • Highlight
    • String
    • Freehand Line
    • Bezier Curve
    • Pie Shape
    • Arc
    • Sticky Note
    • Image
    • Redaction
    • Overlay
    • Text Stamp
    • Custom Mark

You can add multiple annotation objects to an image.  Once added, you can modify, move, resize and remove them easily.  We'll discuss persisting, protecting and encrypting annotated images in upcoming blog posts.  We'll also cover implementing annotation support programmatically soon, but for starters, we'll go over the Annotation control, which is the core of annotation support in ImageMan.Net, as well as the Annotation ToolStrip.

Test Driving the Annotation Features

Let's build a simple image viewer with annotation support.  I'm assuming you've already installed at least the trial version of the ImageMan.Net Document Edition.

  1. Start Visual Studio.Net (2005/2008)
  2. Create a new Windows Forms Application project (in C# or VB.Net)
  3. Name it IMAnnotate1
  4. Add the following controls to the design surface of Form1:
    - MenuStrip
  5. Add the following ImageMan.Net controls to the design surface of Form1:
    - Viewer, Annotation, Annotation ToolStrip
  6. In the Properties window, set the following properties for viewer1:
    - Dock: Fill
  7. Set the following properties for annotation1:
    - Viewer: viewer1
    - ToolStrip: annotationToolstrip1
  8. Save your work

Adding the Design Surface

If you run the application we've just created, you'll notice that the Annotation ToolStrip is pre-populated with buttons you can use to easily work with the full set of annotation objects:

Anno1

Our next step is to add a design surface.  We have two options here: we can add code to go out and retrieve an existing image and load it into the Viewer or we can create a new image.  For ease of use, let's go with the latter approach.

  1. Open Form1 in code view
  2. Add a reference to DTI.ImageMan:

[C#]

using DTI.ImageMan;

[Visual Basic]

Imports DTI.ImageMan
  1. In the Form1 Constructor (after the InitializeComponent() method), add this code to create the default design surface:

[C#]

viewer1.Images.Add(
    new ImImage(800, 1100, PixelFormat.Format24bppRgb, Color.White));

[Visual Basic]

viewer1.Images.Add(
    New ImImage(800, 1100, PixelFormat.Format24bppRgb, Color.White))

Working with the Annotation ToolStrip

Now we've got a design surface where we can add and manipulate annotation marks.  Let's add a few marks from the Annotation ToolStrip.

  1. Select the Rectangle button
  2. Left click and drag on the design surface to create a rectangle annotation mark

Notice that when you select an annotation tool on the Annotation ToolStrip, additional formatting tool buttons are dynamically added:

Anno2

The visible formatting options will change depending on the annotation tool selected. For the Rectangle annotation tool, you can modify the following properties:

  • Fore Color
  • Back Color
  • Translucent
  • Brush
  • Pen Width
  • Corner Radius
  • Filled

Working with the Annotation Marks

Once a mark has been added to an image, you can perform various actions on it.  Marks can be:

  • selected
  • dragged
  • dropped
  • reordered
  • formatted
  • moved
  • resized (for most annotation marks)
  • deleted
  • copied
  • cut
  1. Click on the Select tool on the Annotation ToolStrip:

Anno3

  1. Select the rectangle mark on the design surface by clicking anywhere inside it
  2. On the ToolStrip, select the Back Color button
  3. Select a color in the Color Dialog and click OK button
  4. On the ToolStrip, select the Pen Width button
  5. Enter a pen width of 3 and click the OK button

Anno4

Working with the Context Menu

An alternative way to create and format annotation objects is to use the right click context menu. 

  1. Right click on the design surface
  2. Select the Tools menu option
  3. Select the Note annotation tool
  4. Drag a note mark onto the design surface
  5. Type some text in the note mark

Anno5

If you want to hide the context menu, you just have to set the ShowContextMenu property on the Annotation object to false:

[C#]

annotation1.ShowContextMenu = false;

[Visual Basic]

annotation1.ShowContextMenu = False

The next article on this topic will cover saving and branding your annotated images.

Log in