ImageViewerZoomAtInteractiveMode Object

Summary

Zooms the image inside the viewer around the user's mouse click or touch tap.

Syntax

JavaScript Syntax

function lt.Controls.ImageViewerZoomAtInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

TypeScript Syntax

class lt.Controls.ImageViewerZoomAtInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode

Remarks

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

When a valid tap event occurs and InteractiveEventArgs.isHandled is false, this interactive mode will start working and set InteractiveEventArgs.isHandled to true.

This interactive mode uses ImageViewer.zoom to zoom the image inside the viewer based on the tap event. If the value of ScaleFactor is greater than 1, then the viewer will zoom the image in. If the value of ScaleFactor is less than 1, then the viewer will zoom the image out.

For more information, refer to Image Viewer Interactive Modes.

Example

This example will create an ImageViewer, set the interactive mode to Pan/Zoom, and add an image to the viewer.

JavaScript Example

var _label; 
var _firstCall = true; 
 
var example = function () { 
   // Example code goes here 
} 
 
// Create a panel to the top 
var panel = document.createElement("div"); 
panel.style.width = "800"; 
panel.style.height = "800"; 
document.body.appendChild(panel); 
 
// Add an "Example" button to the panel 
var button = document.createElement("button"); 
button.textContent = "&example"; 
button.addEventListener("click", example); 
panel.appendChild(button); 
 
// Add a label to the panel 
_label = document.createElement("h5"); 
_label.style.width = "800"; 
_label.textContent = "Example..."; 
panel.appendChild(_label); 
 
// Create the image viewer taking the rest of the form 
var imageViewerDiv = document.createElement("div"); 
document.body.appendChild(imageViewerDiv); 
this._imageViewer = new lt.Controls.ImageViewer(new lt.Controls.ImageViewerCreateOptions(imageViewerDiv)); 
 
// Add Pan/Zoom interactive mode 
// Click and drag to pan, CTRL-Click and drag to zoom in and out 
this._imageViewer.defaultInteractiveMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
 
// Load an image into the viewer 
var imageUrl = "http://demo.leadtools.com/images/png/ocr1.png"; 
this._imageViewer.url = imageUrl; 
 
_firstCall = true;

Requirements

Target Platforms

Reference

ImageViewerZoomAtInteractiveMode Members

Leadtools.Controls Namespace

Help Version 19.0.2017.10.27

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies