AnnContainerMapper Object

Summary

Provides methods for converting values between display, annotations and image coordinates.

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

AnnContainerMapper is used for converting values between display, annotations and image coordinates.

In LEADTOOLS Annotations, all the values are stored in annotations units (1/720 of an inch). For example, when you create a new container and you must set its size; you may write code like this: 

var inch = 720.0; 
// Create a new annotation container 
var container = new lt.Annotations.Engine.AnnContainer(); 
// Set its size to 8.5 by 11 inches. Size must be in annotation units (1/720 of an inch) 
container.size = lt.LeadSizeD.create(8.5 * inch, 11 * inch);

Similarly, when you create an annotation object and set its location and size, these values must be in annotation coordinates as well: 

// Create a line object from 1, 1 to 2, 2 inches: 
var 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));

In automation mode, the user typically draws an annotation object with the mouse or touches the screen using physical screen coordinates. These coordinates must then be transformed to annotation units. To perform this, the mapper needs to know the values of the screen DPI (Dots per Inch). The user must set these values in SourceDpiX and SourceDpiY.

Similarly, when an object is rendered to a target context, the container mapper needs to know the values for the context (or image, during a burn operation) DPI. You must set these values in TargetDpiX and TargetDpiY.

When converting between font size and fixed length and size values between annotation and display coordinates, the mapper will use the values of DeviceDpiX and DeviceDpiY.

To set the DPI values, use MapResolutions. For example, if the current screen resolution is 96 and the container is associated with an image at 300 DPI then you can use the following code: 

container.mapResolutions(96, 96, 300, 300);

In cases when the target DPI value is unknown or must be calculated at runtime, such as in the case of medical applications, you can use the Calibrate method to adjust the ratio between the source and target resolution based on a provided known value. The resulting calibration value is stored in CalibrationScale and used by this container throughout.

To render the container to a destination context, a transformation matrix might also be required to perform such operations as scroll and zoom. You can set the value of this matrix in Transform, using the UpdateTransform method.

The mapper can now use all the values above to perform the following:

Example
Mapper.ts
Mapper.js
Mapper.html 
import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnContainer_MapperExample { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.run); 
   } 
 
   run = () => { 
      const inch = 720.0; 
 
      // Create a new annotation container, 8.5 by 11 inches 
      const 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); 
 
      // Set its mapper, assuming the screen DPI is 96 and the image DPI is 300 
      container.mapper = new lt.Annotations.Engine.AnnContainerMapper(96, 96, 300, 300); 
 
      // 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); 
 
      // Get the rectangle in annotations units 
      let rc: lt.LeadRectD = rectObj.rect; 
      alert("Annotations units: " + rc.left + "," + rc.top + "," + rc.right + "," + rc.bottom); 
 
      // Convert it to image coordinates 
      rc = container.mapper.rectFromContainerCoordinates(rc, lt.Annotations.Engine.AnnFixedStateOperations.none); 
      alert("Image units (pixels): " + rc.left + "," + rc.top + "," + rc.right + "," + rc.bottom); 
 
      // If this container is used with an image, you can use the pixels values above to find the exact value on the image 
 
      // Convert it to back to annotations units 
      rc = container.mapper.rectToContainerCoordinates(rc); 
      alert("Original units: " + rc.left + "," + rc.top + "," + rc.right + "," + rc.bottom); 
   } 
} 
import { EngineHelper } from "../../utilities/EngineHelper"; 
 
export class AnnContainer_MapperExample { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.run); 
   } 
 
   run = () => { 
      const inch = 720.0; 
 
      // Create a new annotation container, 8.5 by 11 inches 
      const 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); 
 
      // Set its mapper, assuming the screen DPI is 96 and the image DPI is 300 
      container.mapper = new lt.Annotations.Engine.AnnContainerMapper(96, 96, 300, 300); 
 
      // 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); 
 
      // Get the rectangle in annotations units 
      let rc = rectObj.rect; 
      alert("Annotations units: " + rc.left + "," + rc.top + "," + rc.right + "," + rc.bottom); 
 
      // Convert it to image coordinates 
      rc = container.mapper.rectFromContainerCoordinates(rc, lt.Annotations.Engine.AnnFixedStateOperations.none); 
      alert("Image units (pixels): " + rc.left + "," + rc.top + "," + rc.right + "," + rc.bottom); 
 
      // If this container is used with an image, you can use the pixels values above to find the exact value on the image 
 
      // Convert it to back to annotations units 
      rc = container.mapper.rectToContainerCoordinates(rc); 
      alert("Original units: " + rc.left + "," + rc.top + "," + rc.right + "," + rc.bottom); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>AnnContainer Example | Mapper</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.Mapper(); 
</script> 
</html>
Requirements

Target Platforms

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

Leadtools.Annotations.Engine Assembly
Introduction
Getting Started
Namespaces
Leadtools.Annotations.Engine Namespace
Assemblies
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.