ImageViewerPanZoomInteractiveMode Object

Summary

Provides interactive pan and zoom user interface functionality to an ImageViewer.

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

ImageViewerPanZoomInteractiveMode derives from ImageViewerInteractiveMode and adds support for interactive pan and zoom (scale) user interface functionality to an ImageViewer.

This mode subscribes to the following events of the InteractiveService:

When used on a platform that support touch events (such as a mobile phone or a tablet), this object allows you to perform functionality such as panning and zooming with one finger or zooming using a "pinch" two fingers gesture as follows:

Functionality Members

Pan the image on the viewer using one finger (press and drag to pan) and zoom the image on the viewer using two fingers "pinch" gesture (press two fingers and drag both to zoom). This is the default behavior

Set EnablePan to true, EnableZoom to true and EnablePinchZoom to true (all default values).

Pan the image on the viewer using one finger (press and drag to pan). No zoom.

Set EnablePan to true and EnableZoom to false.

Zoom the image on the viewer using one finger (press and drag to zoom). No pan

Set EnablePan to false, EnableZoom to true and EnablePinchZoom to false.

Zoom the image on the viewer using two fingers "pinch" gesture (press two fingers and drag both to zoom). No pan.

Set EnablePan to false, EnableZoom to true and EnablePinchZoom to true.

When used on a platform that support mouse (such as a desktop), this object allows you to perform functionality such as panning and zooming with the mouse and modifier keys as follows:

Functionality Members

Pan the image on the viewer using the mouse (press and drag to pan). If the modifier key is pressed, then zoom the image on the viewer instead. This is the default behavior

Set EnablePan to true, EnableZoom to true and ZoomKeyModifier to the modifier key, such as Keys.Control. (all default values).

Pan the image on the viewer using the mouse (press and drag to pan). No zoom.

Set EnablePan to true and EnableZoom to false.

Zoom the image on the viewer using the mouse (press and drag to zoom). No pan

Set EnablePan to false, EnableZoom to true and ZoomKeyModifier to Keys.None.

Along with the above, this mode supports double tapping (or double clicking) to fit the viewer to a predefined ControlSizeMode.

Keyboard panning and zooming can also be enabled using IsKeyboardEnabled and PageKeyModifier.

Using a combination of the above, you can assign separate instances of ImageViewerPanZoomInteractiveMode each with their own options to the left and right mouse using MouseButtons.

This mode uses ImageViewer.ScrollByRestrict to pan. Hence, the rules of RestrictScroll apply to the panning performed by this mode. For example, when RestrictScroll is true, you cannot pan outside the maximum boundaries of the image using this interactive mode. When the value of RestrictScroll is false, you have unlimited pan support using this mode.

This mode uses ImageViewer.Zoom to zoom. This method accepts as a parameter the origin of the zoom operation and you can control this using the ZoomAtWorkBoundsCenter property as follows:

This mode performs the main operations in the Pan, Zoom and DoubleTapZoom protected methods. ImageViewer has an ImageViewer.MaximumScaleFactor field and a ImageViewer.MinimumScaleFactor field that define the maximum and minimum scale factor allowed. This mode uses the maximum value defined in ImageViewer.MaximumScaleFactor, but defines its own minimum value set in ImageViewerPanZoomInteractiveMode.MinimumScaleFactor. This is done to ensure that the image is always visible and cannot zoom out to an unreasonable value using this mode. ImageViewerPanZoomInteractiveMode supports inertia scrolling when performing pan. This is disabled by default and can be enabled by accessing the InertiaScrollOptions property. For more information, refer to Image Viewer Interactive Modes.

As is customary with most built-in interactive modes, this mode will set InteractiveEventArgs.IsHandled to true under the following conditions:

Additionally, InteractiveEventArgs.IsHandled may be set to true if a key press causes the viewer to scroll (through IsKeyboardEnabled and PageKeyModifier) or if DoubleTapZoom is used.

Example
ImageViewer.ts
ImageViewer.js
ImageViewer.html 
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); 
      }); 
   } 
} 
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 | Image Viewer</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.Example(); 
   }; 
</script> 
</html>
Requirements

Target Platforms

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

Leadtools.Controls Assembly
Introduction
Getting Started
Namespaces
Leadtools.Controls Namespace
Assemblies
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2023 LEAD Technologies, Inc. All Rights Reserved.