PostRender Event

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