Draws and pans a spy glass on the viewer.
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.
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.
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:
var spyGlass = new lt.Controls.ImageViewerSpyGlassInteractiveMode();
spyGlass.backgroundColor = "rgba(255, 255, 0, 0.5)";
spyGlass.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet;
spyGlass.ensureVisible = false;
Medical Web Viewer .NET