Drawing Rectangle using Javascript

**me_myself** · 01-16-2008, 07:11 PM

Hi,

I need a javascript to draw rectangle on the webpage. I have an image inside a div - when i select a zoom tool (icon) i click and drag on the image - the image zooms in - for this i need an effect of drawing a rectangle with the mouse. Please see the url below - i need the exact same effect using javascript.

http://onlinedemos.thinkgeo.com/renderusa/
Click on Zoom In and draw a rectangle on the map. I need the same effect.

Thanks a lot.

**me_myself** · 01-16-2008, 07:42 PM

I found the below code. When i use it in IE7, after drawing the rectangle within the DIV, when you click outside the DIV, a small line appears. Is there a way to disable that line and limit the drawing to only within the DIV - Please Help.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
.square {
border: 1px solid #FF0000;
position: absolute;
}
-->
</style>
<script type="text/JavaScript">
var d;var posx;var posy;var initx=false;var inity=false
function getMouse(obj,e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//Moz:IE
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
var target = (e && e.target) || (event && event.srcElement);
if(target.id=='Canvas'){
obj.onmousedown=function(){
initx=posx; inity=posy;
d = document.createElement('div');
d.className='square'
d.style.left=initx+'px';d.style.top=inity+'px';
document.getElementsByTagName('body')[0].appendChild(d)
}
obj.onmouseup=function(){initx=false;inity=false;}
if(initx){
d.style.width=Math.abs(posx-initx)+'px';d.style.height=Math.abs(posy-inity)+'px';
d.style.left=posx-initx<0?posx+'px':initx+'px';
d.style.top=posy-inity<0?posy+'px':inity+'px';
}
}
else{return false}
}
document.onmousemove=function(event){
getMouse(document,event);
}
</script>
</head>
<body>
<div id="Canvas" style="width:200px; height:200px; border:solid black;"></div>
</body>
</html>

Thanks.

**codeexploiter** · 01-17-2008, 02:11 AM

http://www.walterzorn.de/jsgraphics/jsgraphics.htm

**thesource** · 01-18-2008, 02:37 AM

I think you need quite a specialist JavaScript to do that. You might need to hack a script in order to get the effect you want.

One of these two might help:

http://www.magictoolbox.com/magiczoom/

or

http://luckyteam.co.uk/products/LuckyView/

**me_myself** · 01-18-2008, 06:00 PM

Thanks for the links, thesource.

I am almost done with the code that i've pasted above. Just one small thing, i am not able to reduce the size while i'm drawing (in the same mouse movement). Can someone please help me to get that done?

Thanks.

**Master_script_maker** · 01-18-2008, 07:43 PM

what's the code? the code in the second post?

**NaveenRahul** · 03-27-2010, 02:42 PM

Hi im doing same work(rectangle creation) with the same problem what u have ,
when i created the rectangle with your code,

its working perfectly and after created that i just have to drag and resize the created the BOX's, i have a code for its but its not working in IE7 i think u faced the same problem.

can u help out of this??

Thanks in advance.

Danie.

**vwphillips** · 03-27-2010, 04:16 PM

plase post a link to your page

Thread: Drawing Rectangle using Javascript

Thread Tools

Search Thread

Drawing Rectangle using Javascript

Image zooming

Rectangle issue

Bookmarks

Bookmarks

Posting Permissions