redirectCanvas Property (ImageViewerSpyGlassInteractiveMode)

Summary

External HTML5 Canvas Element that can be used to re-direct the spy glass render.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewerSpyGlassInteractiveMode.prototype, 'redirectCanvas', 
	get: function(), 
	set: function(value) 
)

TypeScript Syntax

redirectCanvas: HTMLCanvasElement;

Property Value

The external canvas that can be used to re-direct the spy glass render. Default value is null.

Remarks

ImageViewerSpyGlassInteractiveMode supports redirecting the render output to an external canvas instead of the area under the mouse in the viewer. When this value is set to a valid canvas on the page, the interactive mode will use this canvas as the target for the spy glass rendering instead of creating an internal instance and rendering the glass over the image viewer.

Example

JavaScript Example

var panel = document.createElement("div"); 
panel.style.width = "300"; 
document.body.appendChild(panel); 
 
var label = document.createElement("h5"); 
label.textContent = "Double click to switch between viewer and here"; 
panel.appendChild(label); 
 
var redirectCanvas = document.createElement("canvas"); 
redirectCanvas.style.background = "gray"; 
redirectCanvas.style.visibility = "hidden"; 
panel.appendChild(redirectCanvas); 
 
var mode = new lt.Controls.ImageViewerMagnifyGlassInteractiveMode(); 
mode.workStarted.add(function (sender, e) { 
   if (mode.redirectCanvas != null) 
      mode.redirectCanvas.style.visibility = "visible"; 
}); 
 
mode.workCompleted.add(function (sender, e) { 
   if (mode.redirectCanvas != null) 
      mode.redirectCanvas.style.visibility = "hidden"; 
}); 
 
mode.redirectCanvas = redirectCanvas; 
 
panel.addEventListener("dblclick", function () { 
   if (mode.redirectCanvas == null) 
      mode.redirectCanvas = redirectCanvas; 
   else 
      mode.redirectCanvas = null; 
}); 
 
this._imageViewer.interactiveModes.clearItems(); 
this._imageViewer.interactiveModes.beginUpdate(); 
this._imageViewer.interactiveModes.add(mode); 
this._imageViewer.interactiveModes.endUpdate(); 
 
var _shapeComboBox = document.createElement("select"); 
document.body.appendChild(_shapeComboBox); 
 
for (var shape in lt.Controls.ImageViewerSpyGlassShape) { 
   if (shape.toString() == "__typeName") 
      break; 
   var option = document.createElement("option"); 
   option.textContent = shape.toString(); 
   _shapeComboBox.appendChild(option); 
   _shapeComboBox.selectedIndex = mode.shape; 
   _shapeComboBox.addEventListener("change", function () { 
      mode.shape = _shapeComboBox.selectedIndex; 
   }); 
}