transform Property

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_RenderRedirectExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      viewer.itemBorderThickness = 5; 
 
      // Create the canvas we will render to 
      const redirectCanvas = document.createElement("canvas"); 
      redirectCanvas.style.border = "2px solid black"; 
      const redirectWidth = 300; 
      const redirectHeight = 300; 
      redirectCanvas.width = redirectWidth; 
      redirectCanvas.height = redirectHeight; 
 
      // Add it to the page 
      const output = document.getElementById("output"); 
      output.appendChild(redirectCanvas); 
 
      // Add a 20px margin around the redirect render area 
      const delta = 20; 
      const destRect = lt.LeadRectD.create(0, 0, redirectWidth, redirectHeight); 
      destRect.inflate(-delta, -delta); 
 
      const options = new lt.Controls.ImageViewerRenderRedirectOptions(); 
 
      viewer.rotateAngle = 35; 
      // Use "null" to draw the whole imageViewer 
      //let item = null; 
      const item = viewer.activeItem; 
 
      if (item) { 
         // Don't worry about rendering the below 
         options.renderBackgrounds = false; 
         options.renderBorders = false; 
         options.renderItemStates = false; 
         options.renderShadows = false; 
         options.renderText = false; 
      } 
 
      // On imageViewer render... 
      viewer.redirectRender.add(() => { 
         let sourceRect; 
         let sourceRectClipped; 
         if (!item) { 
            // Draw the whole imageViewer 
            sourceRect = viewer.getViewBounds(true, false); 
            sourceRectClipped = viewer.getViewBounds(true, true); 
         } 
         else { 
            // Only draw the rect for the active item 
            sourceRect = viewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, false); 
            sourceRectClipped = viewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, true); 
         } 
 
         const ctx = redirectCanvas.getContext("2d"); 
         ctx.clearRect(0, 0, redirectWidth, redirectHeight); 
 
         // Draw a rect around the maximum render area 
         ctx.strokeStyle = "green"; 
         ctx.strokeRect(destRect.x, destRect.y, destRect.width, destRect.height); 
 
         // Create the transformation for this rect 
         options.createTransform(viewer, destRect, sourceRect, lt.Controls.ControlSizeMode.fit, lt.Controls.ControlAlignment.center, lt.Controls.ControlAlignment.center); 
 
         // Draw a rect around the actual render area 
         const clipRect = options.transform.transformRect(sourceRect); 
         ctx.strokeStyle = "orange"; 
         ctx.strokeRect(clipRect.x, clipRect.y, clipRect.width, clipRect.height); 
 
         // Do the redirect render 
         viewer.renderRedirect(ctx, options, lt.LeadRectD.empty); 
 
         // Show how to draw the item's border 
         const manuallyComputeRedirectedBorder = () => { 
            const points = [lt.LeadPointD.create(sourceRectClipped.left, sourceRectClipped.top), lt.LeadPointD.create(sourceRectClipped.right, sourceRectClipped.bottom)]; 
            options.transform.transformPoints(points); 
 
            let xmin = points[0].x; 
            let ymin = points[0].y; 
            let xmax = xmin; 
            let ymax = ymin; 
 
            for (let i = 1; i < points.length; i++) { 
               if (points[i].x < xmin) xmin = points[i].x; 
               if (points[i].x > xmax) xmax = points[i].x; 
               if (points[i].y < ymin) ymin = points[i].y; 
               if (points[i].y > ymax) ymax = points[i].y; 
            } 
 
            const bounds = lt.LeadRectD.fromLTRB(xmin, ymin, xmax, ymax); 
 
            ctx.strokeStyle = "blue"; 
            ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height); 
         }; 
         manuallyComputeRedirectedBorder(); 
      }); 
      viewer.invalidate(lt.LeadRectD.empty); 
   } 
} 

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 

<!doctype html> 
<html lang="en"> 
<title>Controls Example | RenderRedirect</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.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.RenderRedirect(); 
 
   }; 
</script> 
</html>