In This Topic ▼

ImageViewerAutoPanInteractiveMode Object

Summary

Automatically pans the view when the mouse, touch screen, or multi-touch device is next to the edge.

Syntax

TypeScript

JavaScript

function lt.Controls.ImageViewerAutoPanInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

class lt.Controls.ImageViewerAutoPanInteractiveMode() 
	extends ImageViewerInteractiveMode

Remarks

The ImageViewerAutoPanInteractiveMode object derives from the ImageViewerInteractiveMode object and subscribes to the following events of the InteractiveService:

ImageViewerAutoPanInteractiveMode works when the view boundary is larger than the current image viewer client area as follows:

When the mouse or touch device is close to the edge of the viewer and there is more room in that direction, then this mode will call ImageViewer.scrollByRestrict to pan the view in that direction. How far the pointer is from the boundary to be considered "close" is determined by the edgeSize property. The delay before auto-panning starts is controlled by the beginDelay property.
If the user does not move the pointer and the panDelay has elapsed, then this mode will continue panning the viewer in that direction until it reaches the maximum value allowed by the scrollByRestrict method.

The ImageViewerAutoPanInteractiveMode can work with or without the user holding a mouse button down through the value of the mouseButtons property. It can also be combined with any other mode to allow auto-panning the viewer while the other mode is running because it:

Does not set the InteractiveEventArgs.isHandled property to true when working
Relies on the Move event instead of the more commonly used dragDelta event

The example code shows how to use auto-pan with the ImageViewerRubberBandInteractiveMode object to allow drawing a rubber band and moving toward the edge of the viewer when the user reaches the edge. This is the auto-pan performing extra functionality to rubber-band.

For more information, refer to Image Viewer Interactive Modes.

Example

This example will clear the PanZoom interactive mode and add a RubberBand and AutoPan mode. When using the rubberband mode and approaching the edge of the viewer, note that the autopan will cause the viewer to scroll automatically so the rubberband can continue in that direction.

AutoPanInteractiveMode.ts

ImageViewer.ts

AutoPanInteractiveMode.js

ImageViewer.js

AutoPanInteractiveMode.html

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_AutoPanInteractiveModeExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Zoom in for the scroll bars to appear 
      viewer.zoom(lt.Controls.ControlSizeMode.none, 4, viewer.defaultZoomOrigin); 
 
      viewer.interactiveModes.beginUpdate(); 
      viewer.interactiveModes.clear(); 
 
      // Add the autoPan mode 
      const autopan: lt.Controls.ImageViewerAutoPanInteractiveMode = new lt.Controls.ImageViewerAutoPanInteractiveMode(); 
      autopan.panDelay = 100; 
      viewer.interactiveModes.add(autopan); 
 
      // Add a rubber band mode that will be affected by autopan 
      const rubberband: lt.Controls.ImageViewerRubberBandInteractiveMode = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
      viewer.interactiveModes.add(rubberband); 
 
      viewer.interactiveModes.endUpdate(); 
   } 
}

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_AutoPanInteractiveModeExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Zoom in for the scroll bars to appear 
      viewer.zoom(lt.Controls.ControlSizeMode.none, 4, viewer.defaultZoomOrigin); 
 
      viewer.interactiveModes.beginUpdate(); 
      viewer.interactiveModes.clear(); 
 
      // Add the autoPan mode 
      const autopan = new lt.Controls.ImageViewerAutoPanInteractiveMode(); 
      autopan.panDelay = 100; 
      viewer.interactiveModes.add(autopan); 
 
      // Add a rubber band mode that will be affected by autopan 
      const rubberband = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
      viewer.interactiveModes.add(rubberband); 
 
      viewer.interactiveModes.endUpdate(); 
   } 
}

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 | AutoPanInteractiveMode</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.AutoPanInteractiveMode(); 
 
   }; 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageViewerAutoPanInteractiveMode Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 22.0.2023.2.4

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies