ImageViewerRubberBandInteractiveMode Object

Draws a shape on the viewer.

Syntax

JavaScript

function Leadtools.Controls.ImageViewerRubberBandInteractiveMode()

Remarks

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

ImageViewerRubberBandInteractiveMode works as follows:

When DragStarted is received, a temporary HTML5 Canvas Element is created on top of the viewer, this canvas is used to draw the rubber band shape. The following properties are used to customize the appearance of this canvas: Shape BorderColor, 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.
When DragDelta is received, the temporary canvas is moved to the current position and the event RubberBandDelta is fired.
When DragCompleted is received, 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.

Example

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

var _rubberBandShapesComboBox = document.createElement("select");
document.body.appendChild(_rubberBandShapesComboBox);

var rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode();

for (var shape in lt.Controls.ImageViewerRubberBandShape) {
   if (shape.toString() == "__typeName")
      break;
   var option = document.createElement("option");
   option.textContent = shape.toString();
   _rubberBandShapesComboBox.appendChild(option);
}

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

   if (rubberBandMode.item == null)
      return;

   //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");
   ctx.beginPath();

   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)
            else
               drawEllipse(ctx, rect.x, rect.y, rect.width, rect.height)
         }
         break;

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

      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);
               }
               else
                  firstPoint = false;

               lastPoint = points[i];
            }
         }
         break;

      default:
         break;
   }

   ctx.closePath();
   if (itemCanvas.width > 1000 || itemCanvas.height > 1000)
      ctx.lineWidth = 8;

   ctx.strokeStyle = "Yellow";
   ctx.stroke();

   myImageViewer.invalidate(lt.LeadRectD.empty);
});

this._imageViewer.interactiveModes.clearItems();

rubberBandMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet;
rubberBandMode.itemPart = lt.Controls.ImageViewerItemPart.image;
this._imageViewer.interactiveModes.beginUpdate();
this._imageViewer.interactiveModes.add(rubberBandMode);
rubberBandMode.isEnabled = true;
var autopan = new lt.Controls.ImageViewerAutoPanInteractiveMode();
autopan.panDelay = 100;
this._imageViewer.interactiveModes.add(autopan);
this._imageViewer.interactiveModes.endUpdate();

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.beginPath();
   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.closePath();
   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.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();
};

ImageViewerRubberBandInteractiveMode Object

Reference