ImageViewerRubberBandInteractiveMode Object


Draws a shape on the viewer.


JavaScript Syntax
function lt.Controls.ImageViewerRubberBandInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode 
TypeScript Syntax
class lt.Controls.ImageViewerRubberBandInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode 


ImageViewerRubberBandInteractiveMode derives from ImageViewerInteractiveMode and subscribes to the following events of the InteractiveService:

ImageViewerRubberBandInteractiveMode works as follows:

  1. When DragStarted is received, InteractiveEventArgs.IsHandled is set to true and a temporary HTML5 Canvas Element is created on top of the viewer to draw the rubber band shape. The following properties are used to customize the appearance of this canvas: ShapeBorderColor, BorderStyle and BorderThickness and the event RubberBandStarted is fired. Note that if you set your own canvas into the InteractiveModeCanvas property, then this object will not create a canvas (nor use the above properties), instead, your canvas will be used as the surface for rubber banding.

  2. When DragDelta is received, InteractiveEventArgs.IsHandled is set to true and the temporary canvas is moved to the current position. The event RubberBandDelta is fired.

  3. When DragCompleted is received, InteractiveEventArgs.IsHandled is set to true, the temporary canvas is removed, and the event RubberBandCompleted is fired.

ImageViewerRubberBandInteractiveMode interactive mode does not perform any action on the viewer (besides drawing, moving and then removing the shape). It is up to the user to implement any custom operation required. For example, to select a region of interest on the image. ImageViewerZoomToInteractiveMode derives from ImageViewerRubberBandInteractiveMode and calls ImageViewer.ZoomToRect upon the receiving of RubberBandCompleted event. Drawing a rubber-band on the viewer is usually followed by another user operation to perform the action. In most cases, the rubber band is to be restricted on the "work" area. The RestrictToWorkBounds can control this behavior.

For more information, refer to Image Viewer Interactive Modes.


This example will use ImageViewerRubberBandInteractiveMode to select a region of interest in the image. When the user finishes selecting the area, the example will draw a blue with yellow border rectangle on the image.

Tip: You can zoom and pan the image before clicking 'Example' to show that the calculations for getting the rubber band value in image coordinates are correct.

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 _rubberBandShapesComboBox = document.createElement("select"); 
var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
for (var shape in lt.Controls.ImageViewerRubberBandShape) { 
   if (shape.toString() == "__typeName") 
   var option = document.createElement("option"); 
   option.textContent = shape.toString(); 
_rubberBandShapesComboBox.selectedIndex = rubberBandMode.shape; 
_rubberBandShapesComboBox.addEventListener("change", function () { 
   rubberBandMode.shape = this.selectedIndex; 
var myImageViewer = this._imageViewer; 
rubberBandMode.rubberBandCompleted.add(function (sender, e) { 
   if (e.isCanceled) 
   if (rubberBandMode.item == null) 
   //var points = new LeadPoint[e.Points.Count]; 
   var points = new Array(e.points.length); 
   for (var i = 0; i < points.length; i++) 
      points[i] = lt.LeadPointD.create(e.points[i].x, e.points[i].y); 
   var min = lt.LeadPointD.empty; 
   var max = lt.LeadPointD.empty; 
   for (var i = 0; i < points.length; i++) { 
      points[i] = myImageViewer.convertPoint(rubberBandMode.item, lt.Controls.ImageViewerCoordinateType.control, lt.Controls.ImageViewerCoordinateType.image, points[i]); 
      if (i == 0) { 
         min = points[i].clone(); 
         max = points[i].clone(); 
      else { 
         min.x = Math.min(min.x, points[i].x); 
         min.y = Math.min(min.y, points[i].y); 
         max.x = Math.max(max.x, points[i].x); 
         max.y = Math.max(max.y, points[i].y); 
   var center = lt.LeadPointD.create(min.x + (max.x - min.x) / 2, min.y + (max.y - min.y) / 2); 
   var item = rubberBandMode.item; 
   var itemCanvas = item.canvas; 
   var ctx = itemCanvas.getContext("2d"); 
   switch (rubberBandMode.shape) { 
      case lt.Controls.ImageViewerRubberBandShape.rectangle: 
      case lt.Controls.ImageViewerRubberBandShape.ellipse: 
            var rect = lt.LeadRectD.fromLTRB(points[0].x, points[0].y, points[1].x, points[1].y); 
            if (rubberBandMode.shape == lt.Controls.ImageViewerRubberBandShape.rectangle) 
               ctx.rect(rect.x, rect.y, rect.width, rect.height) 
               drawEllipse(ctx, rect.x, rect.y, rect.width, rect.height) 
      case lt.Controls.ImageViewerRubberBandShape.roundRectangle: 
            var radius = rubberBandMode.roundRectangleRadius; 
            var rect = lt.LeadRectD.fromLTRB(points[0].x, points[0].y, points[1].x, points[1].y); 
            addRoundRect(ctx, rect, radius.width); 
      case lt.Controls.ImageViewerRubberBandShape.freehand: 
            var firstPoint = true; 
            var lastPoint = lt.LeadPointD.empty; 
            for (var i = 0; i < points.length; i++) { 
               if (!firstPoint) { 
                  ctx.moveTo(lastPoint.x, lastPoint.y); 
                  ctx.lineTo(points[i].x, points[i].y); 
                  firstPoint = false; 
               lastPoint = points[i]; 
   if (itemCanvas.width > 1000 || itemCanvas.height > 1000) 
      ctx.lineWidth = 8; 
   ctx.strokeStyle = "Yellow"; 
rubberBandMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet; 
rubberBandMode.itemPart = lt.Controls.ImageViewerItemPart.image; 
rubberBandMode.isEnabled = true; 
var autopan = new lt.Controls.ImageViewerAutoPanInteractiveMode(); 
autopan.panDelay = 100; 
var addRoundRect = function (ctx, bounds, radius) { 
   if (bounds.width < 2 * radius) radius = bounds.width / 2; 
   if (bounds.height < 2 * radius) radius = bounds.height / 2; 
   ctx.moveTo(bounds.x + radius, bounds.y); 
   ctx.arcTo(bounds.x + bounds.width, bounds.y, bounds.x + bounds.width, bounds.y + bounds.height, radius); 
   ctx.arcTo(bounds.x + bounds.width, bounds.y + bounds.height, bounds.x, bounds.y + bounds.height, radius); 
   ctx.arcTo(bounds.x, bounds.y + bounds.height, bounds.x, bounds.y, radius); 
   ctx.arcTo(bounds.x, bounds.y, bounds.x + bounds.width, bounds.y, radius); 
   ctx.stroke();  // Draw it 
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.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); 


Target Platforms

Products | Support | Contact Us | Copyright Notices
© 1991-2017 LEAD Technologies, Inc. All Rights Reserved.
Leadtools.Controls Assembly
Click or drag to resize