In This Topic ▼

mapper Property

Summary

Gets or sets the mapper for this AnnContainer.

Syntax

TypeScript

JavaScript

Object.defineProperty(AnnContainer.prototype, 'mapper', 
	get: function(), 
	set: function(value) 
)

mapper: AnnContainerMapper;

Property Value

The mapper for this AnnContainer. The default value is the object created by AnnContainerMapper.CreateDefault.

Remarks

The mapper is used by this container when converting display, container and image coordinates. For more information, refer to AnnContainerMapper.

If you set the value of this property to null, then this container will use an object created from AnnContainerMapper.CreateDefault instead. Therefore, you will always get a valid object when querying the value of this property.

Example

This example will use the mapper to convert a rectangle value from annotation to image units and back.

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

Reference

AnnContainer Class

AnnContainer Members

Leadtools.Annotations.Engine Namespace

Download our FREE evaluation

Help Version 22.0.2023.1.31

Leadtools.Annotations.Engine Assembly

Introduction

Getting Started

Namespaces

Leadtools.Annotations.Engine Namespace

Assemblies