Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Feb 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile How to draw a rectangle in 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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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 {
        
    border1px solid #FF0000;
        
    positionabsolute;
    }
    -->
    </
    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=posxinity=posy;
    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> 
    Last edited by Kor; 05-08-2006 at 12:06 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Feb 2006
    Location
    Italy
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @ Kor: Although it doesn't work in Opera, it's a very interesting script example

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Feb 2006
    Location
    Italy
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    By using:

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

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

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    as u say, Davide Zanotti... . I'll check the tip on Opera as soon as possible...

    Anyway, it's a basic example, maybe it can be extended on other objects than the BODY...
    Last edited by Kor; 05-08-2006 at 05:01 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New Coder
    Join Date
    Feb 2006
    Location
    Italy
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    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

  • #8
    New Coder
    Join Date
    Feb 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks kor and to all for the replies! It works now

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

  • #9
    New Coder
    Join Date
    Feb 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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);">

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    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 {
        
    border1px solid #FF0000;
        
    positionabsolute;
    }
    -->
    </
    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.target) || (event && event.srcElement);
    if(
    target.id=='Canvas'){
    obj.onmousedown=function(){
    initx=posxinity=posy;
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    New Coder
    Join Date
    Feb 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    The code can work now....thanks!

    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?

  • #12
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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.
    Last edited by me_myself; 01-18-2008 at 08:09 PM.

  • #13
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #14
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply Kor. Waiting anxiously for your script

    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.
    Last edited by me_myself; 01-18-2008 at 11:17 PM.

  • #15
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Kor, Any luck with the code? Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •