AnnHotspotObject Object

Summary

Defines an annotation hot spot object.

Syntax
TypeScript
JavaScript
function lt.Annotations.Engine.AnnHotspotObject 
	extends lt.Annotations.Engine.AnnImageObject 
	implements IAnnObjectCloneable 
class lt.Annotations.Engine.AnnHotspotObject() 
	extends AnnImageObject 
	implements IAnnObjectCloneable 
Remarks

The AnnHotspotObject object is designed to work as a scaled picture drawn inside a rectangle. The AnnHotspotObject object will draw the picture if the owner container is in design mode. If the container is in run mode, the AnnHotspotObject object will not draw the picture.

With the automated functions, in design mode, the rectangle contains a scaled image. The user clicks / taps and drags to specify the rectangle in the current window. In run mode, the object is transparent, but the mouse pointer changes to a hand when it is over the object.

Programmatically, the boundaries and location of the hotspot object can be controlled using the following properties:

Each object can be transformed with the following methods:

The AnnHotspotObject class inherits a number of properties from the AnnObject class, providing support for font, stroke and fill characteristics. These properties are listed below:

The name of the hotspot object can be controlled using Labels property, inherited from the AnnObject class. An object can be part of a group annotation object or part of a container object. It cannot be part of both a group and a container at the same time. The following properties can also be used to programmatically set characteristics of an AnnHotspotObject:

Example

This example creates a hotspot object and adds it to the automation container.

AnnHotspot.ts
EngineHelper.ts
AnnHotspot.js
EngineHelper.js
AnnHotspot.html
import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnObjects_Hotspot { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.create); 
   } 
 
   create = (automation: lt.Annotations.Automation.AnnAutomation) => { 
      // Create a new instance of AnnResources if the automation manager does not already have one 
      let resources: lt.Annotations.Engine.AnnResources = automation.manager.resources; 
      if (resources == null) { 
         resources = new lt.Annotations.Engine.AnnResources(); 
         automation.manager.resources = resources; 
      } 
      // Get the images collection 
      const imagesResources: lt.Annotations.Engine.AnnPicture[] = resources.images; 
      // Add our picture to it 
      imagesResources.push(new lt.Annotations.Engine.AnnPicture("Resources/Objects/Hotspot.png")); 
      const pictureIndex: number = imagesResources.length - 1; 
 
      const inch: number = 720.0; 
      // Add a hotspot object 
      const hotspotObj: lt.Annotations.Engine.AnnHotspotObject = new lt.Annotations.Engine.AnnHotspotObject(); 
      // Set the points for the hotspot 
      hotspotObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      hotspotObj.points.add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
      hotspotObj.points.add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
      hotspotObj.points.add(lt.LeadPointD.create(1 * inch, 2 * inch)); 
      // Set the picture 
      hotspotObj.defaultPicture = pictureIndex; 
      // Add the object to the automation container 
      automation.container.children.add(hotspotObj); 
      // Select the object 
      automation.selectObject(hotspotObj); 
 
      // Hook to rendering engine loadPicture event to render the container immediately after resources get loaded 
      automation.manager.renderingEngine.add_loadPicture((sender, e) => { 
         automation.invalidate(lt.LeadRectD.empty); 
      }); 
   } 
} 
export class EngineHelper { 
   // Automation object 
   protected _automation: lt.Annotations.Automation.AnnAutomation = null; 
   // Image viewer 
   protected _viewer: lt.Controls.ImageViewer = null; 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   public run(callback?: (automation: lt.Annotations.Automation.AnnAutomation, viewer: lt.Controls.ImageViewer) => void): void { 
      // Create the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      const viewer: lt.Controls.ImageViewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.autoCreateCanvas = true; 
      this._viewer = viewer; 
 
      // PanZoom interactive mode 
      const panZoom: lt.Controls.ImageViewerPanZoomInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
      // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
      const imageViewerAutomationControl: lt.Demos.Annotations.ImageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
      // Attach our image viewer 
      imageViewerAutomationControl.imageViewer = viewer; 
 
      // Set the image viewer interactive mode 
      const automationInteractiveMode: lt.Demos.Annotations.AutomationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode(); 
      automationInteractiveMode.automationControl = imageViewerAutomationControl; 
 
      // Set the image URL 
      viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png"; 
 
      // Create and set up the automation manager using the HTML5 rendering engine 
      const renderingEngine: lt.Annotations.Rendering.AnnHtml5RenderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      const manager: lt.Annotations.Automation.AnnAutomationManager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
      // Create default automation objects 
      manager.createDefaultObjects(); 
 
      // Add the objects to the objects select element 
      const currentObjectIdSelect = document.getElementById("currentObjectIdSelect") as HTMLSelectElement; 
      // Add the PanZoom option 
      currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString()); 
 
      const automationObjCount: number = manager.objects.count; 
      for (let i = 0; i < automationObjCount; i++) { 
         // Get the object 
         const automationObj: lt.Annotations.Automation.AnnAutomationObject = manager.objects.item(i); 
 
         // Add its name to the select element 
         const name: string = automationObj.name; 
         const id: string = automationObj.id.toString(); 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id); 
      } 
 
      // Hook to its change event 
      currentObjectIdSelect.addEventListener("change", () => { 
         // Get the object ID 
         const id: number = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
         // Set it as the current object in the manager 
         manager.currentObjectId = id; 
 
         // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control 
         if (id == lt.Annotations.Engine.AnnObject.none) { 
            viewer.defaultInteractiveMode = panZoom; 
         } 
         else { 
            viewer.defaultInteractiveMode = automationInteractiveMode; 
         } 
      }); 
 
      // When the current object ID changes, we need to update our select 
      manager.add_currentObjectIdChanged((sender, e) => { 
         const currentObjectId: number = manager.currentObjectId; 
         for (let i = 0; i < currentObjectIdSelect.options.length; i++) { 
            const id: number = parseInt(currentObjectIdSelect.options[i].value); 
            if (id === currentObjectId) { 
               currentObjectIdSelect.selectedIndex = i; 
               break; 
            } 
         } 
      }); 
 
      // Pan zoom by default 
      viewer.defaultInteractiveMode = panZoom; 
 
      // set up the automation (will create the container as well) 
      const automation: lt.Annotations.Automation.AnnAutomation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl); 
      this._automation = automation; 
 
      // Add handler to update the container size when the image size changes 
      viewer.itemChanged.add((sender, e) => { 
         const container: lt.Annotations.Engine.AnnContainer = automation.container; 
         container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
         //Create new canvas data provider for the new image 
         const canvasDataProvider: lt.Demos.Annotations.CanvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
         imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
      }); 
 
      // set up this automation as the active one 
      this._automation.active = true; 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.onclick = () => { 
         if(callback) 
            callback(this._automation, this._viewer); 
      } 
   } 
} 
import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnObjects_Hotspot { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.create); 
   } 
 
   create = (automation) => { 
      // Create a new instance of AnnResources if the automation manager does not already have one 
      let resources = automation.manager.resources; 
      if (resources == null) { 
         resources = new lt.Annotations.Engine.AnnResources(); 
         automation.manager.resources = resources; 
      } 
      // Get the images collection 
      const imagesResources = resources.images; 
      // Add our picture to it 
      imagesResources.push(new lt.Annotations.Engine.AnnPicture("Resources/Objects/Hotspot.png")); 
      const pictureIndex = imagesResources.length - 1; 
 
      const inch = 720.0; 
      // Add a hotspot object 
      const hotspotObj = new lt.Annotations.Engine.AnnHotspotObject(); 
      // Set the points for the hotspot 
      hotspotObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      hotspotObj.points.add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
      hotspotObj.points.add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
      hotspotObj.points.add(lt.LeadPointD.create(1 * inch, 2 * inch)); 
      // Set the picture 
      hotspotObj.defaultPicture = pictureIndex; 
      // Add the object to the automation container 
      automation.container.children.add(hotspotObj); 
      // Select the object 
      automation.selectObject(hotspotObj); 
 
      // Hook to rendering engine loadPicture event to render the container immediately after resources get loaded 
      automation.manager.renderingEngine.add_loadPicture((sender, e) => { 
         automation.invalidate(lt.LeadRectD.empty); 
      }); 
   } 
} 
export class EngineHelper { 
   // Automation object 
   _automation = null; 
   // Image viewer 
   _viewer = null; 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   run(callback) { 
      // Create the viewer 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      const viewer = new lt.Controls.ImageViewer(createOptions); 
      viewer.autoCreateCanvas = true; 
      this._viewer = viewer; 
 
      // PanZoom interactive mode 
      const panZoom = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
      // Create an instance of the Automation control object that works with LEADTOOLS ImageViewer 
      const imageViewerAutomationControl = new lt.Demos.Annotations.ImageViewerAutomationControl(); 
      // Attach our image viewer 
      imageViewerAutomationControl.imageViewer = viewer; 
 
      // Set the image viewer interactive mode 
      const automationInteractiveMode = new lt.Demos.Annotations.AutomationInteractiveMode(); 
      automationInteractiveMode.automationControl = imageViewerAutomationControl; 
 
      // Set the image URL 
      viewer.imageUrl = "http://demo.leadtools.com/images/png/pngimage.png"; 
 
      // Create and set up the automation manager using the HTML5 rendering engine 
      const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      const manager = lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine); 
 
      // Create default automation objects 
      manager.createDefaultObjects(); 
 
      // Add the objects to the objects select element 
      const currentObjectIdSelect = document.getElementById("currentObjectIdSelect"); 
      // Add the PanZoom option 
      currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option("Pan/Zoom", lt.Annotations.Engine.AnnObject.none.toString()); 
 
      const automationObjCount = manager.objects.count; 
      for (let i = 0; i < automationObjCount; i++) { 
         // Get the object 
         const automationObj = manager.objects.item(i); 
 
         // Add its name to the select element 
         const name = automationObj.name; 
         const id = automationObj.id.toString(); 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id); 
      } 
 
      // Hook to its change event 
      currentObjectIdSelect.addEventListener("change", () => { 
         // Get the object ID 
         const id = parseInt(currentObjectIdSelect.options[currentObjectIdSelect.selectedIndex].value); 
 
         // Set it as the current object in the manager 
         manager.currentObjectId = id; 
 
         // If this is the "Pan/Zoom" option, then back to pan zoom, otherwise, set our automation control 
         if (id == lt.Annotations.Engine.AnnObject.none) { 
            viewer.defaultInteractiveMode = panZoom; 
         } 
         else { 
            viewer.defaultInteractiveMode = automationInteractiveMode; 
         } 
      }); 
 
      // When the current object ID changes, we need to update our select 
      manager.add_currentObjectIdChanged((sender, e) => { 
         const currentObjectId = manager.currentObjectId; 
         for (let i = 0; i < currentObjectIdSelect.options.length; i++) { 
            const id = parseInt(currentObjectIdSelect.options[i].value); 
            if (id === currentObjectId) { 
               currentObjectIdSelect.selectedIndex = i; 
               break; 
            } 
         } 
      }); 
 
      // Pan zoom by default 
      viewer.defaultInteractiveMode = panZoom; 
 
      // set up the automation (will create the container as well) 
      const automation = new lt.Annotations.Automation.AnnAutomation(manager, imageViewerAutomationControl); 
      this._automation = automation; 
 
      // Add handler to update the container size when the image size changes 
      viewer.itemChanged.add((sender, e) => { 
         const container = automation.container; 
         container.size = container.mapper.sizeToContainerCoordinates(viewer.imageSize); 
 
         //Create new canvas data provider for the new image 
         const canvasDataProvider = new lt.Demos.Annotations.CanvasDataProvider(viewer.activeItem.canvas); 
         imageViewerAutomationControl.automationDataProvider = canvasDataProvider; 
 
      }); 
 
      // set up this automation as the active one 
      this._automation.active = true; 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.onclick = () => { 
         if(callback) 
            callback(this._automation, this._viewer); 
      } 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>AnnObject Example | AnnHotspot</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.Annotations.BatesStamp.js"></script> 
   <script src="../../LT/Leadtools.Demos.js"></script> 
   <script src="../../LT/Leadtools.Demos.Annotations.js"></script> 
   <style> 
      #imageViewerDiv { 
         border: 1px solid #000000; 
         width: 800px; 
         height: 800px; 
         background-color: #7F7F7F; 
      } 
   </style> 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Either Pan/Zoom or Annotations mode. In annotations mode, draw new objects or edit them.</p> 
   <div> 
      <select id="currentObjectIdSelect"></select> 
   </div> 
   <div> 
      <input type="button" id="exampleButton" value="Example" /> 
      <label id="exampleLabel" /> 
   </div> 
   <div id="imageViewerDiv" /> 
</body> 
 
<script> 
   window.onload = () => new window.examples.AnnObjects.AnnHotspot(); 
</script> 
</html> 
Requirements
Target Platforms
Help Version 21.0.2021.6.30
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Annotations.Engine Assembly

Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.