...

View Full Version : How to draw a rectangle in Javascript?



LiLo
05-08-2006, 10:08 AM
Hi, :o

How to use Javascript to draw a rectangle when the user drags the mouse across the webpage?

I know the drawing methods but how do we allow the user to be able to draw a rectangle on the webpage?

e.g When the user drags the mouse across the page and releases the mouse button, a rectangle appears.

Kor
05-08-2006, 11:03 AM
<!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
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';
}
}
</script>
</head>
<body onmousemove="getMouse(this,event)">
&nbsp;
</body>
</html>

Davide Zanotti
05-08-2006, 02:06 PM
@ Kor: Although it doesn't work in Opera, it's a very interesting script example :thumbsup:

Kor
05-08-2006, 02:50 PM
I wrote the code very quickly, so that, if here where I am now I have no Opera, I promise I'll take it home tonight, and check it with Opera as well.

Davide Zanotti
05-08-2006, 03:48 PM
By using:

document.onmousemove=function(event){
getMouse(document,event);
}

instead of body inline method, it works correct in ie,firefox and opera :)

Kor
05-08-2006, 03:58 PM
as u say, Davide Zanotti... :) . I'll check the tip on Opera as soon as possible... :thumbsup:

Anyway, it's a basic example, maybe it can be extended on other objects than the BODY...

Davide Zanotti
05-08-2006, 04:22 PM
Anyway, it's a basic example, maybe it can be extended on other objects than the BODY...

Sure, depending on what we want to develope, we can for example create a div that represent a sort of work stage. However your example has stimulated my fantasy and I'm trying to imagine some possible applications in a real project.

ps. call me Dave, it's more international and cool :)

LiLo
05-09-2006, 04:08 AM
Thanks kor and to all for the replies! It works now :thumbsup:

and oh yes kor, 2nd place is secured. Too bad van the man will be leaving soon :(

LiLo
05-09-2006, 09:49 AM
About the drawing of rectangles, there is supposed to be a drawing space within the webpage and the drawing can only be done within that space.

I have thought of inserting a div.

<div id="Canvas" style="width:200px; height:200px; border:solid black;"

How to integrate the div into the code given above?
And can I use onDrag = "getMouse(event);" for the div ?

something like:

<div id="Canvas" style="width:200px; height:200px; border:solid black;"
onDrag = "getMouse(event);">

Kor
05-09-2006, 10:14 AM
Could be something like this, but I guess I must later try another variant, as it looks like it does not work properly... Here's the code, even it is not quite good, maybe someone can improve it:


<!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>

In theory the rectangles should be drown only within the div, but I don't know why still it draws small points outside. And the movement is not quite good... I must think of another approach... Hm...

LiLo
05-16-2006, 02:49 AM
Hi,

The code can work now....thanks! :o

But, when I click on the outside of the DIV canvas, small vertical lines will still appear. Also, when dragging occurs inside the DIV canvas, it seems that text on the webpage will be highlighted as well.

Are there ways to solve these?

me_myself
01-18-2008, 07:06 PM
Hi Kor, Thanks for the awesome script. Just one question - i am not able to reduce the size of the DIV while drawing - it grows big but cannot be reduced small ( do you get what i'm saying :) - is there a way to reduce the size of the DIV while drawing it?

Thanks a lot.

Kor
01-18-2008, 09:53 PM
oh, a long time has passed from that one.... I guess I can write now a better one... Just, please, let me think a little bit on it...:)

me_myself
01-18-2008, 10:03 PM
Thanks for the reply Kor. Waiting anxiously for your script :thumbsup:

Also would be great if you can make the cursor change when drawing the rectangle :) I can set a custom cursor using CSS or in the script. Thanks again.

me_myself
01-21-2008, 09:13 PM
Hi Kor, Any luck with the code? Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum