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 11 of 11
  1. #1
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Draw square -- return corner positions

    Hey all
    I've got a crazy idea for a little admin widget that would be greatly appreciated by many developers, but I've hit a wall with one little bit...

    I need to draw a fixed aspect ratio (1:1) box using JS. The box should be drawn by clicking at the top left point and dragging down and to the right -- much like the 'crop' and 'marquee' tools in graphics apps. I then need the script to return the x and y co-ords for each corner.

    I'm not stupid enough to come in asking 'can someone make this for me'; but none of the JS drawing examples I've found come close to what I'm after. The widget I'm building will be totally open source/free for all use and anyone who can help me out with this little bit will get a prominent link back to where ever they want. (I get approx 500 unique IP's/day, all web designers/developers, so the link will generate business
    Edit: --that 500 count is reset everyday, truly unique visitors are about 1/10th as frequent
    )

    All tips, advice, links and insults warmly welcomed
    Last edited by mindlessLemming; 05-20-2005 at 01:26 AM.

    I take no responsibility for the above nonsense.


    Left Justified

  • #2
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    I think I might be able to put something together for you, if I can get my brain around mouse position in Mozilla. Definetly in IE. Do you have a time frame you'd like it done by? I'm a bit busy tonight but can probably muster something up in the next couple days. If someone else can do it before then, by all means.

    A question, the box is to remain a square at all times right? That's what you mean by the 1:1 ratio?

    Edit: Heh, I guess the "Draw square" in the title should have clued me in on that.


    I suddenly feel nutty. /dance

    Basscyst
    Last edited by Basscyst; 05-19-2005 at 01:01 AM.
    Helping to build a bigger box. - Adam Matthews

  • #3
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    No time frame at all, really
    While we will be using it in an upcoming project, I'm doing it more out of personal interest than anything else. The client certainly isn't footing the bill for my mad-scientist-like tinkering

    To answer your Q: Yep, the square is a square

    I take no responsibility for the above nonsense.


    Left Justified

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    I did this in SVG using an anonymous <rect/> inside a XBL content layer for a zoom and pan implementation for Mozilla... but I don't suppose that is something you want.

    I just whipped up the following in a few minutes. Works in Gecko and Safari, as well as Opera (though the opacity doesn't, perhaps you'll want to use a translucent png for a background instead). I don't have IE/Win to test, but I imagine it should work in it as well. For more efficiency, you could store the reference to dragBox somewhere nice, and for markup niceness, you could append the dragBox onload instead of hardcoding it in the document.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<title>Drag Box</title>
    		<style type="text/css">
    			#dragBox {
    				display: none;
    				position: absolute;
    				border: 1px solid #06f;
    				background: #69f;
    				opacity: 0.2;
    				-moz-opacity: 0.2;
    			}
    		</style>
    		<script type="text/javascript">
    			if (!("addEventListener" in document) && "attachEvent" in document) {
    				document.addEventListener = function(event, func, capture) {
    					document.attachEvent("on"+event, func);
    				}
    			}
    
    			document.addEventListener("mousedown", function(event) {
    				var box = document.getElementById("dragBox");
    				box.style.display = "block";
    				box.style.width = "0";
    				box.style.height = "0";
    				box.style.left = event.clientX + "px";
    				box.style.top = event.clientY + "px";
    				
    				box._anchor = [event.clientX, event.clientY];
    			}, false);
    			document.addEventListener("mousemove", function(event) {
    				var box = document.getElementById("dragBox");
    
    				if (box.style.display == "block") {
    					var delta = [event.clientX - box._anchor[0], event.clientY - box._anchor[1]];
    				
    					if (delta[0] < 0) {
    						box.style.left = event.clientX + "px";
    						box.style.width = -delta[0] + "px";
    					}
    					else if (0 < delta[0]) {
    						box.style.width = delta[0] + "px";
    					}
    					if (delta[1] < 0) {
    						box.style.top = event.clientY + "px";
    						box.style.height = -delta[1] + "px";
    					}
    					else if (0 < delta[1]) {
    						box.style.height = delta[1] + "px";
    					}
    				}
    			}, false);
    			document.addEventListener("mouseup", function(evt) {
    				document.getElementById("dragBox").style.display = "none";
    			}, false);
    		</script>
    	</head>
    	<body>
    		<p>hello world</p>
    		<div id="dragBox"></div>
    	</body>
    </html>
    Consider it licensed under this:
    http://creativecommons.org/licenses/by/2.0/
    Last edited by jkd; 05-19-2005 at 07:34 AM.

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice work jkd!

    It works for me on WinXP in Opera 8.0, Firefox 1.0.2, and IE 6.0

  • #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
    I am sure that it can be done in DOM alone as well... Nice chalenge, I'll try to solve it as well.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Ok, here is my attempt. I tested it in IE and in Mozilla FF. It starts with a 5px * 5px square. If you need it to start smaller or larger, just change the height width and font size in the initial makeBox() function. You can close the box by double clicking it anywhere.

    Code:
    <html>
    	<head>
    		<title>Box Maker</title>
    		<script type="text/javascript">
    		
    		function makeBox()
    		{
    			var box=document.createElement('div');
    			box.style.border='dashed 1px';
    			box.style.height='5px';
    			box.style.width='5px';
    			box.style.fontSize='1px';
    			box.style.position='absolute';
    			box.style.left=tempX+'px';
    			box.style.top=tempY+'px';
    			box.id='box';
    			box.style.textAlign='right';
    			box.style.padding="7px";
    			box.ondblclick=function(){closeBox();}
    			document.body.appendChild(box);
    		}
    		
    		function closeBox()
    		{
    			var obj=document.getElementById('box');
    			document.body.removeChild(obj);
    		}
    		
    		function setMouseMove()
    		{
    			IE = document.all;
    			if(!IE)
    			{
    				document.captureEvents(Event.MOUSEMOVE)
    			}
    			
    			document.onmousemove = getCoords;
    		}
    		
    		function clearMouseMove()
    		{
    			document.onmousemove = "";
    			var obj=document.getElementById('box');
    			var objS=obj.style;
    		
    			var lft=objS.left.replace('px','')*1;
    			var top=objS.top.replace('px','')*1;
    			var ht=objS.height.replace('px','')*1;
    			var wd=objS.width.replace('px','')*1;
    			
    			var top_btm_lft_x=lft+'px';
    			var top_lft_rt_y=top+'px';
    			var top_btm_rt_x=lft+wd+'px';
    			var btm_lft_rt_y=top+ht+'px';
    			
    			if(obj.hasChildNodes())
    			{
    				for(var i=0;i<obj.childNodes.length;i++)
    				{
    					obj.removeChild(obj.childNodes[i]);
    				}
    			}
    			var div=document.createElement('div');
    			div.style.width='100%';
    			div.style.fontSize='10px';
    			div.style.textAlign='center';
    			
    			var str1=document.createTextNode(top_btm_lft_x+","+top_lft_rt_y+" | "+top_btm_rt_x+","+top_lft_rt_y);
    			var str2=document.createTextNode(top_btm_lft_x+","+btm_lft_rt_y+" | "+top_btm_rt_x+","+btm_lft_rt_y);
    			
    			var br=document.createElement('br');
    			
    			div.appendChild(str1);
    			div.appendChild(br);
    			div.appendChild(str2);
    			
    			obj.appendChild(div);	
    		}
    		
    		var tempX = 0;
    		var tempY = 0;
    		
    		function getCoords(e) 
    		{
    			if(IE) 
    			{ 
    				tempX = event.clientX + document.body.scrollLeft;
    				tempY = event.clientY + document.body.scrollTop;
    			}
    			else 
    			{
    				tempX = e.pageX;
    				tempY = e.pageY;
    			}  
    			
    			if(tempX < 0)
    			{
    				tempX = 0;
    			}
    			
    			if(tempY < 0)
    			{
    				tempY = 0;
    			} 
    			
    			if(document.getElementById('box'))
    			{
    				if(tempX-firstX > 0)
    				{
    				
    					var obj=document.getElementById('box').style;
    					obj.height=(tempX-firstX)+'px';
    					obj.width=(tempX-firstX)+'px';	
    				}
    			}
    			else
    			{
    				firstX=tempX;
    				makeBox();
    			}
    		}
    		</script>
    	</head>
    	<body onmousedown="setMouseMove();" onmouseup="clearMouseMove();">
    	</body>
    </html>
    Basscyst
    Last edited by Basscyst; 05-19-2005 at 10:08 PM.
    Helping to build a bigger box. - Adam Matthews

  • #8
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile w00t

    Cool, people are taking it on as a challenge

    I like the way JKD's redraws from any starting point; if I combine that with the filxed aspect ratio and data feedback of Basscyst's we'll have a winner

    Another thing I'd like to add is a 'move' ability -- triggered by either holding shift or clicking a button in a toolbar.

    Awesome work guys, thankyou sooo much! Now I just have to find some time this weekend to put it all together.

    p.s -- thanks for the license link Jason, I'll use that for the entire widget.

    I take no responsibility for the above nonsense.


    Left Justified

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure how much of a starting point this will be:
    www.vladdy.net/demos/cropimage.html
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #10
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    So like this then? Double click to stop the box in mover mode.

    Code:
    <html>
    	<head>
    		<title>Box Maker</title>
    		<style type="text/css">
    			input
    			{
    				color:#000000;
    			}
    		</style>
    		<script type="text/javascript">
    		
    		function makeBox()
    		{
    			var box=document.createElement('div');
    			box.style.border='dashed 1px';
    			box.style.height='5px';
    			box.style.width='5px';
    			box.style.fontSize='1px';
    			box.style.position='absolute';
    			box.style.left=tempX+'px';
    			box.style.top=tempY+'px';
    			box.id='box';
    			box.style.padding="7px";
    			document.body.appendChild(box);
    		}
    				
    		function setMouseMove()
    		{
    			IE = document.all;
    			if(!IE)
    			{
    				document.captureEvents(Event.MOUSEMOVE)
    			}
    			
    			document.onmousemove = getCoords;
    		}
    		var stat=0;
    		function clearMouseMove()
    		{
    				var obj=document.getElementById('box');
    				var ischecked=document.getElementById('opt').checked;
    				
    				
    				if(ischecked)
    				{
    					var objx=obj.style.left.replace('px','')*1;
    					var objy=obj.style.top.replace('px','')*1;
    					stat=1;
    					adjx=tempX-objx;
    					adjy=tempY-objy;
    					
    					document.ondblclick=function(){stopBox();}
    				}
    				else
    				{
    					document.onmousemove = "";
    					document.body.removeChild(obj);	
    				}
    				
    		}
    		
    		function stopBox()
    		{
    			var obj=document.getElementById('box');
    			document.onmousemove="";
    			document.ondblclick="";
    			stat=0;
    			document.body.removeChild(obj);
    		}
    		
    		function showStats()
    		{
    			var obj=document.getElementById('box');
    			var objS=obj.style;
    			var lft=objS.left.replace('px','')*1;
    			var top=objS.top.replace('px','')*1;
    			var ht=objS.height.replace('px','')*1;
    			var wd=objS.width.replace('px','')*1;
    			
    			var top_btm_lft_x=lft+'px';
    			var top_lft_rt_y=top+'px';
    			var top_btm_rt_x=lft+wd+'px';
    			var btm_lft_rt_y=top+ht+'px';
    
    			document.getElementById('tl').value=top_btm_lft_x+","+top_lft_rt_y;
    			document.getElementById('tr').value=top_btm_rt_x+","+top_lft_rt_y;
    			document.getElementById('bl').value=top_btm_lft_x+","+btm_lft_rt_y;
    			document.getElementById('br').value=top_btm_rt_x+","+btm_lft_rt_y;
    		}
    		
    		var tempX = 0;
    		var tempY = 0;
    		
    		function getCoords(e) 
    		{
    			if(IE) 
    			{ 
    				tempX = event.clientX + document.body.scrollLeft;
    				tempY = event.clientY + document.body.scrollTop;
    			}
    			else 
    			{
    				tempX = e.pageX;
    				tempY = e.pageY;
    			}  
    			
    			if(tempX < 0)
    			{
    				tempX = 0;
    			}
    			
    			if(tempY < 0)
    			{
    				tempY = 0;
    			} 
    			
    			if(document.getElementById('box'))
    			{
    				var obj=document.getElementById('box').style;
    				if(stat==0)
    				{
    					if(tempX-firstX > 0)
    					{
    						obj.height=(tempX-firstX)+'px';
    						obj.width=(tempX-firstX)+'px';	
    						showStats();
    					}
    				}
    				else
    				{
    					obj.left=tempX-adjx+'px';
    					obj.top=tempY-adjy+'px';	
    					showStats();
    				}
    			}
    			else
    			{
    				firstX=tempX;
    				firstY=tempY;
    				makeBox();
    			}
    		}
    		</script>
    	</head>
    	<body onmousedown="setMouseMove();" onmouseup="clearMouseMove();">
    		<form>
    			<input disabled type="text" id="tl" /> 
    			<input disabled type="text" id="tr" /> 
    			<br />
    			<input disabled type="text" id="bl" /> 
    			<input disabled type="text" id="br" />
    			<input type="checkbox" id="opt" />
    		</form>
    	</body>
    </html>
    In this one, if you mousedown, after it's moving, it will make it sizeable again. Mouseup and it's moveable again. Double click to clear. It's a little jumpy when the resize starts again, but I'm done messing with it.

    Code:
    <html>
    	<head>
    		<title>Box Maker</title>
    		<style type="text/css">
    			input
    			{
    				color:#000000;
    			}
    		</style>
    		<script type="text/javascript">
    		
    		function makeBox()
    		{
    			var box=document.createElement('div');
    			box.style.border='dashed 1px';
    			box.style.height='5px';
    			box.style.width='5px';
    			box.style.fontSize='1px';
    			box.style.position='absolute';
    			box.style.left=tempX+'px';
    			box.style.top=tempY+'px';
    			box.id='box';
    			box.style.padding="7px";
    			document.body.appendChild(box);
    		}
    				
    		function setMouseMove()
    		{
    			IE = document.all;
    			if(!IE)
    			{
    				document.captureEvents(Event.MOUSEMOVE)
    			}
    			
    			document.onmousemove = getCoords;
    		}
    		var stat=0;
    		function clearMouseMove()
    		{
    				var obj=document.getElementById('box');
    				var ischecked=document.getElementById('opt').checked;
    				
    				
    				if(ischecked)
    				{
    					var objx=obj.style.left.replace('px','')*1;
    					var objy=obj.style.top.replace('px','')*1;
    					stat=1;
    					adjx=tempX-objx;
    					adjy=tempY-objy;
    					
    					document.ondblclick=function(){stopBox();}
    					document.onmousedown=function(){stat=0;setMouseMove();}
    				}
    				else
    				{
    					document.onmousemove = "";
    					document.body.removeChild(obj);	
    				}
    				
    		}
    		
    		function stopBox()
    		{
    			var obj=document.getElementById('box');
    			document.onmousemove="";
    			document.ondblclick="";
    			stat=0;
    			document.body.removeChild(obj);
    		}
    		
    		function showStats()
    		{
    			var obj=document.getElementById('box');
    			var objS=obj.style;
    			var lft=objS.left.replace('px','')*1;
    			var top=objS.top.replace('px','')*1;
    			var ht=objS.height.replace('px','')*1;
    			var wd=objS.width.replace('px','')*1;
    			
    			var top_btm_lft_x=lft+'px';
    			var top_lft_rt_y=top+'px';
    			var top_btm_rt_x=lft+wd+'px';
    			var btm_lft_rt_y=top+ht+'px';
    
    			document.getElementById('tl').value=top_btm_lft_x+","+top_lft_rt_y;
    			document.getElementById('tr').value=top_btm_rt_x+","+top_lft_rt_y;
    			document.getElementById('bl').value=top_btm_lft_x+","+btm_lft_rt_y;
    			document.getElementById('br').value=top_btm_rt_x+","+btm_lft_rt_y;
    		}
    		
    		var tempX = 0;
    		var tempY = 0;
    		
    		function getCoords(e) 
    		{
    			if(IE) 
    			{ 
    				tempX = event.clientX + document.body.scrollLeft;
    				tempY = event.clientY + document.body.scrollTop;
    			}
    			else 
    			{
    				tempX = e.pageX;
    				tempY = e.pageY;
    			}  
    			
    			if(tempX < 0)
    			{
    				tempX = 0;
    			}
    			
    			if(tempY < 0)
    			{
    				tempY = 0;
    			} 
    			
    			if(document.getElementById('box'))
    			{
    				var obj=document.getElementById('box').style;
    				if(stat==0)
    				{
    					if(tempX-firstX > 0)
    					{
    						obj.height=(tempX-firstX)+'px';
    						obj.width=(tempX-firstX)+'px';	
    						showStats();
    					}
    				}
    				else
    				{
    					obj.left=tempX-adjx+'px';
    					obj.top=tempY-adjy+'px';	
    					showStats();
    				}
    			}
    			else
    			{
    				firstX=tempX;
    				firstY=tempY;
    				makeBox();
    			}
    		}
    		</script>
    	</head>
    	<body onmousedown="setMouseMove();" onmouseup="clearMouseMove();">
    		<form>
    			<input disabled type="text" id="tl" /> 
    			<input disabled type="text" id="tr" /> 
    			<br />
    			<input disabled type="text" id="bl" /> 
    			<input disabled type="text" id="br" />
    			<input type="checkbox" id="opt" />
    		</form>
    	</body>
    </html>
    Basscyst

    Basscyst
    Last edited by Basscyst; 05-20-2005 at 06:59 AM.
    Helping to build a bigger box. - Adam Matthews

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    I have two contributions (both in work and no square)

    http://www.vicsjavascripts.org.uk/Im...op/ircDemo.htm

    and

    http://www.vicsjavascripts.org.uk/Im...zeCrop/xx2.htm

    ircDemo was doing my head in so I let it.

    This post has got me going again, ta


  •  

    Posting Permissions

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