|
-
 How to draw a rectangle using Javascript?
Hi, 
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.
-
here u are:
PHP 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
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)">
</body>
</html>
Last edited by Kor; 05-08-2006 at 05:07 AM.
-
I've tried it and it can work now
Thank you! 
-
Hmm.....
About the drawing of rectangles, there is 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);">
-
modify Kor's code slightly.
<body>
<div id="Canvas" style="width:200px; height:200px; border:solid black;"
onmousemove = "getMouse(event);">
obj.onmousedown=function(){
initx=posx; inity=posy;
d = document.createElement('div');
d.className='square'
d.style.left=initx+'px';d.style.top=inity+'px';
Canvas.appendChild(d)
}
should work..
-
javascript code for drawing dynamic rectangle
pls provide the whole procedure for drawing the rectangle using javascript upon usr action..
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
|
Reply With Quote
Bookmarks