SetMouseInteractiveMode Method

 function Leadtools.Controls.ImageViewer.setMouseInteractiveMode( 
   button ,
   mode 
)

Parameters

Parameter	Type	Description
button	MouseButton	The mouse to associate with the interactive mode.
mode	ImageViewerInteractiveMode	The new interactive mode to use.

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.

• ImageViewer.PinchInteractiveMode: Assigns the interactive mode to the pinch gesture on browsers that support touch.

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 touch, such as mobile phones and tablets, you can assign multiple interactive modes at the same time. For example, use the following code to support zooming with the pinch gesture and magnify glass with the single touch gesture:

            viewer.set_TouchInteractiveMode(new lt.Controls.ImageViewerMagnifyGlassInteractiveMode());
            viewer.set_PinchInteractiveMode(new lt.Controls.ImageViewerPanZoomInteractiveMode());
            

Some of the interactive modes such as ImageViewerPanZoomInteractiveMode supports multiple touch operations such as pinch to zoom.

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.

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 lt.Controls.ImageViewerPanZoomInteractiveMode();

   // Check if the browser supports mouse
   if(lt.LTHelper.supportsMouse) {
      // Zoom pan with left button
      viewer.setMouseInteractiveMode(lt.Controls.MouseButton.left, zoomPan);

      // Magnify glass with right button
      var magnifyGlass = new lt.Controls.ImageViewerMagnifyGlassInteractiveMode();
      viewer.setMouseInteractiveMode(lt.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";
   }
},