ImageViewerSpyGlassInteractiveMode Object

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

• DragStarted

• DragDelta

• DragCompleted

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, a temporary HTML5 Canvas Element is created on top of the viewer, this canvas is used to draw 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, 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, 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.

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:

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();