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

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

ImageViewerSpyGlassInteractiveMode interactive mode does not perform any action on the viewer (besides drawing the 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 ImageViewerSpyGlassInteractiveMode and overrides the OnDrawImage method to draw a magnified version of the area under the spy glass.

ImageViewerSpyGlassInteractiveMode works as follows:

  1. When DragStarted is received, InteractiveEventArgs.IsHandled 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 (and nor use the above properties) - instead, your canvas will be used as the surface for spy glass.

  2. When DragDelta is received, InteractiveEventArgs.IsHandled 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.

  3. When DragCompleted is received, InteractiveEventArgs.IsHandled to true and the temporary canvas is removed.

ImageViewerSpyGlassInteractiveMode also supports redirecting the output to an external canvas instead of the viewer surface, for an example, refer to RedirectCanvas. ImageViewerSpyGlassInteractiveMode and ImageViewerMagnifyGlassInteractiveMode do not work 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 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

Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
Leadtools.Controls Assembly
Click or drag to resize