AnnLineEnding Class

Summary

Defines the base class for all line ending styles.

Syntax
TypeScript
JavaScript
function lt.Annotations.Engine.AnnLineEnding 
class lt.Annotations.Engine.AnnLineEnding() 
Remarks

The line ending styles are the shapes that can be added to the starting and ending points of the polyline object.

The AnnLineEnding Members class provides all the basic functionality common to all LEADTOOLS line ending styles. AnnLineEnding Members is an abstract class: you cannot instantiate objects of this class directly. Instead, you create an instance of a derived class such as AnnArrowLineEnding or AnnButtLineEnding and use the methods and properties of the base AnnLineEnding class through the derived class.

Line ending styles cannot be added to closed polyline objects.

Example

This example creates a list of polyline objects, creates all ending style types and sets them to polyline objects ending styles.

AnnLineEnding.ts
EngineHelper.ts
AnnLineEnding.js
EngineHelper.js
AnnLineEnding.html
import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnObject_AnnLineEnding { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.create); 
   } 
 
   create = (automation: lt.Annotations.Automation.AnnAutomation) => { 
      // assumes _automation is valid 
      const inch = 720.0; 
 
      // Create polyline object and add it the automation container 
      let polyLine: lt.Annotations.Engine.AnnPolylineObject = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create arrow line ending style and set some properties 
      const arrowStyle: lt.Annotations.Engine.AnnArrowLineEnding = new lt.Annotations.Engine.AnnArrowLineEnding(); 
      arrowStyle.closed = true; 
      arrowStyle.reversed = true; 
      arrowStyle.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("Yellow"); 
 
      // Set the created arrow style to polyline start and end style 
      polyLine.startStyle = arrowStyle; 
      polyLine.endStyle = arrowStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.2 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.2 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create butt line ending style 
      const buttStyle: lt.Annotations.Engine.AnnButtLineEnding = new lt.Annotations.Engine.AnnButtLineEnding(); 
 
      // Set the created butt style to polyline start and end style 
      polyLine.startStyle = buttStyle; 
      polyLine.endStyle = buttStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.4 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.4 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create slash line ending style 
      const slashStyle: lt.Annotations.Engine.AnnSlashLineEnding = new lt.Annotations.Engine.AnnSlashLineEnding(); 
 
      // Set the created slash style to polyline start and end style 
      polyLine.startStyle = slashStyle; 
      polyLine.endStyle = slashStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.6 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.6 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create square line ending style 
      var squareStyle: lt.Annotations.Engine.AnnSquareLineEnding = new lt.Annotations.Engine.AnnSquareLineEnding(); 
 
      // Set the created square style to polyline start and end style 
      polyLine.startStyle = squareStyle; 
      polyLine.endStyle = squareStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.8 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.8 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create diamond line ending style 
      const diamondStyle: lt.Annotations.Engine.AnnDiamondLineEnding = new lt.Annotations.Engine.AnnDiamondLineEnding(); 
 
      // Set the created diamond style to polyline start and end style 
      polyLine.startStyle = diamondStyle; 
      polyLine.endStyle = diamondStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 2 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create round line ending style 
      const roundStyle: lt.Annotations.Engine.AnnRoundLineEnding = new lt.Annotations.Engine.AnnRoundLineEnding(); 
      // Set the created round style to polyline start and end style 
      polyLine.startStyle = roundStyle; 
      polyLine.endStyle = roundStyle; 
 
      // Repaint to see the objects 
      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 AnnObject_AnnLineEnding { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.create); 
   } 
 
   create = (automation) => { 
      // assumes _automation is valid 
      const inch = 720.0; 
 
      // Create polyline object and add it the automation container 
      let polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create arrow line ending style and set some properties 
      const arrowStyle = new lt.Annotations.Engine.AnnArrowLineEnding(); 
      arrowStyle.closed = true; 
      arrowStyle.reversed = true; 
      arrowStyle.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("Yellow"); 
 
      // Set the created arrow style to polyline start and end style 
      polyLine.startStyle = arrowStyle; 
      polyLine.endStyle = arrowStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.2 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.2 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create butt line ending style 
      const buttStyle = new lt.Annotations.Engine.AnnButtLineEnding(); 
 
      // Set the created butt style to polyline start and end style 
      polyLine.startStyle = buttStyle; 
      polyLine.endStyle = buttStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.4 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.4 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create slash line ending style 
      const slashStyle = new lt.Annotations.Engine.AnnSlashLineEnding(); 
 
      // Set the created slash style to polyline start and end style 
      polyLine.startStyle = slashStyle; 
      polyLine.endStyle = slashStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.6 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.6 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create square line ending style 
      var squareStyle = new lt.Annotations.Engine.AnnSquareLineEnding(); 
 
      // Set the created square style to polyline start and end style 
      polyLine.startStyle = squareStyle; 
      polyLine.endStyle = squareStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 1.8 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 1.8 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create diamond line ending style 
      const diamondStyle = new lt.Annotations.Engine.AnnDiamondLineEnding(); 
 
      // Set the created diamond style to polyline start and end style 
      polyLine.startStyle = diamondStyle; 
      polyLine.endStyle = diamondStyle; 
 
      // Create another polyline object and add it the automation container 
      polyLine = new lt.Annotations.Engine.AnnPolylineObject(); 
      polyLine.points.add(lt.LeadPointD.create(1 * inch, 2 * inch)); 
      polyLine.points.add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
      automation.container.children.add(polyLine); 
 
      // Create round line ending style 
      const roundStyle = new lt.Annotations.Engine.AnnRoundLineEnding(); 
      // Set the created round style to polyline start and end style 
      polyLine.startStyle = roundStyle; 
      polyLine.endStyle = roundStyle; 
 
      // Repaint to see the objects 
      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 | AnnLineEnding</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.AnnObject.AnnLineEnding(); 
</script> 
</html> 
Requirements

Target Platforms

Help Version 20.0.2019.12.4
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2019 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Annotations.Engine Assembly