renderingEngine Property

export class BatesStampHelper { 
   protected _automation: lt.Annotations.Automation.AnnAutomation; 
   // Image viewer 
   private _viewer: lt.Controls.ImageViewer; 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   public run(callback?: (automation: lt.Annotations.Automation.AnnAutomation) => 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: number = automationObj.id; 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString()); 
      } 
 
      // 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 = 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); 
      } 
   } 
} 

import { BatesStampHelper } from "../utilities/BatesStampHelper"; 
 
export class BatesStampComposer_Example { 
   constructor() { 
      const helper = new BatesStampHelper(); 
      helper.run(this.compose); 
   } 
 
   compose = (automation) => { 
      //Create AnnBatesStamp and set its properties 
      const batesStamp = new lt.Annotations.BatesStamp.AnnBatesStamp(); 
      batesStamp.font = new lt.Annotations.Engine.AnnFont("Arial", 12); 
      batesStamp.foreground = lt.Annotations.Engine.AnnSolidColorBrush.create("Red"); 
      batesStamp.horizontalAlignment = lt.Annotations.Engine.AnnHorizontalAlignment.center; 
      batesStamp.verticalAlignment = lt.Annotations.Engine.AnnVerticalAlignment.center; 
      batesStamp.logo.angle = -45; 
      batesStamp.logo.font = new lt.Annotations.Engine.AnnFont("Arial", 14); 
      batesStamp.logo.opacity = 0.5; 
      batesStamp.logo.stretchLogo = true; 
      batesStamp.logo.picture = new lt.Annotations.Engine.AnnPicture("https://www.leadtools.com/images/page_graphics/leadlogo.png"); 
 
      //Add some elements to Bates stamp elements list 
      batesStamp.elements.add(new lt.Annotations.BatesStamp.AnnBatesNumber()); 
      batesStamp.elements.add(lt.Annotations.BatesStamp.AnnBatesText.create(" ")); 
 
      batesStamp.elements.add(lt.Annotations.BatesStamp.AnnBatesText.create(" This is text element")); 
 
      //Create AnnBatesStampComposer instance and add the created Bates stamp to it 
      const batesStampComposer = new lt.Annotations.BatesStamp.AnnBatesStampComposer(); 
      //Set the rendering engine 
      lt.Annotations.BatesStamp.AnnBatesStampComposer.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
      batesStampComposer.stamps.add(batesStamp); 
 
      //Use the main automation object for your application instead of _automation we used here 
      const mainContainer = automation.container; 
 
      //Create Bates stamp container, set its size and mapper and attach it to the composer 
      const batesStampContainer = new lt.Annotations.Engine.AnnContainer(); 
      batesStampContainer.size = mainContainer.size; 
      batesStampContainer.mapper = mainContainer.mapper.clone(); 
 
      //Apply Bates Stamp to our container 
      batesStampComposer.targetContainers.add(batesStampContainer); 
 
      //Insert the Bates stamp container below all other containers in the automation 
      automation.containers.insertItem(0, batesStampContainer); 
 
      //Print the content of this Bates stamp 
      alert(batesStamp.asString(batesStampContainer)); //  the output will be "000001 This is text element" 
 
      //Render the containers 
      automation.invalidate(lt.LeadRectD.empty); 
 
      // Hook to rendering engine loadPicture event to render the container immediately after resources get loaded 
      automation.manager.renderingEngine.add_loadPicture((sender, e) => { 
         automation.invalidate(lt.LeadRectD.empty); 
      }); 
   } 
} 

export class BatesStampHelper { 
   _automation; 
   // Image viewer 
   _viewer; 
 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/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; 
         currentObjectIdSelect.options[currentObjectIdSelect.options.length] = new Option(name, id.toString()); 
      } 
 
      // 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); 
      } 
   } 
} 

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