LEADTOOLS JavaScript (Leadtools.Controls)
LEAD Technologies, Inc

SetMouseInteractiveMode Method

Example 

The mouse to associate with the interactive mode.
The new interactive mode to use.
Sets the current ImageViewerInteractiveMode for the specified MouseButton.
Syntax
 function Leadtools.Controls.ImageViewer.setMouseInteractiveMode( 
   button ,
   mode 
)
!MISSING Scrap '_RTJavaScript_Method_SYNTAX'!

Parameters

ParameterTypeDescription
buttonMouseButtonThe mouse to associate with the interactive mode.
modeImageViewerInteractiveModeThe new interactive mode to use.
Remarks

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

Start with the ImageViewer example, remove all the code inside the example function (search for the // TODO: add example code here comment) and insert the following code:

Open the HTML page in your browser, now when you click the Example button, "pan zoom" will be used as the user clicks and drags with the left button and magnify glass as the user clicks and drags with the right button.

  • JavaScript
  •   
     
    example: function SiteLibrary_DefaultPage$example(viewer) {
       var exampleLabel = document.getElementById("exampleLabel");
    
       // This will be used by mouse and touch, so delcare it here once
       var zoomPan = new Leadtools.Controls.ImageViewerPanZoomInteractiveMode();
    
       // Check if the browser supports mouse
       if(Leadtools.LTHelper.supportsMouse) {
          // Zoom pan with left button
          viewer.setMouseInteractiveMode(Leadtools.Controls.MouseButton.left, zoomPan);
    
          // Magnify glass with right button
          var magnifyGlass = new Leadtools.Controls.ImageViewerMagnifyGlassInteractiveMode();
          viewer.setMouseInteractiveMode(Leadtools.Controls.MouseButton.right, magnifyGlass);
    
          exampleLabel.textContent = "Left button and drag to pan, left button with control and drag to zoom, right button use the magnify glass";
       } else {
          // Touch device, set zoom pan only
          viewer.set_touchInteractiveMode(zoomPan);
          exampleLabel.textContent = "Touch and drag to pan, pinch to zoom";
       }
    },
See Also

Reference

ImageViewer Object
ImageViewer Members

 

 


Products | Support | Contact Us | Copyright Notices

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