ImageViewerSpyGlassInteractiveMode Object

Summary

Draws and pans a spy glass on the viewer.

Syntax

JavaScript Syntax

function lt.Controls.ImageViewerSpyGlassInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

TypeScript Syntax

class lt.Controls.ImageViewerSpyGlassInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode

Remarks

The ImageViewerSpyGlassInteractiveMode derives from the ImageViewerInteractiveMode and subscribes to the following events of the InteractiveService:

The ImageViewerSpyGlassInteractiveMode interactive mode does not perform any action on the viewer (besides drawing the spy glass). It is up to the user to implement any custom operation required. For example, to implement a magnify glass ImageViewerMagnifyGlassInteractiveMode derives from the ImageViewerSpyGlassInteractiveMode and overrides the OnDrawImage method to draw a magnified version of the area under the spy glass.

The ImageViewerSpyGlassInteractiveMode works as follows:

When a dragStarted event is received, the InteractiveEventArgs.IsHandled property is set to true and a temporary HTML5 Canvas Element is created on top of the viewer for drawing the spy glass. Note that if you set your own canvas into the InteractiveModeCanvas property, then this object will not create a canvas (nor use the above properties). Instead, your canvas will be used as the surface for the spy glass.
When a dragDelta event is received, the InteractiveEventArgs.isHandled property is set to true and the temporary canvas is moved to the current position. The ImageViewerSpyGlassInteractiveMode.DrawImage event is fired at this time to allow implementers and listeners to perform any custom operation on the spy glass surface.
When a dragCompleted event is received, the InteractiveEventArgs.isHandled property is set to true and the temporary canvas is removed.

The ImageViewerSpyGlassInteractiveMode also supports redirecting the output to an external canvas instead of the viewer surface. For an example, refer to RedirectCanvas. Neither ImageViewerSpyGlassInteractiveMode nor ImageViewerMagnifyGlassInteractiveMode works when the image viewer is in Elements Mode, since the viewer does not paint the items.

For more information, refer to Image Viewer Interactive Modes.

Example

This example will use the ImageViewerSpyGlassInteractiveMode to show an inverted portion of the image under the mouse.

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:

JavaScript Example

this._imageViewer.interactiveModes.clearItems(); 
this._imageViewer.interactiveModes.beginUpdate(); 
var spyGlass = new lt.Controls.ImageViewerSpyGlassInteractiveMode(); 
spyGlass.backgroundColor = "rgba(255, 255, 0, 0.5)"; 
spyGlass.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet; 
spyGlass.ensureVisible = false; 
this._imageViewer.interactiveModes.add(spyGlass); 
this._imageViewer.interactiveModes.endUpdate();

Requirements

Target Platforms

Reference

ImageViewerSpyGlassInteractiveMode Members

Leadtools.Controls Namespace

Help Version 19.0.2017.10.27