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

A custom rendered application differs from a custom annotation because you are instructing the annotation how to draw the annotation. To do this, set up the annotation in the same fashion as a custom annotation type HOWTO: Custom Web Annotations (Legacy Web Controls)

Once the steps of the other article have been completed, we will need to make a custom renderer. For this example I will make a VennDiagramAnnotation. In the static constructor of the overloaded page class, an association between renderer and annotation type (creation described in previous article) needs to be established:

C#

AnnotationRenderers.Add(typeof(VennDiagramData), new VennDiagramRenderer());

VB.NET

AnnotationRenderers.Add(GetType(VennDiagramData), New VennDiagramRenderer())

The VennDiagramRenderer class will then need to be defined. Select a preexisting annotation type and use its rendering engine. The classes RectangleRenderingEngine and TextRenderingEngine should cover the majority of possible annotations. For Venn Diagrams RectangleRenderingEngine is best:

C#

    public class VennDiagramRenderer : RectangleRenderingEngine
    {
        public VennDiagramRenderer()
            : base()
        {
 
        }
        float OverlapPercentage = .33f;
        public override void RenderAnnotation(Atalasoft.Annotate.AnnotationData annotation, RenderEnvironment e)
        {
            Graphics g = e.Graphics;
            RectangleF r = e.Graphics.VisibleClipBounds;
            Rectangle left = new Rectangle((int)r.X, (int)r.Y, (int)(r.Width * (.5+OverlapPercentage/2)), (int)r.Height);
            Rectangle right = new Rectangle((int)(r.Width * (.5-OverlapPercentage/2)), left.Y, left.Width, left.Height);
            g.FillEllipse(new SolidBrush(Color.FromArgb(127,Color.Red)), left);
            g.FillEllipse(new SolidBrush(Color.FromArgb(127,Color.Blue)), right);
        }
    } 

VB.NET

Public Class VennDiagramRenderer 
    Inherits RectangleRenderingEngine 
    
    
    Public Sub New() 
        MyBase.New()  
    End Sub 
 
    Private OverlapPercentage As Single = 0.33 
    
    Public Overloads Overrides Sub RenderAnnotation(ByVal annotation As Atalasoft.Annotate.AnnotationData, ByVal e As RenderEnvironment) 
        Dim g As Graphics = e.Graphics 
        Dim r As RectangleF = e.Graphics.VisibleClipBounds 
        Dim left As New Rectangle(CInt(r.X), CInt(r.Y), CInt((r.Width * (0.5 + OverlapPercentage / 2))), CInt(r.Height)) 
        Dim right As New Rectangle(CInt((r.Width * (0.5 - OverlapPercentage / 2))), left.Y, left.Width, left.Height) 
        g.FillEllipse(New SolidBrush(Color.FromArgb(127, Color.Red)), left) 
        g.FillEllipse(New SolidBrush(Color.FromArgb(127, Color.Blue)), right) 
    End Sub 
End Class

This renderer will use the .NET graphics object to draw a set of objects to produce the desired annotation.

Original Article

Q10249 - HOWTO: Create a Custom Rendered Annotation on the Web (Legacy Web Controls)

Last Update

2026-11-06 - TD - (Minor Fix on Intro and outdated link)