ImageViewerPagerInteractiveMode Object

Summary

Changes the active item using the mouse or touch.

Syntax
TypeScript
JavaScript
function lt.Controls.ImageViewerPagerInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode 
class lt.Controls.ImageViewerPagerInteractiveMode() 
	extends ImageViewerInteractiveMode 
Remarks

ImageViewerPagerInteractiveMode derives from ImageViewerInteractiveMode and subscribes to the following events of the InteractiveService:

InteractiveEventArgs.IsHandled is set to true if the interaction is on target and not already handled, regardless of whether the drag causes a change in the active item index.

When the user clicks and drags on the viewer surface, the current active item index changes in the viewer accordingly.

This mode works by calculating the maximum change for the operation (number of items). Then this value is normalized across the current height of the viewer. When the user clicks and drags on the viewer, the value changes based on the current location. Dragging up will decrease value, while dragging down will increase the value.

For more information, refer to Image Viewer Interactive Modes.

Example

This example adds multiple canvas items to the single view layout of the viewer, then adds the pager mode to support paged viewing.

PagerInteractiveMode.ts
ImageViewer.ts
PagerInteractiveMode.js
ImageViewer.js
PagerInteractiveMode.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_PagerInteractiveModeExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Add a few more items 
      viewer.beginUpdate(); 
      viewer.items.clear(); 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
 
      for (let i = 0; i < 4; i++) { 
         const canvas = document.createElement("canvas") as HTMLCanvasElement; 
         canvas.width = 200; 
         canvas.height = 200; 
         const ctx: CanvasRenderingContext2D = canvas.getContext("2d"); 
         ctx.fillStyle = "white"; 
         ctx.fillRect(0, 0, 200, 200); 
         ctx.fillStyle = "blue"; 
         ctx.fillRect(i * 50, i * 50, 50, 50); 
 
         const item: lt.Controls.ImageViewerItem = new lt.Controls.ImageViewerItem(); 
         item.canvas = canvas; 
         item.text = "Item " + i; 
         viewer.items.add(item); 
      } 
      viewer.endUpdate(); 
 
      viewer.interactiveModes.clear(); 
      const pagerInteractiveMode: lt.Controls.ImageViewerPagerInteractiveMode = new lt.Controls.ImageViewerPagerInteractiveMode(); 
      viewer.interactiveModes.add(pagerInteractiveMode); 
   } 
} 
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_PagerInteractiveModeExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Add a few more items 
      viewer.beginUpdate(); 
      viewer.items.clear(); 
      viewer.itemPadding = lt.Controls.ControlPadding.createAll(20); 
 
      for (let i = 0; i < 4; i++) { 
         const canvas = document.createElement("canvas"); 
         canvas.width = 200; 
         canvas.height = 200; 
         const ctx = canvas.getContext("2d"); 
         ctx.fillStyle = "white"; 
         ctx.fillRect(0, 0, 200, 200); 
         ctx.fillStyle = "blue"; 
         ctx.fillRect(i * 50, i * 50, 50, 50); 
 
         const item = new lt.Controls.ImageViewerItem(); 
         item.canvas = canvas; 
         item.text = "Item " + i; 
         viewer.items.add(item); 
      } 
      viewer.endUpdate(); 
 
      viewer.interactiveModes.clear(); 
      const pagerInteractiveMode = new lt.Controls.ImageViewerPagerInteractiveMode(); 
      viewer.interactiveModes.add(pagerInteractiveMode); 
   } 
} 
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 | PagerInteractiveMode</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.InteractiveMode.PagerInteractiveMode(); 
 
   }; 
</script> 
</html> 
Requirements

Target Platforms

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

Leadtools.Controls Assembly
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2022 LEAD Technologies, Inc. All Rights Reserved.