userControls Property (InteractiveService)

Summary

User HTML elements.

Syntax

JavaScript Syntax

Object.defineProperty(InteractiveService.prototype, 'userControls', 
	get: function() 
)

TypeScript Syntax

userControls: HTMLElement[]; // read-only

Property Value

The user HTML elements.

Remarks

Any extra elements that should participate in the events handling. If you are adding any HTML elements on top of the viewer in the page, then you must add these elements into UserControls to allow the service to handle events on these elements.

Example

This example will add a canvas on top of the viewer surface and then use UserControls to enable the InteractiveService to handle this canvas as part of the event handling process.

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. Now when you click and drag (or touch) on top of the custom canvas, pan and zoom will work as usual on the viewer.

JavaScript Example

drawCanvas: function (context, width, height) { 
   context.strokeStyle = "#FFFF00"; 
   context.lineWidth = 4; 
   context.beginPath(); 
   context.moveTo(0, 0); 
   context.lineTo(width, 0); 
   context.lineTo(width, height); 
   context.lineTo(0, height); 
   context.closePath(); 
   context.stroke(); 
   context.strokeStyle = "#000000"; 
   context.fillStyle = "#FFFF00"; 
   context.beginPath(); 
   context.arc(100, 100, 50, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.stroke(); 
   context.fill(); 
   context.strokeStyle = "#000000"; 
   context.fillStyle = "#FFFFFF"; 
   context.beginPath(); 
   context.arc(80, 80, 8, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.stroke(); 
   context.fill(); 
   context.fillStyle = "#009966"; 
   context.beginPath(); 
   context.arc(80, 80, 5, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.fill(); 
   context.strokeStyle = "#000000"; 
   context.fillStyle = "#FFFFFF"; 
   context.beginPath(); 
   context.arc(120, 80, 8, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.stroke(); 
   context.fill(); 
   context.fillStyle = "#009966"; 
   context.beginPath(); 
   context.arc(120, 80, 5, 0, Math.PI * 2, true); 
   context.closePath(); 
   context.fill(); 
   context.fillStyle = "#000000"; 
   context.beginPath(); 
   context.moveTo(93, 100); 
   context.lineTo(100, 93); 
   context.lineTo(107, 100); 
   context.lineTo(100, 107); 
   context.closePath(); 
   context.fill(); 
   context.strokeStyle = "#000000"; 
   context.beginPath(); 
   context.moveTo(70, 110); 
   context.quadraticCurveTo(100, 150, 130, 110); 
   context.quadraticCurveTo(100, 150, 70, 110); 
   context.closePath(); 
   context.stroke(); 
}, 
 
example: function () { 
   // Check if have already added the custom canvas, if so, nothing to do 
   var canvas = document.getElementById("customCanvas"); 
   if (canvas != null) 
      return; 
 
   // Create a canvas element and add it on top of the viewer 
   var div = document.getElementById(this._imageViewer.mainDiv()); 
   var delta = 16; 
   var x = delta; 
   var y = delta; 
   var width = div.clientWidth - delta * 2; 
   var height = div.clientHeight - delta * 2; 
   var parent = div.parentNode; 
   canvas = document.createElement("canvas"); 
   canvas.style.position = "absolute"; 
   canvas.width = width; 
   canvas.height = height; 
   canvas.style.pixelLeft = x; 
   canvas.style.pixelTop = y; 
   canvas.id = "customCanvas"; 
   parent.appendChild(canvas); 
   var context = canvas.getContext("2d"); 
   this.drawCanvas(context, width, height); 
 
   // Without the following line, clicking anywhere on top of the custom canvas will 
   // not pass to the service and panning and zooming will not work. 
   this._imageViewer.interactiveService.userControls.add(canvas); 
 
   // Re-start the default interactive mode, this will take care of 
   // setting the correct mouse pointer (if available) 
   if (this._imageViewer.defaultInteractiveMode != null) { 
      this._imageViewer.defaultInteractiveMode.stop(this._imageViewer); 
      this._imageViewer.defaultInteractiveMode.start(this._imageViewer); 
   } 
},