postRender Event (ImageViewer)

Summary

Occurs after the view is rendered.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewer.prototype,'postRender',  
	get: function(), 
	set: function(value) 
) 
function postRender.add(function(sender, e)); 
function postRender.remove(function(sender, e));

TypeScript Syntax

postRender: void;

Remarks

For more information, refer to Image Viewer Rendering.

Example

This example will show how to customize the view rendering to draw extra shapes with and without transformation.

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

// Clear all the images already the viewer 
this._imageViewer.items.clear(); 
// Use vertical view layout 
this._imageViewer.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout(); 
// Make sure the item size is larger than the image size (thumbnails mode) 
this._imageViewer.itemSize = lt.LeadSizeD.create(200, 200); 
this._imageViewer.itemPadding = lt.Controls.ControlPadding.create(8, 8, 8, 20); 
this._imageViewer.imageBorderThickness = 1; 
 
// Add 4 items to the viewer 
for (var page = 1; page <= 4; page++) { 
   var item = new lt.Controls.ImageViewerItem(); 
   var imageUrl = "http://demo.leadtools.com/images/png/ocr" + page.toString() + ".png"; 
   item.url = imageUrl; 
   item.text = "Item " + (page - 1).toString(); 
   this._imageViewer.items.add(item); 
} 
 
var drawEllipse = function (ctx, x, y, w, h) { 
   var kappa = .5522848, 
      ox = (w / 2) * kappa, // control point offset horizontal 
      oy = (h / 2) * kappa, // control point offset vertical 
      xe = x + w,           // x-end 
      ye = y + h,           // y-end 
      xm = x + w / 2,       // x-middle 
      ym = y + h / 2;       // y-middle 
 
   ctx.beginPath(); 
   ctx.moveTo(x, ym); 
   ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); 
   ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); 
   ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); 
   ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); 
   ctx.closePath(); 
   ctx.stroke(); 
}; 
 
// Render on the view 
this._imageViewer.postRender.add(function (sender, e) { 
   // Rendering the whole view 
   var ctx = e.context; 
 
   // Blue ellipse at fixed position. This will stay the same and will not scroll or zoom 
   ctx.fillStyle = "rgba(0, 0, 255, .5)"; 
   drawEllipse(ctx, 0, 0, 100, 100); 
   ctx.fill(); 
 
   // Red ellipse at relative position, this will scroll and zoom with the view 
   ctx.save(); 
 
   var transform = this.owner._imageViewer.viewTransform; 
   ctx.transform(transform.m11, transform.m12, transform.m21, transform.m22, transform.offsetX, transform.offsetY); 
 
   ctx.fillStyle = "rgba(255, 0, 0, .5)"; 
   drawEllipse(ctx, 0, 0, 100, 100); 
   ctx.fill(); 
   ctx.restore(); 
}); 
 
// Render on each item 
this._imageViewer.postRenderItem.add(function (sender, e) { 
   var item = e.item; 
   var ctx = e.context; 
 
   ctx.save(); 
   // Get the bounding rectangle for the image 
   var bounds = lt.LeadRectD.create(0, 0, item.image.width, item.image.height); 
 
   // Add the image transform to the graphics 
   var transform = this.owner._imageViewer.getItemImageTransform(item); 
   ctx.transform(transform.m11, transform.m12, transform.m21, transform.m22, transform.offsetX, transform.offsetY); 
 
   // Red hilight on top of each item image 
   ctx.fillStyle = "rgba(255, 0, 0, .5)"; 
   ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height); 
   ctx.restore(); 
});