The rubber band (div) first starts with its top and left as fixed based upon first mouse down.
Upon mouse move the width and height of the rubber band (div) is calculated and updated dynamically.
Say suppose x1 and y1 is the first mouse down coordinates, x2 and y2 need to be changed dynamically based upon user mouse move upon the browser.
If x2 and y2 are the current mouse move coordinates then
Width of the rubber band (div) = (x2>x1)? (x2-x1) :( x1-x2)
Height of the rubber band (div) = (y2>y1)? (y2-y1) :(y1-y2)
On mouse up need to not consider the mouse move there after, as rectangle band is created.
Copy the below html page and find the flexibility of creating a rectangle rubber band.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Graphics</title>
<script type="text/javascript" language="javascript">
var bnding=false;
var strtX;
var strtY;
function strtBand()
{
bnding=true;
var x=event.x;
var y=event.y;
document.getElementById('divBand').style.left=x;
document.getElementById('divBand').style.top=y;
document.getElementById('divBand').style.width=0;
document.getElementById('divBand').style.height=0;
strtX=x;
strtY=y;
bnding=true;
}
function moveBand()
{
if(!bnding)
return;
var x=event.x;
var y=event.y;
if(x>strtX)
{
document.getElementById('divBand').style.left=strtX;
document.getElementById('divBand').style.width=x-strtX;
}
if(y>strtY)
{
document.getElementById('divBand').style.top=strtY;
document.getElementById('divBand').style.height=y-strtY;
}
if(x<=strtX)
{
document.getElementById('divBand').style.left=x;
document.getElementById('divBand').style.width=strtX-x;
}
if(y<=strtY)
{
document.getElementById('divBand').style.top=y;
document.getElementById('divBand').style.height=strtY-y;
}
}
function kyPress()
{
if(event.keyCode==27)
{
stopBand();
document.getElementById('divBand').style.width=0;
document.getElementById('divBand').style.height=0;
}
}
function stopBand()
{
bnding=false;
}
</script>
</head>
<body onmouseup="stopBand();" onmousedown="strtBand();" onmousemove="moveBand();" onkeypress="kyPress();">
<table style="width:100%;height:100%">
<tr><td>
<div id="divBand" style="position:absolute;background:lightyellow;border:1px solid gray;"></div>
</td></tr>
</table>
<br /><br />
</body>
</html>
Output:-
 |
No comments:
Post a Comment