In This Topic ▼

ImageViewerRubberBandInteractiveMode Object

Summary

Draws a shape on the viewer.

Syntax

TypeScript

JavaScript

function lt.Controls.ImageViewerRubberBandInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

class lt.Controls.ImageViewerRubberBandInteractiveMode() 
	extends ImageViewerInteractiveMode

Remarks

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

The ImageViewerRubberBandInteractiveMode works as follows:

When a dragStarted event notification is received, the InteractiveEventArgs.isHandled property 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:

Shape, BorderColor, BorderStyle, and BorderThickness, and the RubberBandStarted event 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, InteractiveEventArgs.IsHandled is set to true and the temporary canvas is moved to the current position. The RubberBandDelta event is fired.
When dragCompleted is received, InteractiveEventArgs.IsHandled is set to true, the temporary canvas is removed, and the RubberBandCompleted event is fired.

The 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 the 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: Zoom and pan the image before clicking 'Example' to show that the calculations for getting the rubber band value in image coordinates are correct.

RubberBandInteractiveMode.ts

ImageViewer.ts

RubberBandInteractiveMode.js

ImageViewer.js

RubberBandInteractiveMode.html

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_RubberBandInteractiveModeExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      const rubberBandMode: lt.Controls.ImageViewerRubberBandInteractiveMode = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
      rubberBandMode.rubberBandCompleted.add((sender, e) => { 
         if (e.isCanceled || !rubberBandMode.item) 
            return; 
 
         const points: lt.LeadPointD[] = e.points.map((point) => { return point.clone(); }); 
         let min = lt.LeadPointD.empty; 
         let max = lt.LeadPointD.empty; 
 
         for (let i = 0; i < points.length; i++) { 
            points[i] = viewer.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); 
            } 
         } 
 
         const center: lt.LeadPointD = lt.LeadPointD.create(min.x + (max.x - min.x) / 2, min.y + (max.y - min.y) / 2); 
 
         const item: lt.Controls.ImageViewerItem = rubberBandMode.item; 
         const itemCanvas = item.canvas as HTMLCanvasElement; 
 
         const ctx: CanvasRenderingContext2D = itemCanvas.getContext("2d"); 
         ctx.save(); 
         ctx.beginPath(); 
         const rect: lt.LeadRectD = lt.LeadRectD.fromLTRB(points[0].x, points[0].y, points[1].x, points[1].y); 
         ctx.rect(rect.x, rect.y, rect.width, rect.height) 
         ctx.closePath(); 
         ctx.fillStyle = "rgba(0, 0, 255, .2)"; 
         ctx.fill(); 
 
         ctx.strokeStyle = "yellow"; 
         ctx.stroke(); 
         ctx.restore(); 
 
         viewer.invalidate(lt.LeadRectD.empty); 
      }); 
 
      rubberBandMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet; 
      rubberBandMode.itemPart = lt.Controls.ImageViewerItemPart.image; 
      viewer.interactiveModes.beginUpdate(); 
      viewer.interactiveModes.clear(); 
      viewer.interactiveModes.add(rubberBandMode); 
      viewer.interactiveModes.endUpdate(); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_RubberBandInteractiveModeExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      const rubberBandMode = new lt.Controls.ImageViewerRubberBandInteractiveMode(); 
      rubberBandMode.rubberBandCompleted.add((sender, e) => { 
         if (e.isCanceled || !rubberBandMode.item) 
            return; 
 
         const points = e.points.map((point) => { return point.clone(); }); 
         let min = lt.LeadPointD.empty; 
         let max = lt.LeadPointD.empty; 
 
         for (let i = 0; i < points.length; i++) { 
            points[i] = viewer.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); 
            } 
         } 
 
         const center = lt.LeadPointD.create(min.x + (max.x - min.x) / 2, min.y + (max.y - min.y) / 2); 
 
         const item = rubberBandMode.item; 
         const itemCanvas = item.canvas; 
 
         const ctx = itemCanvas.getContext("2d"); 
         ctx.save(); 
         ctx.beginPath(); 
         const rect = lt.LeadRectD.fromLTRB(points[0].x, points[0].y, points[1].x, points[1].y); 
         ctx.rect(rect.x, rect.y, rect.width, rect.height) 
         ctx.closePath(); 
         ctx.fillStyle = "rgba(0, 0, 255, .2)"; 
         ctx.fill(); 
 
         ctx.strokeStyle = "yellow"; 
         ctx.stroke(); 
         ctx.restore(); 
 
         viewer.invalidate(lt.LeadRectD.empty); 
      }); 
 
      rubberBandMode.autoItemMode = lt.Controls.ImageViewerAutoItemMode.autoSet; 
      rubberBandMode.itemPart = lt.Controls.ImageViewerItemPart.image; 
      viewer.interactiveModes.beginUpdate(); 
      viewer.interactiveModes.clear(); 
      viewer.interactiveModes.add(rubberBandMode); 
      viewer.interactiveModes.endUpdate(); 
   } 
}

export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>Controls Example | RubberBandInteractiveMode</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.InteractiveMode.RubberBandInteractiveMode(); 
   }; 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageViewerRubberBandInteractiveMode Members

Leadtools.Controls Namespace

Download our FREE evaluation

Help Version 21.0.2021.7.2

Leadtools.Controls Assembly

Introduction

Getting Started

Namespaces

Leadtools.Controls Namespace

Assemblies