In This Topic ▼

AnnContainer Object

Summary

Represents an annotation container.

Syntax

TypeScript

JavaScript

function lt.Annotations.Engine.AnnContainer

class lt.Annotations.Engine.AnnContainer()

Remarks

The annotation container is a rectangular area that holds related annotation objects (AnnObject). In typical applications, the container holds the annotation objects for a page in a document. The size of the container is the same as the page, but in annotation units (1/720 of an inch).

AnnContainer contains the following members:

Member	Description
Size, Offset and PageNumber	Properties of the container: Size is the size of the container in annotation units (1/720 of an inch). Offset is an optional offset value (if the container does not start at 0,0) and PageNumber is the optional 1-based page number of the container
Mapper	The object responsible for converting display, container and image coordinates
Children	A collection of AnnObjects. These are the annotation objects that belong in this container. These objects will be rendered when the container is rendered and edited when the container is automated
SelectionObject	Special annotation object that is responsible for maintaining a list of the objects that are currently selected in the container
Layers	A collection of AnnLayers for logically grouping common annotation objects.
HitTestPoint and HitTestRect	Helper method for performing hit-testing on the container and returning any object under a test point or rectangle.
IsVisible, Stroke and Fill	Optional values (whether it is visible, border stroke, interior filling options) used when rendering this container.
IsEnabled	Optional value indicating whether this container is enabled. If a container is disabled, then it will be used by the automation and considered read-only.
Labels	Optional labels (for example, map legends) that can be used to overlay fixed text on top of the container.
Resize	Method for easily resizing a container to a desired size. Has options.

Example

This example creates a new container, adds a line object and a rectangle object to it, saves it, and then loads it back.

AnnContainer.ts

AnnContainer.js

AnnContainer.html

import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnEngine_AnnContainerExample { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.run); 
   } 
 
   run = () => { 
      const inch = 720.0; 
 
      // Create a new annotation container, 8.5 by 11 inches 
      let container: lt.Annotations.Engine.AnnContainer = new lt.Annotations.Engine.AnnContainer(); 
      // Size must be in annotation units (1/720 of an inch) 
      container.size = lt.LeadSizeD.create(8.5 * inch, 11 * inch); 
 
      const showContainer = (message, container) => { 
         let str = message + "\nContainer size: "; 
 
         // Add the size 
         const inch = 720; 
         const width: number = container.size.width / inch; 
         const height: number = container.size.height / inch; 
         str += width + " by " + height + " inches" + "\n"; 
 
         // Add the objects 
         str += "Contains " + container.children.count + " objects(s)\n"; 
         for (let i = 0; i < container.children.count; i++) { 
            const annObj = container.children.item(i); 
 
            str += "Object: " + annObj.get_friendlyName() + " at "; 
            for (let j = 0; j < annObj.get_points().get_count(); j++) { 
               const pt: lt.LeadPointD = annObj.points.item(j); 
               const x: number = pt.x / inch; 
               const y: number = pt.y / inch; 
               str += "(" + x + ", " + y + ") "; 
            } 
 
            str += "\n"; 
         } 
 
         alert(str); 
      } 
 
      // Add a red line object, from 1in 1in to 2in 2in 
      const lineObj: lt.Annotations.Engine.AnnPolylineObject = new lt.Annotations.Engine.AnnPolylineObject(); 
      lineObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      lineObj.points.add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
      lineObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1)); 
      container.children.add(lineObj); 
 
      // Add a blue on yellow rectangle from 3in 3in to 4in 4in 
      const rectObj: lt.Annotations.Engine.AnnRectangleObject = new lt.Annotations.Engine.AnnRectangleObject(); 
      rectObj.rect = lt.LeadRectD.create(3 * inch, 3 * inch, 1 * inch, 1 * inch); 
      rectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("blue"), lt.LeadLengthD.create(1)); 
      rectObj.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("yellow"); 
      container.children.add(rectObj); 
 
      // Show the container 
      showContainer("Before save", container); 
 
      // Create the codecs object to save and load annotations 
      const codecs: lt.Annotations.Engine.AnnCodecs = new lt.Annotations.Engine.AnnCodecs(); 
 
      // Save the container 
      const xmlData: string = codecs.save(container, lt.Annotations.Engine.AnnFormat.annotations, null, 1); 
 
      // delete the container 
      container = null; 
 
      // Show information about the data we just saved 
      const info: lt.Annotations.Engine.AnnCodecsInfo = codecs.getInfo(xmlData); 
      let message: string; 
      if (info.format == lt.Annotations.Engine.AnnFormat.annotations) { 
         message = "Version: "; 
         message += info.version; 
         message += " No. of pages: "; 
         message += info.pages.length; 
         message += " page nos: "; 
         for (let i = 0; i < info.pages.length; i++) { 
            message += info.pages[i] + " "; 
         } 
      } 
      else { 
         message = "Invalid annotations data"; 
      } 
 
      alert(message); 
 
      // Load the container we just saved 
      container = codecs.load(xmlData, 1); 
 
      // Show it 
      showContainer("After load", container); 
   } 
}

import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnEngine_AnnContainerExample { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.run); 
   } 
 
   run = () => { 
      const inch = 720.0; 
 
      // Create a new annotation container, 8.5 by 11 inches 
      let container = new lt.Annotations.Engine.AnnContainer(); 
      // Size must be in annotation units (1/720 of an inch) 
      container.size = lt.LeadSizeD.create(8.5 * inch, 11 * inch); 
 
      const showContainer = (message, container) => { 
         let str = message + "\nContainer size: "; 
 
         // Add the size 
         const inch = 720; 
         const width = container.size.width / inch; 
         const height = container.size.height / inch; 
         str += width + " by " + height + " inches" + "\n"; 
 
         // Add the objects 
         str += "Contains " + container.children.count + " objects(s)\n"; 
         for (let i = 0; i < container.children.count; i++) { 
            const annObj = container.children.item(i); 
 
            str += "Object: " + annObj.get_friendlyName() + " at "; 
            for (let j = 0; j < annObj.get_points().get_count(); j++) { 
               const pt = annObj.points.item(j); 
               const x = pt.x / inch; 
               const y = pt.y / inch; 
               str += "(" + x + ", " + y + ") "; 
            } 
 
            str += "\n"; 
         } 
 
         alert(str); 
      } 
 
      // Add a red line object, from 1in 1in to 2in 2in 
      const lineObj = new lt.Annotations.Engine.AnnPolylineObject(); 
      lineObj.points.add(lt.LeadPointD.create(1 * inch, 1 * inch)); 
      lineObj.points.add(lt.LeadPointD.create(2 * inch, 2 * inch)); 
      lineObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("red"), lt.LeadLengthD.create(1)); 
      container.children.add(lineObj); 
 
      // Add a blue on yellow rectangle from 3in 3in to 4in 4in 
      const rectObj = new lt.Annotations.Engine.AnnRectangleObject(); 
      rectObj.rect = lt.LeadRectD.create(3 * inch, 3 * inch, 1 * inch, 1 * inch); 
      rectObj.stroke = lt.Annotations.Engine.AnnStroke.create(lt.Annotations.Engine.AnnSolidColorBrush.create("blue"), lt.LeadLengthD.create(1)); 
      rectObj.fill = lt.Annotations.Engine.AnnSolidColorBrush.create("yellow"); 
      container.children.add(rectObj); 
 
      // Show the container 
      showContainer("Before save", container); 
 
      // Create the codecs object to save and load annotations 
      const codecs = new lt.Annotations.Engine.AnnCodecs(); 
 
      // Save the container 
      const xmlData = codecs.save(container, lt.Annotations.Engine.AnnFormat.annotations, null, 1); 
 
      // delete the container 
      container = null; 
 
      // Show information about the data we just saved 
      const info = codecs.getInfo(xmlData); 
      let message; 
      if (info.format == lt.Annotations.Engine.AnnFormat.annotations) { 
         message = "Version: "; 
         message += info.version; 
         message += " No. of pages: "; 
         message += info.pages.length; 
         message += " page nos: "; 
         for (let i = 0; i < info.pages.length; i++) { 
            message += info.pages[i] + " "; 
         } 
      } 
      else { 
         message = "Invalid annotations data"; 
      } 
 
      alert(message); 
 
      // Load the container we just saved 
      container = codecs.load(xmlData, 1); 
 
      // Show it 
      showContainer("After load", container); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>AnnContainer Example | AnnContainer</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.AnnContainer.AnnContainerExample(); 
</script> 
</html>

Requirements

Target Platforms

Reference

AnnContainer Members

Leadtools.Annotations.Engine Namespace

Implementing LEADTOOLS Annotations

Download our FREE evaluation

Help Version 22.0.2023.1.31

Leadtools.Annotations.Engine Assembly

Introduction

Getting Started

Namespaces

Leadtools.Annotations.Engine Namespace

Assemblies