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

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