ImageViewerInteractiveMode Object

Base class for the rich user experience features of ImageViewer

Object Model

Syntax

JavaScript

function Leadtools.Controls.ImageViewerInteractiveMode()

Remarks

ImageViewerInteractiveMode works with the InteractiveService object of the ImageViewer to provide rich user interface experience when the user interacts with the viewer using mouse or touch.

ImageViewerInteractiveMode is a base abstract class, you can derive your own class to handle custom interaction with the viewer. Out of the box, LEADTOOLS provide the following implementations:

Class	Description
ImageViewerPanZoomInteractiveMode	Supports panning and zooming with the mouse and multi-touch.
ImageViewerZoomToInteractiveMode	Zooms to the image rectangle created by the user using mouse or touch.
ImageViewerMagnifyGlassInteractiveMode	Magnifies the portion of the image under the mouse or touch.
ImageViewerCenterAtInteractiveMode	Centers (and optionally zooms) the image around the user mouse click or touch tap.
ImageViewerZoomAtInteractiveMode	Zooms the image around the user mouse click or touch tap.
ImageViewerRubberBandInteractiveMode	Draws a temporary rectangle on top of the image using the mouse or touch. Can be used to perform any extra functionality such as drawing a region of interest for a user-defined operation.

ImageViewerInteractiveMode has the following functionality:

Member	Description
WorkingCursor and IdleCursor.	Cursor to use when the interactive mode is in an idle or working state (for desktop browsers).
MouseButton	The mouse button attached to this mode (for desktop browsers)

To use an interactive mode, you create an instance of any of the derived classes and assign it to the viewer using one of the following methods:

ImageViewer.DefaultInteractiveMode: Assigns the interactive mode to the left mouse button on desktop browsers or default touch events on devices that support touch.
ImageViewer.TouchInteractiveMode: Assigns the interactive mode in devices that support touch.
ImageViewer.SetMouseInteractiveMode: Assigns the interactive mode to the specified mouse button on desktop browsers.
ImageViewer.MouseWheelInteractiveMode: Assigns the interactive mode to the mouse wheel on desktop browsers.

On desktop browsers, you can use multiple interactive modes at the same time. For example, use the following code to support panning/zooming with the left mouse button and magnify glass with the right button:


            viewer.setMouseInteractiveMode(lt.Controls.MouseButton.left, new lt.Controls.ImageViewerPanZoomInteractiveMode());
            viewer.setMouseInteractiveMode(lt.Controls.MouseButton.right, new lt.Controls.ImageViewerMagnifyGlassInteractiveMode());

On browsers that support only touch, such as mobile phones and tablets, you can use only one interactive mode at a time. This does not mean only one finger touch is supported: some interactive modes (such as ImageViewerPanZoomInteractiveMode) support multiple touch operations such as pinch to zoom.

Example

This example will create a custom ImageViewerInteractiveMode that will rotate the image when the user clicks or touches and drags on the viewer.

Copy and paste this example into your favorite text editor and save it into a folder on your disk with any name such as Default.htm. Inside that folder, create a directory with the name "Scripts". Copy the required .js files in the example from "LEADTOOLS Installation Folder\Bin\JS" to "Scripts". Finally, open the HTML file in any browser that supports HTML 5.

Open the HTML page in your browser. Now when you click the Example button and click or touch and drag, note that the image is rotating.

JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Leadtools Examples</title>
   <meta http-equiv="X-UA-Compatible" content="IE=9" />
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <style>
      #imageViewerDiv
      {
         border: 1px solid #000000;
         width: 400px;
         height: 400px;
         background-color: #7F7F7F;
      }
   </style>
   <script type="text/javascript" src="Scripts/Leadtools.js"></script>
   <script type="text/javascript" src="Scripts/Leadtools.Controls.js"></script>
   <script type="text/javascript">
      (function () {
         // RotateInteractiveMode
         var _this = null;

         RotateInteractiveMode = function RotateInteractiveMode() {
             RotateInteractiveMode.initializeBase(this);
             _this = this;
         }

         RotateInteractiveMode.prototype = {

             // Helper toString method
             toString: function RotateInteractiveMode$toString() {
                 return "Rotate";
             },

             // Called by the base class when the mode is started
             start: function RotateInteractiveMode$start(viewer) {
                 // Always call base class start method
                 RotateInteractiveMode.callBaseMethod(this, "start", [ viewer ]);

                 // Subscribe to the DragStarted, DragDelta and DragCompleted events
                 var service = RotateInteractiveMode.callBaseMethod(this, "get_interactiveService");
                 service.add_dragStarted(this._service_DragStarted);
                 service.add_dragDelta(this._service_DragDelta);
                 service.add_dragCompleted(this._service_DragCompleted);
             },

             // Called by the base class when the mode is stopped
             stop: function RotateInteractiveMode$stop(viewer) {
                 // Check if we have started
                 if (this.get_isStarted()) {
                     // UnSubscribe to events
                     var service = RotateInteractiveMode.callBaseMethod(this, "get_interactiveService");
                     service.remove_dragStarted(this._service_DragStarted);
                     service.remove_dragDelta(this._service_DragDelta);
                     service.remove_dragCompleted(this._service_DragCompleted);

                     // Always call base class stop method
                     RotateInteractiveMode.callBaseMethod(this, "stop", [ viewer ]);
                 }
             },

             // Called when the user starts a drag operation
             _service_DragStarted: function RotateInteractiveMode$_service_DragStarted(sender, e) {
                 if (!_this.canStartWork(e)) {
                     return;
                 }

                 // Inform whoever is listening that we have started working
                 _this.onWorkStarted(lt.LeadEventArgs.Empty);
             },

             // Called when the user is dragging
             _service_DragDelta: function RotateInteractiveMode$_service_DragDelta(sender, e) {
                 // If we are not working (for example, the user has not clicked the mouse button yet), then
                 // nothing to do
                 if (!_this.get_isWorking()) {
                     return;
                 }

                 // Perform our operation, get the change of the drag, then increase
                 // or decrease the current rotation angle based on direction
                 var viewer = _this.get_imageViewerControl();
                 var change = e.get_change();
                 var delta = 4;
                 if (change.get_x() < 0) {
                     viewer.set_rotateAngle(viewer.get_rotateAngle() - delta);
                 }
                 else if (change.get_x() > 0) {
                     viewer.set_rotateAngle(viewer.get_rotateAngle() + delta);
                 }
             },

             // Called when the user has stopped dragging
             _service_DragCompleted: function RotateInteractiveMode$_service_DragCompleted(sender, e) {
                 if (!_this.get_isWorking()) {
                     return;
                 }

                 // Inform whoever is listening that we have stoped working
                 _this.onWorkCompleted(lt.LeadEventArgs.Empty);
             }
         }

         DefaultPage = function DefaultPage() {
         }

         DefaultPage.prototype = {

            run: function SiteLibrary_DefaultPage$run() {
               // Create the viewer
               var createOptions = new lt.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
               var viewer = new lt.Controls.ImageViewer(createOptions);

               // Set the image URL
               viewer.set_imageUrl("http://www.leadtools.com/images/boxshots/leadtools-200x250.jpg");

               // Set Rotate as our interactive mode
               viewer.set_defaultInteractiveMode(new RotateInteractiveMode());
            },

            dispose: function SiteLibrary_DefaultPage$dispose() {
            },
         }

         DefaultPage.registerClass("DefaultPage", null, ss.IDisposable);
         // Our Rotate interactive mode class, derives from lt.Controls.ImageViewerInteractiveMode
         RotateInteractiveMode.registerClass("RotateInteractiveMode", lt.Controls.ImageViewerInteractiveMode);

         var page = null;
         var windowLoad = null;
         var windowUnload = null;
         windowLoad = function (e) {
            window.removeEventListener("load", windowLoad, false);
            page = new DefaultPage();
            page.run();
            window.addEventListener("unload", windowUnload, false);
         };
         windowUnload = function (e) {
            window.removeEventListener("unload", windowUnload, false);
            page.dispose();
         };
         window.addEventListener("load", windowLoad, false);
      })();
   </script>
</head>
<body>
   <p>Click or touch and drag left and right to rotate</p>
   <div id="imageViewerDiv" />
</body>
</html>

ImageViewerInteractiveMode Object

Reference