ImageViewerPanZoomInteractiveMode Object

JavaScript
WinRT JavaScript

function Leadtools.Controls.ImageViewerPanZoomInteractiveMode()

!MISSING Scrap '_RTJavaScript_Class_SYNTAX'!

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 browser 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 browser 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.

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 ImageViewer.SetMouseInteractiveMode. For example, the following snippet will assign pan to the left button and zoom to the right:

             // Pan only to left button
             var panMode = new Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
             panMode.set_enablePan(true);
             panMode.set_enableZoom(false);
             viewer.setMouseInteractiveMode(Leadtools.Controls.MouseButton.left, panMode);
            
             // Zoom only to right button
             var zoomMode = new Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
             zoomMode.set_enablePan(false);
             zoomMode.set_enableZoom(true);
             zoomMode.set_zoomKeyModifier(Leadtools.Controls.Keys.none);
             viewer.setMouseInteractiveMode(Leadtools.Controls.MouseButton.right, zoomMode);

This mode uses ImageViewer.ScrollBy to pan. Hence, the rules of ImageViewer.RestrictHiddenScrollMode apply to the panning performed by this mode. For example, when ImageViewer.RestrictHiddenScrollMode is true, you cannot pan outside the maximum boundaries of the image using this interactive mode. When the value of ImageViewer.RestrictHiddenScrollMode 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 ZoomAtImageControlCenter property as follows:

ZoomAtImageControlCenter is set to true: The zoom origin will always be the center of the image.
ZoomAtImageControlCenter is set to false: The zoom origin will be the current mouse or touch position.

ImageViewer has a 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 can't zoom out to an unreasonable value using this mode.

For an example, refer to ImageViewer.DefaultInteractiveMode.

Reference

ImageViewerPanZoomInteractiveMode Members
Leadtools.Controls Namespace