burnToRectWithDpi Method

Summary

Burns the annotation objects in Container to the destination context and destination rectangle at the specified resolution.

Syntax
TypeScript
JavaScript
AnnRenderingEngine.prototype.burnToRectWithDpi = function( 
   destinationRect, 
   sourceDpiX, 
   sourceDpiY, 
   targetDpiX, 
   targetDpiY 
) 
burnToRectWithDpi( 
   destinationRect: LeadRectD, 
   sourceDpiX: number, 
   sourceDpiY: number, 
   targetDpiX: number, 
   targetDpiY: number 
): void; 

Parameters

destinationRect

The destination rectangle in container coordinates.

sourceDpiX

Horizontal source (screen) DPI.

sourceDpiY

Vertical source (screen) DPI.

targetDpiX

Horizontal target (image) DPI.

targetDpiY

Vertical target (image) DPI.

Remarks

All visible objects in this container will be drawn into the current context.

This method uses the resolution (DPI) values specified and not the values stored in the container. Use this method when burning the container objects into any context.

To burn a container into the context of the image being automated, use Burn.

Example

This example will create a container, adds a couple of objects and then burn it into the viewer

BurnToRectWithDpi.ts
EngineHelper.ts
BurnToRectWithDpi.js
EngineHelper.js
BurnToRectWithDpi.html
import { EngineHelper } from "../utilities/EngineHelper"; 
 
export class AnnRenderingEngine_BurnToRectwithDPI { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.burn); 
   } 
 
   burn = (automation: lt.Annotations.Automation.AnnAutomation, viewer: lt.Controls.ImageViewer) => { 
      // Get the container 
      const container: lt.Annotations.Engine.AnnContainer = automation.container; 
 
      const inch: number = 720.0; 
 
      // 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); 
 
      // To burn the annotations, we need a canvas context and a new rendering engine 
 
      // Get the background canvas of the viewer 
      const canvas = viewer.activeItem.canvas as HTMLCanvasElement; 
      const context: CanvasRenderingContext2D = canvas.getContext("2d"); 
 
      // Create a new rendering engine for burning 
      const renderingEngine: lt.Annotations.Rendering.AnnHtml5RenderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      // Clone the resources and renderers from current rendering engine to the burn rendering engine 
      renderingEngine.resources = automation.manager.resources; 
      renderingEngine.renderers = automation.manager.renderingEngine.renderers; 
 
      // Now attach the burn rendering engine with container and context 
      renderingEngine.attach(container, context); 
 
      // Set the resolution 
      const dpiX: number = viewer.screenDpi.width; 
      const dpiY: number = viewer.screenDpi.height; 
      const xRes: number = viewer.activeItem.resolution.width; 
      const yRes: number = viewer.activeItem.resolution.height; 
 
      // Burn it 
      renderingEngine.burnToRectWithDpi(lt.LeadRectD.empty, dpiX, dpiY, xRes, yRes); 
 
      // De-Attach both container and context 
      renderingEngine.detach(); 
 
      // Delete the objects we added 
      automation.selectObjects(container.children); 
      automation.deleteSelectedObjects(); 
 
      // Invalidate to see the burned objects 
      viewer.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 AnnRenderingEngine_BurnToRectwithDPI { 
   constructor() { 
      const helper = new EngineHelper(); 
      helper.run(this.burn); 
   } 
 
   burn = (automation, viewer) => { 
      // Get the container 
      const container = automation.container; 
 
      const inch = 720.0; 
 
      // 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); 
 
      // To burn the annotations, we need a canvas context and a new rendering engine 
 
      // Get the background canvas of the viewer 
      const canvas = viewer.activeItem.canvas; 
      const context = canvas.getContext("2d"); 
 
      // Create a new rendering engine for burning 
      const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      // Clone the resources and renderers from current rendering engine to the burn rendering engine 
      renderingEngine.resources = automation.manager.resources; 
      renderingEngine.renderers = automation.manager.renderingEngine.renderers; 
 
      // Now attach the burn rendering engine with container and context 
      renderingEngine.attach(container, context); 
 
      // Set the resolution 
      const dpiX = viewer.screenDpi.width; 
      const dpiY = viewer.screenDpi.height; 
      const xRes = viewer.activeItem.resolution.width; 
      const yRes = viewer.activeItem.resolution.height; 
 
      // Burn it 
      renderingEngine.burnToRectWithDpi(lt.LeadRectD.empty, dpiX, dpiY, xRes, yRes); 
 
      // De-Attach both container and context 
      renderingEngine.detach(); 
 
      // Delete the objects we added 
      automation.selectObjects(container.children); 
      automation.deleteSelectedObjects(); 
 
      // Invalidate to see the burned objects 
      viewer.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>AnnRenderingEngine Example | BurnToRectWithDpi</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.AnnRenderingEngine.BurnToRectWithDpi(); 
</script> 
</html> 

Requirements

Target Platforms

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

Leadtools.Annotations.Engine Assembly