Drawing a Line on an Image using the "Rubber-Banding" Technique.

To run this demo you need the csXImage trial ocx control installed on your system as well as MS Visual Studio.NET. The trial control and the example files are available below:

Download the trial csXImage control - csXImageTrial.exe (3.1 MB)

The demo C# project - DrawLineDemoCSharp.zip (186 KB)

Description of the project.

A common use of an imaging component like csXImage is to enable the user to draw on an image using the mouse. This simple C# project shows the use of the mouse events of csXImage for this purpose. It demonstrates the "rubber-banding" method by which the user is able to first fix one end of a line, then move the mouse around, with the line following the movements, before selecting the end point.

When the C# project is run, a form is displayed with an empty, white image. When the Draw Line button is clicked, the user can then click the mouse on the image to start drawing a line. As long as the mouse buttom remains down, the mouse can be moved around the image and a line will always join the start point to the current mouse position, like a stretching rubber band. When the mouse button is released, the drawing of the line is completed.

The image below is a screenshot from this demo.

C# example of drawing a line with rubber banding
function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } function AcceptCookies() { createCookie("cookie-site","true",120); createCookie("cookie-tracking","true",120); createCookie("cookie-remarketing","true",120); document.getElementById("overlay").style.display = "none"; } ]]>


This site uses cookies for functionality, traffic analysis and for targeted advertising. Click the Accept button to accept our Cookie Policy. The Cookie Policy page offers configuration for a reduced set of cookies for this site.