ImageViewerSpyGlassInteractiveMode Object

Draws and pans a spy glass on top of the viewer.

Object Model

Syntax

JavaScript

function Leadtools.Controls.ImageViewerSpyGlassInteractiveMode()

Remarks

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

ImageViewerSpyGlassInteractiveMode works as follows:

When InteractiveService.DragStarted is received, a temporary 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.
When InteractiveService.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.
When InteractiveService.DragCompleted is received, the temporary canvas is removed.

ImageViewerSpyGlassInteractiveMode interactive mode does not perform any action on the viewer (besides drawing, moving and then removing 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.

Example

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

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 and click the example button.

JavaScript

example: function SiteLibrary_DefaultPage$example(viewer) {
   // Set spy glass as the default interactive mode
   var spyglassMode = new lt.Controls.ImageViewerSpyGlassInteractiveMode();

   // Customize it
   spyglassMode.set_borderColor("red");
   spyglassMode.set_borderThickness(2);
   spyglassMode.set_shape(lt.Controls.ImageViewerSpyGlassShape.roundRectangle);
   spyglassMode.set_crosshair(lt.Controls.ImageViewerSpyGlassCrosshair.fine);
   spyglassMode.set_size(lt.LeadSizeD.create(100, 100));

   // Hook to its DrawImage event
   spyglassMode.add_drawImage(this.drawSpyImage);

   viewer.set_defaultInteractiveMode(spyglassMode);

   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = "Shows an inverted portion of the image under the mouse cursor or touch position";
},

// Called by the base class when the mode is stopped
drawSpyImage: function SiteLibrary_DefaultPage$drawSpyImage(sender, e) {
   // Get the context
   var context = e.get_context();
   context.setTransform(1, 0, 0, 1, 0, 0);

   var size = sender.get_size();
   if (size.get_isEmpty())
      size = lt.LeadSizeD.create(0, 0);

   var destRect = e.get_destinationRectangle();
   if (destRect.get_isEmpty())
      destRect = lt.LeadRectD.create(0, 0, 0, 0);

   // Apply the trnasformations
   context.translate(-destRect.get_left(), -destRect.get_top());

   context.save();

   // Get the viewer
   var viewer = sender.get_imageViewerControl();

   var matrix = viewer.get_transform();
   context.transform(matrix.get_m11(), matrix.get_m12(), matrix.get_m21(), matrix.get_m22(), matrix.get_offsetX(), matrix.get_offsetY());

   var imageSize = viewer.get_imageSize();

   // Draw the image on the canvas
   context.drawImage(viewer.get_backCanvas(), 0, 0, imageSize.get_width(), imageSize.get_height());

   // Invert it
   // If the image is hosted on a different domain than the script, you can’t access image data without causing a security exception.
   var imageData = context.getImageData(0, 0, destRect.get_width(), destRect.get_height());
   var pixels = imageData.data;

   for (var i = 0; n = pixels.length, i < n; i += 4) {
      pixels[i  ] = 255 - pixels[i  ]; // red
      pixels[i+1] = 255 - pixels[i+1]; // green
      pixels[i+2] = 255 - pixels[i+2]; // blue
   }
   context.putImageData(imageData, 0,0);

   context.restore();
},

ImageViewerSpyGlassInteractiveMode Object

Reference