Implementing User Defined Objects With LEADTOOLS Annotations

Summary

You can easily create your own annotation objects with the LEADTOOLS Annotations framework. This tutorial shows how to create two new annotations objects and how to write the required designer for them to plug these objects into the LEADTOOLS Annotations Automation framework.

Start by creating a new HTML file with the following markup:

JavaScript Example
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <title>Demo</title> 
   <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
   <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 
<style> #imageViewerDiv { border: 1px solid #000000; width: 400px; height: 400px; background-color: #7F7F7F; } </style> 
</head> 
<body onload="pageLoad()"> 
   <div id="imageViewerDiv"></div> 
</body> 
</html>

Add script tags, inside the page's head tag, for the LEADTOOLS JavaScript libraries. NOTE: In this example, the LEADTOOLS .js files are located in a Scripts subfolder:

JavaScript Example
<script type="text/javascript" src="Scripts/Leadtools.js"></script> 
<script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script> 
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Core.js"></script> 
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Automation.js"></script> 
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Designers.js"></script> 
<script type="text/javascript" src="Scripts/Leadtools.Annotations.Rendering.JavaScript.js"></script> 
<script type="text/javascript" src="Scripts/Leadtools.Annotations.JavaScript.js"></script>

The object being created is a simple object, a triangle. This object will have three points for the end points of the triangle and it will use a stroke for the triangle edges and a fill for the interior.

We need to create a custom annotation object type. Since a triangle is a polygon with only three points, we can derive one from the AnnPolylineObject class. Add the following to your script tag:

JavaScript Example
//////////////////////////////////////////////////////////////////////////////// 
// AnnTriangleObject 
AnnTriangleObject = function AnnTriangleObject() { 
   AnnTriangleObject.initializeBase(this); 
   this.set_isClosed(true); // triangle is a closed figure 
   this.setId(-99); // set the object id 
   this.set_tag(null); 
} 
AnnTriangleObject.prototype = { 
   create: function AnnTriangleObject$create() { 
      // define the custom annotation object (the triangle is a polyline with only 3 points) 
      return new AnnTriangleObject(); 
   } 
} 
AnnTriangleObject.registerClass('AnnTriangleObject', lt.Annotations.Core.AnnPolylineObject);

Since there are no existing draw and edit designers that can be used with our AnnTriangleObject class, we need to create our own. First, create the draw designer class, derived from AnnDrawDesigner. Add the following to your script tag, after the AnnTriangleObject code:

JavaScript Example
//////////////////////////////////////////////////////////////////////////////// 
// AnnTriangleDrawDesigner 
AnnTriangleDrawDesigner = function AnnTriangleDrawDesigner(automationControl, container, annPolyineObject) { 
   AnnTriangleDrawDesigner.initializeBase(this, [automationControl, container, annPolyineObject]); 
} 
AnnTriangleDrawDesigner.prototype = { 
   // override the onPointerDown method and add 3 points for our triangle 
   onPointerDown: function AnnTriangleDrawDesigner$onPointerDown(sender, e) { 
      var handled = AnnTriangleDrawDesigner.callBaseMethod(this, 'onPointerDown', [sender, e]); 
      if (this.get_targetObject().get_points().get_count() < 3) { 
         this.get_targetObject().set_tag('drawing'); 
         if (e.get_button() === lt.Annotations.Core.AnnMouseButton.left) { 
            if (this.startWorking()) { 
               this.get_targetObject().get_points().add(e.get_location()); 
            } 
            handled = true; 
         } 
      } 
      return handled; 
   }, 
                
   // override the onPointerUp method and end the drawing when we have our 3 points 
   onPointerUp: function AnnTriangleDrawDesigner$onPointerUp(sender, e) { 
      var handled = AnnTriangleDrawDesigner.callBaseMethod(this, 'onPointerUp', [sender, e]); 
      handled = true; 
      if (this.get_targetObject().get_points().get_count() >= 3) { 
         this.get_targetObject().set_tag(null); 
         this.endWorking(); 
      } 
                      
      this.invalidate(lt.LeadRectD.empty); 
      return handled; 
   } 
} 
AnnTriangleDrawDesigner.registerClass('AnnTriangleDrawDesigner', lt.Annotations.Designers.AnnDrawDesigner);

Next, create the edit designer class, derived from the AnnPolylineEditDesigner" class. Add the following code to your script, after the AnnTriangleDrawDesigner code:

JavaScript Example
//////////////////////////////////////////////////////////////////////////////// 
// AnnTriangleEditDesigner 
// We won't actually need to do any customization of this class. 
AnnTriangleEditDesigner = function AnnTriangleEditDesigner(automationControl, container, annPolylineObject) { 
   AnnTriangleEditDesigner.initializeBase(this, [automationControl, container, annPolylineObject]); 
} 
AnnTriangleEditDesigner.registerClass('AnnTriangleEditDesigner', lt.Annotations.Designers.AnnPolylineEditDesigner);

Now we can create a custom renderer for our AnnTriangleObject, derived from the AnnPolylineEditDesigner" class. Add the following code to your script, after the AnnTriangleDrawDesigner code:

JavaScript Example
//////////////////////////////////////////////////////////////////////////////// 
// AnnTriangleRenderer 
AnnTriangleRenderer = function AnnTriangleRenderer() { 
   AnnTriangleRenderer.initializeBase(this); 
} 
AnnTriangleRenderer.prototype = { 
                
   // Override the Render method in order to draw the 3 points as the user creates them.     
   render: function AnnTriangleRenderer$render(mapper, annObject) { 
      AnnTriangleRenderer.callBaseMethod(this, 'render', [mapper, annObject]); 
      // if we are finished 'drawing', allow the base class AnnPolylineObjectRenderer to handle the job 
      if (annObject.get_tag() !== 'drawing') { 
         return; 
      } 
      var engine = Type.safeCast(this.get_renderingEngine(), lt.Annotations.Rendering.AnnHtml5RenderingEngine); 
      if (engine != null) { 
         var context = engine.get_context(); 
         if (context != null) { 
            context.save(); 
            var points = mapper.pointsFromContainerCoordinates(annObject.get_points().toArray(), annObject.get_fixedStateOperations()); 
            lt.Annotations.Rendering.AnnHtml5RenderingEngine.setStroke(context, lt.Annotations.Core.AnnStroke.create(lt.Annotations.Core.AnnSolidColorBrush.create('green'), lt.LeadLengthD.create(1))); 
            context.beginPath(); 
            for (var x = 0; x < points.length; x++) { 
               var point = points[x]; 
               if (!point.get_isEmpty()) { 
                  var rect = lt.LeadRectD.create(point.get_x() - 10, point.get_y() - 10, 20, 20); 
                  lt.Annotations.Rendering.AnnHtml5RenderingEngine.drawEllipse(context, rect); 
               } 
            } 
            context.closePath(); 
            context.stroke(); 
            context.restore(); 
         } 
      } 
   } 
} 
AnnTriangleRenderer.registerClass('AnnTriangleRenderer', lt.Annotations.Rendering.AnnPolylineObjectRenderer);

The final step is to write the code that glues the LEADTOOLS ImageViewer and the automated annotation objects together.

JavaScript Example
// Create the custom automation object and hook the designers 
function createTriangleAutomationObject(annObject) { 
   var automationObj = new lt.Annotations.Automation.AnnAutomationObject(); 
   automationObj.set_id(annObject.get_id()); 
   automationObj.set_name("Triangle"); 
   automationObj.set_drawDesignerType(AnnTriangleDrawDesigner); // hook the custom draw designer 
   automationObj.set_editDesignerType(AnnTriangleEditDesigner); // hook the custom edit designer 
   automationObj.set_runDesignerType(lt.Annotations.Designers.AnnRunDesigner); 
                      
   // set up the thumbs 
   var annTriangleRenderer = new AnnTriangleRenderer(); 
   var annPolylineRenderer = this._renderingEngine.get_renderers()[lt.Annotations.Core.AnnObject.polylineObjectId]; 
   annTriangleRenderer.set_locationsThumbStyle(annPolylineRenderer.get_locationsThumbStyle()); 
   annTriangleRenderer.set_rotateCenterThumbStyle(annPolylineRenderer.get_rotateCenterThumbStyle()); 
   annTriangleRenderer.set_rotateGripperThumbStyle(annPolylineRenderer.get_rotateGripperThumbStyle()); 
                      
   this._renderingEngine.get_renderers()[annObject.get_id()] = annTriangleRenderer;   // hook the custom renderer 
   automationObj.set_objectTemplate(annObject); 
   return automationObj; 
} 
                   
function newTriangle() { 
   // Create the triangle object 
   var triangle = new AnnTriangleObject(); 
   var brush = new lt.Annotations.Core.AnnSolidColorBrush(); 
   brush.set_color("blue"); 
   triangle.set_fill(brush); 
   // Create a user defined automation object 
   var automation = createTriangleAutomationObject(triangle); 
   this._manager.get_objects().add(automation); 
} 
                   
function pageLoad() { 
   // Create the viewer 
   var createOptions = new lt.Controls.ImageViewerCreateOptions(document.getElementById('imageViewerDiv')); 
   this._viewer = new lt.Controls.ImageViewer(createOptions); 
             
   // Watch item changed event to set container size and the current object id when the image get loaded 
   _viewer.add_itemChanged(automationControl_ItemChanged); 
             
   // Set the image URL - load using browser support 
   this._viewer.set_imageUrl("http://demo.leadtools.com/images/jpeg/cactus.jpg"); 
   // Set viewer image resolution 
   var resolution = lt.LeadSizeD.create(72, 72); 
   _viewer.set_imageResolution(resolution); 
             
   // Create the annotation automation control and attach image viewer to it 
   this._imageViewerAutomationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl(); 
   this._imageViewerAutomationControl.imageViewer = _viewer; 
             
   // Create the automation manager, and default objects 
   this._manager = new lt.Annotations.Automation.AnnAutomationManager(); 
   this._manager.createDefaultObjects(); 
             
   // Create Html5 rendering engine and bind it to the automation manager 
   this._renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
   this._manager.set_renderingEngine(this._renderingEngine); 
             
   // Create Automation interactive mode instance and bind automation control to it 
   this._automationInteractiveMode = new lt.Annotations.JavaScript.AutomationInteractiveMode(); 
   this._automationInteractiveMode.automationControl = _imageViewerAutomationControl; 
             
   // Add automation interactive mode to the viewer interactive modes list and enable it 
   _viewer.get_interactiveModes().beginUpdate(); 
   _viewer.get_interactiveModes().add(_automationInteractiveMode); 
   _automationInteractiveMode.set_isEnabled(true); 
   _viewer.get_interactiveModes().endUpdate(); 
             
   // Create the annotation automation object and set it to active 
   this._automation = new lt.Annotations.Automation.AnnAutomation(this._manager, _imageViewerAutomationControl); 
   this._automation.set_active(true); 
             
   newTriangle(); 
} 
                   
function automationControl_ItemChanged(sender, e) { 
   if (e.reason == lt.Controls.ImageViewerItemChangedReason.url) { 
             
   // Get loaded image size 
   var imageSize = this._viewer.get_activeItem().get_imageSize(); 
             
   // Set container size with loaded image size 
   var container = this._automation.get_container(); 
   container.set_size(container.get_mapper().sizeToContainerCoordinates(lt.LeadSizeD.create(imageSize.get_width(), imageSize.get_height()))); 
                      
   // Set traingle object id to the current object id 
   this._manager.set_currentObjectId(-99); 
 } 
}

Save your html file and load it in your favorite browser. Then, click / tap three separate points inside the viewer control to draw an AnnTriangleObject.

Help Version 19.0.2017.10.27
Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
LEADTOOLS HTML5 JavaScript
Introduction
Getting Started
HTML5 Browsers
LEADTOOLS Software License Agreement
Demo Programs
Files To Be Included With Your Application
LEADTOOLS JavaScript Object Module
Imaging
Annotations
Documents
Medical
Tutorials
Support
Version History
Libraries