renderRedirect Method (ImageViewer)

Summary

Render the content of the viewer to an external context.

Syntax

JavaScript Syntax

ImageViewer.prototype.renderRedirect = function(context, options, clipRectangle)

TypeScript Syntax

renderRedirect(context: CanvasRenderingContext2D, options: ImageViewerRenderRedirectOptions, clipRectangle: LeadRectD): void;

Parameters

context

Target HTML5 Canvas Element context to render the content of the viewer to.

options

Rendering options

clipRectangle

Clipping rectangle to use.

Remarks

This method can be used to render the content of the viewer to an external context. ImageViewerPanControl uses this method to show a smaller version of the viewer in a separate external control.

To take a "snapshot" of the viewer surface to perform such operations as screen capture or printing, use RenderRedirect passing it the target context (of the printer or a bitmap).

To perform live updates for operations such as pan window, subscribe to the RedirectRender event to get notified whenever the viewer content is changed. Then call RenderRedirect to render the content of the viewer into the target device.

During the render cycle, the value of IsRenderRedirected will be set to true if this particular rendering operation is targeting an external device other than the viewer itself. If you are performing custom rendering, you can check the value of this property to apply any modification needed.

Example

This example will mirror the content of the viewer into an external canvas with live updates whenever the viewer content changes.

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:

JavaScript Example

var control = document.createElement("canvas"); 
control.width = 400; 
document.body.appendChild(control); 
 
var renderView = false; 
control.addEventListener("dblclick", function () { 
   renderView = !renderView; 
}); 
 
var delta = 20; 
var destRect = lt.LeadRectD.create(delta, delta, control.clientWidth - delta * 2, control.clientHeight - delta * 2); 
var clipRect = destRect; 
 
var options = new lt.Controls.ImageViewerRenderRedirectOptions(); 
var item = null; 
if (!renderView) 
   item = this._imageViewer.items.item(0); 
 
var sourceRect; 
 
if (item == null) 
   sourceRect = this._imageViewer.getViewBounds(true, false); 
else { 
   sourceRect = this._imageViewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, false); 
   options.renderBackgrounds = false; 
   options.renderBorders = false; 
   options.renderItemStates = false; 
   options.renderShadows = false; 
   options.renderText = false; 
} 
 
options.createTransform(this._imageViewer, destRect, sourceRect, lt.Controls.ControlSizeMode.fitAlways, lt.Controls.ControlAlignment.center, lt.Controls.ControlAlignment.center); 
clipRect = options.transform.transformRect(sourceRect); 
 
var ctx = control.getContext("2d"); 
this._imageViewer.renderRedirect(ctx, options, clipRect); 
 
ctx.strokeStyle = "black"; 
ctx.strokeRect(destRect.x, destRect.y, destRect.width + 1, destRect.height + 1); 
 
var rect; 
if (item == null) 
   rect = this._imageViewer.getViewBounds(true, true); 
else 
   rect = this._imageViewer.getItemViewBounds(item, lt.Controls.ImageViewerItemPart.image, true); 
 
var points = [lt.LeadPointD.create(rect.left, rect.top), lt.LeadPointD.create(rect.right, rect.bottom)]; 
options.transform.transformPoints(points); 
 
var xmin = points[0].x; 
var ymin = points[0].y; 
var xmax = xmin; 
var ymax = ymin; 
 
for (var i = 1; i < points.length; i++) { 
   if (points[i].x < xmin) xmin = points[i].x; 
   if (points[i].x > xmax) xmax = points[i].x; 
   if (points[i].y < ymin) ymin = points[i].y; 
   if (points[i].y > ymax) ymax = points[i].y; 
} 
 
var bounds = lt.LeadRectD.fromLTRB(xmin, ymin, xmax, ymax); 
 
ctx.strokeStyle = "Yellow"; 
ctx.strokeRect(bounds.x, bounds.y, bounds.width - 1, bounds.height - 1);