I was doing a project for drawing a rectangle box over an image and to find the coordinates of the rectangle. I was using JavaScript to write this program.
The code I have is:
<style>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</style>
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="a.jpg">
<DIV ID="rubberBand"></DIV>
<SCRIPT>
var IMG;
function startRubber (evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
}
function cancelDragDrop()
{
window.event.returnValue = false;
}
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
</SCRIPT>
How can I display the coordinates of the rectangle in the form (x1,y1)(x2,y2). That is top left and right coordinate and last left and right.
I was trying to display different variables but it is not correct. Please help me anyone to display the coordinates of the rectangle.
I was doing a project for drawing a rectangle box over an image and to find the coordinates of the rectangle. I was using JavaScript to write this program.
The code I have is:
<style>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</style>
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="a.jpg">
<DIV ID="rubberBand"></DIV>
<SCRIPT>
var IMG;
function startRubber (evt) {
if (document.all) {
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
}
function cancelDragDrop()
{
window.event.returnValue = false;
}
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
</SCRIPT>
How can I display the coordinates of the rectangle in the form (x1,y1)(x2,y2). That is top left and right coordinate and last left and right.
I was trying to display different variables but it is not correct. Please help me anyone to display the coordinates of the rectangle.
Share Improve this question edited Jun 17, 2015 at 0:06 Yamaneko 3,5632 gold badges40 silver badges57 bronze badges asked Feb 22, 2012 at 15:56 VineethVineeth 572 gold badges2 silver badges8 bronze badges 2- consider using some javascript framework, like jQuery, Mootools or sth... It makes life A LOT easier. – zeroos Commented Feb 21, 2012 at 19:05
- How is this different from the last two questions you asked? stackoverflow./questions/9397104/… and stackoverflow./questions/9383337/… – j08691 Commented Feb 22, 2012 at 16:28
2 Answers
Reset to default 2you kind of owe me a beer for this one:
var IMG, rubber, pt = { x: 0, y: 0 };
function startRubber (evt) {
var ev = evt || window.event,
rs = rubber.style,
bb = IMG.getBoundingClientRect();
console.dir(ev);
rs.left = bb.left + 'px';
rs.top = bb.top + 'px';
rs.width = bb.width + 'px';
rs.height = bb.height + 'px';
rs.display = 'block';
pt = { x: ev.clientX - bb.left, y: ev.clientY - bb.top };
return false;
}
function stopRubber () {
rubber.style.display = 'none';
}
function moveRubber (evt) {
var ev = evt || window.event;
rubber.style.left = (evt.clientX - pt.x) + 'px';
rubber.style.top = (evt.clientY - pt.y) + 'px';
}
rubber = document.getElementById('rubberBand');
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
document.onmouseup = stopRubber;
document.onmousemove = moveRubber;
test bed: http://jsbin./ojaxew/edit
hope this helps -ck
Obtaining the coordinates is easy, assuming you have the rubberband element in a variable called rectangle:
var x1 = rectangle.style.left;
var y1 = rectangle.style.top;
var x2 = x1 + rectangle.style.width;
var y2 = y1 + rectangle.style.height;
If you want to display them on the page in the format you specified, try the following (assuming you have an output element with an id of output:
var coords = '(' + x1 + ',' + y1 + ')(' + + x2 + ',' + y2 + ')';
document.getElementById('output').innerHTML = coords;