LEADTOOLS JavaScript (Leadtools.Controls)
LEAD Technologies, Inc

ImageViewerInteractiveMode Object

Example 

Members 
Base class for the rich user experience features of ImageViewer
Object Model
ImageViewerInteractiveMode ObjectImageViewer ObjectInteractiveService Object
Syntax
function Leadtools.Controls.ImageViewerInteractiveMode() 
!MISSING Scrap '_RTJavaScript_Class_SYNTAX'!
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 image rectangle created by the user using mouse or touch.

ImageViewerMagnifyGlassInteractiveMode

Magnifies the portion of the image under the mouse or touch.

ImageViewerCenterAtInteractiveMode

Centers the image inside the user based on 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:

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

    
            viewer.setMouseInteractiveMode(Leadtools.Controls.MouseButton.left, new Leadtools.Controls.ImageViewerPanZoomInteractiveMode());
            viewer.setMouseInteractiveMode(Leadtools.Controls.MouseButton.right, new Leadtools.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 of the interactive modes such as ImageViewerPanZoomInteractiveMode supports 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, now click or touch and drag and notice the image 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(Leadtools.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(Leadtools.LeadEventArgs.Empty);
                 }
             }
    
             DefaultPage = function DefaultPage() {
             }
    
             DefaultPage.prototype = {
    
                run: function SiteLibrary_DefaultPage$run() {
                   // Create the viewer
                   var createOptions = new Leadtools.Controls.ImageViewerCreateOptions("imageViewerDiv", "myViewer");
                   var viewer = new Leadtools.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 Leadtools.Controls.ImageViewerInteractiveMode
             RotateInteractiveMode.registerClass("RotateInteractiveMode", Leadtools.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>
See Also

Reference

ImageViewerInteractiveMode Members
Leadtools.Controls Namespace

 

 


Products | Support | Contact Us | Copyright Notices

© 2006-2012 All Rights Reserved. LEAD Technologies, Inc.