Legacy Controls NOTICE

This article references our legacy Web Forms Web Viewing controls (WebImageViewer, WebAnnotationViewer, WebThumbnailViewer). It is preserved for archival purposes, but support strongly recommends using our modern HTML5 web controls: WebDocumentViewer, WebDocumentThumbnailer instead.

INFO: WebDocumentViewer Whitepaper - Getting Started With Web Viewing

Main Article Content

To create custom annotations in DotImage for use on our WebAnnotationViewer you will need to create a class library in your ASP.NET applications’ solution to contain all of the Atalasoft-overloaded objects that are necessary. To do this:

1. Select your solution in the solution explorer, right-click and select “Add New Item”.
2. Select “Class Library”

Once you have a class library you will need to create an overload of an AnnotationData class. RectangleData is used as a base object for a HiliteData in the following example:

C#

namespace CustomAnnotations
 {
      public class HiliteData : RectangleData
      {
            public HiliteData() : base()
            {
         Fill = new AnnotationBrush(Color.FromArgb(170, Color.Yellow));
         this.Outline = new AnnotationPen(Color.Transparent);
            }
            public HiliteData(SerializationInfo info, StreamingContext context) : base(info, context)
            {
            }
      }
}

VB.NET

Namespace CustomAnnotations
    Public Class HiliteData
        Inherits RectangleData
        Public Sub New()
            MyBase.New()
            Fill = New AnnotationBrush(Color.FromArgb(170, Color.Yellow))
            Me.Outline = New AnnotationPen(Color.Transparent)
        End Sub
        Public Sub New(ByVal info As SerializationInfo, ByVal context As StreamingContext)
            MyBase.New(info, context)
        End Sub
    End Class
End Namespace

The ASP.NET application will then need a reference to the class library. Once it has reference to the library, a static constructor for the page will need to be made. In the static constructor you will need to add to the list of AnnotationRenderers using this method call:

C#

AnnotationRenderers.Add(typeof(HiliteData), new RectangleRenderingEngine());

VB.NET

AnnotationRenderers.Add(GetType(HiliteData), New RectangleRenderingEngine())

The final step is to add the annotation to the viewer on the javascript side:

Javascript

function HiliteAnnotation()
{
    WebAnnotationViewer1.setInteractMode(AnnotationInteractMode.Author);
    WebAnnotationViewer1.CreateAnnotation('CustomAnnotations.HiliteData, myClassLibraryName');
    WebAnnotationViewer1.AnnotationCreated = OnAnnotationCreated;
}

Upon running the application an annotation should be able to be applied via mouse events like a normal annotation.

To create a custom rendered annotation, please continue to HOWTO: Create a Custom Rendered Annotation on the Web (Legacy Web Controls)

Original Article

Q10248 - HOWTO: Custom Web Annotations (Legacy Web Controls)

Last Update

2026-11-06 - TD - (Minor Fix on Intro)