asked on

Draw a line Dynamically

I need to draw a line on a html page, it should draw from the point the user clicks and drag out to the point the mouse is. In other words the end of the line should follow the current mouse location.

I have done it with a rectangle and can draw a line on a page but not dynamically

thanks

ASKER CERTIFIED SOLUTION

NetGroove

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Webmonkey

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sometimes

ASKER

Thanks webmoney but not all my users have IE6 any other ideas?

Webmonkey

How are you drawing a line now? Please post that code.

WM

Sometimes

ASKER

Here is the line codes

call line line(a,b,c,d,5)

for example

<SCRIPT LANGUAGE="JavaScript">
var line = function(x1,y1,x2,y2,inc) {
var distx = x2 - x1;
var disty = y2 - y1;
var N = Math.floor(Math.sqrt(distx*distx + disty*disty)/inc);
var a = getNormalizedAngle(x1,y1,x2,y2);
var dx = inc * Math.cos(a);
var dy = -inc * Math.sin(a);
var path = [];
for (var i=0;i<=N;i++) {
path[i*2] = Math.round(x1 + i*dx);
path[i*2+1] = Math.round(y1 + i*dy);
}
if (path[i*2-2] != x2 || path[i*2-1] != y2) {
path[i*2] = x2;
path[i*2+1] = y2;
}
j=0;
xcor=[],ycor=[];
for(i=0; i<path.length; i+=2)
{
xcor[j]=path[i];
ycor[j]=path[i+1];
j++;
}
for(i=0; i<xcor.length; ++i){

document.body.innerHTML+="<div id='yes' style=\"position:absolute;width:3px;height"
+":3px;clip:rect(0,2,2,0);left:"+xcor[i]+"px;top:"+ycor[i]+"px;background-color:#111111"
+"\">.<\/div>"

}
};
getNormalizedAngle = function(x1,y1,x2,y2) {
var distx = Math.abs(x1-x2);
var disty = Math.abs(y1-y2);
if (distx==0 && disty==0) angle = 0;
else if (distx==0) angle = Math.PI/2;
else angle = Math.atan(disty/distx);
if (x1<x2) {
if (y1<y2) angle = Math.PI*2-angle;
}
else {
if (y1<y2) angle = Math.PI+angle;
else angle = Math.PI-angle;
}
return angle;
};

This is the dynamic rectangle which works fine makediv()

var cnt=0, drag=false, x, y, ol, ot, nw, nh, nw2, nh2, w, h, l, t;

function makediv(){
      cnt+=1; ol=-1; drag=true;
      document.body.innerHTML+="<div id='b"+cnt+"' style='font-size:0px; color: white; position: absolute; background-color: transparent; border:red 1px dotted; left: "+x+"; top: "+y+"'></div>"
      return
}

function dragdiv(){
      if(ol<0){ol=x;ot=y;}
            obj=document.getElementById('b'+cnt).style;
            l=obj.left.split('px').join('')*1; t=obj.top.split('px').join('')*1;
            obj=document.getElementById('b'+cnt).style;
            nw=x-l; nh=y-t; if(nw<0){nw=-nw;}if(nh<0){nh=-nh;}
            w=obj.width.split('px').join('')*1; h=obj.height.split('px').join('')*1;
            nw2=l+w-x; nh2=t+h-y; if(nw2<0){nw2=0;}if(nh2<0){nh2=0;}
            window.status=w+','+h;
           if(x<=l){obj.width=w+nw;}if(y<=t){obj.height=h+nh;}
           if(x<=ol){obj.left=x;obj.width=nw2;}
           else{obj.width=nw;}
           if(y<=ot){obj.top=y;obj.height=nh2;}
           else{obj.height=nh;}
}

function chkDrag(e){
      if (document.all) {
            x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;}
     else{
             x=e.pageX;y=e.pageY;if(x<0){x=0;}if(y<0){y=0;}}
      if(drag){dragdiv();}
}
      document.onmousemove=chkDrag;
      var exit=true;

</script>

hope this helps

Webmonkey

Ok. I'll parse through this code and integrate the two to make it work. I'll get back with you soon.

Webmonkey

SOLUTION

alberthendriks

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jaysolomon

No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Split: NetGroove {http:#9786755} & Webmonkey {http:#9789659} & alberthendriks {http:#9845472}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer