ImageViewerRubberBandInteractiveMode Object

JavaScript
WinRT JavaScript

function Leadtools.Controls.ImageViewerRubberBandInteractiveMode()

!MISSING Scrap '_RTJavaScript_Class_SYNTAX'!

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

ImageViewerRubberBandInteractiveMode works as follows:

When InteractiveService.DragStarted is received, a temporary canvas element is created on top of the viewer, this canvas is used to draw the rubber band rectangle. The following properties are used to customize the appearance of this canvas: 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 (and nor use the above properties), instead, your canvas will be used as the surface for rubber banding.
When InteractiveService.DragDelta is received, the temporary canvas is moved to the current position and the event RubberBandDelta is fired.
When InteractiveService.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 rectangle). 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.

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.

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:

Open the HTML page in your browser and click the example button. 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.

JavaScript

example: function SiteLibrary_DefaultPage$example(viewer) {
   // Set rubber band as the default interactive mode
   var rubberBandMode = new Leadtools.Controls.ImageViewerRubberBandInteractiveMode();
   // Customize it
   rubberBandMode.set_borderStyle("solid");
   rubberBandMode.set_borderColor("red");
   rubberBandMode.set_borderThickness(2);

   // Hook to its RubberBandCompleted event
   rubberBandMode.add_rubberBandCompleted(this.rubberBandCompleted);

   viewer.set_defaultInteractiveMode(rubberBandMode);

   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = "Draw a blue with yellow border rectangle on the image";
},


// Called by the base class when the mode is stopped
rubberBandCompleted: function SiteLibrary_DefaultPage$rubberBandCompleted(sender, e) {
   // Get the final rectangle
   var rect = Leadtools.LeadRectD.fromLTRB(e.get_point1().get_x(), e.get_point1().get_y(), e.get_point2().get_x(), e.get_point2().get_y());

   // Get the viewer
   var viewer = sender.get_imageViewerControl();

   // Get the visible rect of the viewer
   var visibleRect = viewer.imageControlRectangle(true);

   // Interset this rectangle with the visible area of the viewer
   rect.intersect(visibleRect);

   // Convert the rect to image coordinates
   rect = viewer.convertRect(Leadtools.Controls.CoordinateType.control, Leadtools.Controls.CoordinateType.image, rect);

   // Make sure it has some width and height and not too small
   if(rect.get_width() > 0 && rect.get_height() > 0)
   {
      // Get the background canvas
      var backCanvas = viewer.get_backCanvas();
      var context = backCanvas.getContext("2d");

      var x = rect.get_x();
      var y = rect.get_y();
      var width = rect.get_width();
      var height = rect.get_height();

      // Fill the rectangle in blow
      context.save();
      context.fillStyle = "#0000FF";
      context.strokeStyle = "#FFFF00";
      context.fillRect(x, y, width, height);
      context.strokeRect(x, y, width, height);
      context.restore();

      // Invalidate the viewer (so it draws the back canvas into the foreground)
      viewer.invalidate();
   }
},

ImageViewerRubberBandInteractiveMode Object

Reference