LEADTOOLS JavaScript (Leadtools.Controls)
Send comments on this topic. | Main Raster Introduction | HTML5 JavaScript Introduction | Help Version 17.5.11.6
| Type | Description |
|---|---|
| List | The user HTML elements. |
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 UserElements to allow the service to handle events on these elements.
This example will add a canvas on top of the viewer surface and then use UserElements 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.
drawCanvas: function SiteLibrary_DefaultPage$example(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 SiteLibrary_DefaultPage$example(viewer) { // 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(viewer.get_divId()); 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. viewer.get_interactiveService().get_userElements().add(canvas); // Re-start the default interactive mode, this will take care of // setting the correct mouse pointer (if available) if (viewer.get_defaultInteractiveMode() != null) { viewer.get_defaultInteractiveMode().stop(viewer); viewer.get_defaultInteractiveMode().start(viewer); } },