RenderRedirect Method

Render the content of the viewer to an external context.

Syntax

JavaScript

 function Leadtools.Controls.ImageViewer.renderRedirect( 
   context ,
   options ,
   clipRectangle 
)

Parameters

Parameter	Type	Description
context	CanvasContext2D	Target HTML5 Canvas Element context to render the content of the viewer to.
options	ImageViewerRenderRedirectOptions	Rendering options
clipRectangle	LeadRectD	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 targetting 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

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

RenderRedirect Method

Parameters

Reference