Send comments on this topic. | Main Raster Introduction | HTML5 JavaScript Introduction | Help Version 17.5.11.6
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:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LEADTOOLS HTML5 and Image Formats RESTful Web Service 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:
<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.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 your script tag:
////////////////////////////////////////////////////////////////////////////////
// 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', Leadtools.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:
////////////////////////////////////////////////////////////////////////////////
// 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() === Leadtools.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();
}
return handled;
}
}
AnnTriangleDrawDesigner.registerClass('AnnTriangleDrawDesigner', Leadtools.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:
////////////////////////////////////////////////////////////////////////////////
// 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', Leadtools.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:
////////////////////////////////////////////////////////////////////////////////
// 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(), Leadtools.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());
Leadtools.Annotations.Rendering.AnnHtml5RenderingEngine.setStroke(context, Leadtools.Annotations.Core.AnnStroke.create(Leadtools.Annotations.Core.AnnSolidColorBrush.create('green'), Leadtools.LeadLengthD.create(1)));
context.beginPath();
for (var x = 0; x < points.length; x++) {
var point = points[x];
if (!point.get_isEmpty()) {
var rect = Leadtools.LeadRectD.create(point.get_x() - 10, point.get_y() - 10, 20, 20);
Leadtools.Annotations.Rendering.AnnHtml5RenderingEngine.drawEllipse(context, rect);
}
}
context.closePath();
context.stroke();
context.restore();
}
}
}
}
AnnTriangleRenderer.registerClass('AnnTriangleRenderer', Leadtools.Annotations.Rendering.AnnPolylineObjectRenderer);
The final step is to write the code that glues the LEADTOOLS ImageViewer and the automated annotation objects together.
// Create the custom automation object and hook the designers
function createTriangleAutomationObject(annObject) {
var automationObj = new Leadtools.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(Leadtools.Annotations.Designers.AnnRunDesigner);
// set up the thumbs
var annTriangleRenderer = new AnnTriangleRenderer();
var annPolylineRenderer = Leadtools.Annotations.Core.AnnRenderingEngine.get_renderers()[Leadtools.Annotations.Core.AnnObject.polylineObjectId];
annTriangleRenderer.set_locationsThumbStyle(annPolylineRenderer.get_locationsThumbStyle());
annTriangleRenderer.set_rotateCenterThumbStyle(annPolylineRenderer.get_rotateCenterThumbStyle());
annTriangleRenderer.set_rotateGripperThumbStyle(annPolylineRenderer.get_rotateGripperThumbStyle());
Leadtools.Annotations.Core.AnnRenderingEngine.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 Leadtools.Annotations.Core.AnnSolidColorBrush();
//var brush = new Leadtools.Annotations.Core.AnnGradientBrush();
brush.set_color("blue");
triangle.set_fill(brush);
// Create a user defined automation object
var automation = createTriangleAutomationObject(triangle);
this._manager.get_objects().add(automation);
this._manager.set_currentObjectId(automation.get_id());
}
function pageLoad() {
// Create the viewer
this._viewer = new Leadtools.Controls.ImageViewer(new Leadtools.Controls.ImageViewerCreateOptions('imageViewerDiv', 'myViewer'));
// Set the image URL - load using browser support
this._viewer.set_imageUrl("http://demo.leadtools.com/images/jpeg/cactus.jpg");
// Create the automation manager, and default objects
this._manager = new Leadtools.Annotations.Automation.AnnAutomationManager();
this._manager.createDefaultObjects();
// Create the annotation automation control
var imageViewerAutomationControl = new Leadtools.Annotations.Automation.ImageViewerAutomationControl(this._viewer);
// Set the viewer's interactive mode to the annotation automation control
this._viewer.set_defaultInteractiveMode(imageViewerAutomationControl);
// Create the annotation automation object and set it to active
var automation = new Leadtools.Annotations.Automation.AnnAutomation(this._manager, imageViewerAutomationControl);
automation.set_active(true);
newTriangle();
}
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.