<html><head> <title>javascript绘图</title> 
<style>
td{font-size:12px}
td</style></head> <script src="line.js"></script><script language="javascript">
var Objfunction MouseDown(obj){var o = window.event.srcElement;if (o.IsMove){ Obj=obj; Obj.setCapture(); Obj.l=event.x-Obj.style.pixelLeft; Obj.t=event.y-Obj.style.pixelTop;
}}function MouseMove(){if(Obj!=null){ Obj.style.left = event.x-Obj.l; Obj.style.top = event.y-Obj.t; }}function MouseUp(){if(Obj!=null){ Obj.releaseCapture(); Obj=null; }}function link(e){ var obj1 = document.all.t1; var obj2 = document.all.t2;document.all.printLine.innerHTML = "";Line(getPos(obj1)[1]-96,getPos(obj1)[0]-13,getPos(obj2)[1]-96,getPos(obj2)[0]-13);}function getPos(cell){ var pos = new Array(); var t=cell.offsetTop; var l=cell.offsetLeft; while(cell=cell.offsetParent) { t+=cell.offsetTop; l+=cell.offsetLeft; } pos[0] = t; pos[1] = l; return pos;}
</script><body bgcolor="#ffffff"> <div style="position:absolute;" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()><TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t1"><TR> <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD></TR><TR> <TD> <table width="98%"> <tr><td width="20">&</td><td>C1</td></tr> <tr><td></td><td>C2</td></tr> <tr><td></td><td>C3</td></tr> </table> </TD></TR></TABLE></div><div style="position:absolute;left:100px" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()><TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t2"><TR> <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD></TR><TR> <TD> <table width="98%"> <tr><td width="20">&</td><td>C1</td></tr> <tr><td></td><td>C2</td></tr> <tr><td></td><td>C3</td></tr> </table> </TD></TR></TABLE></div><div style="position:absolute;left:100px" id="printLine"></div><INPUT TYPE="button" onclick="link(this);" value="显示关系"></body></html>
line.js
var rad = Math.PI/180 var maxY = 400 var color = "red" var Ox = -1 var Oy = -1 function outPlot(x,y,w,h) { print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';'+w+';font-size:1px;background-color:'+color+'"></span>') } function Plot(x,y){ outPlot(x,y,1,1) if(Ox>=0 || Oy>=0) ShowLine(Ox,Oy,x-Ox,y-Oy) Ox = x Oy = y } function ShowLine(x,y,w,h){ if(w<0) { x += w w = Math.abs(w) } if(h<0) { y += h h = Math.abs(h) } if(w<1) w=1 if(h<1) h=1 outPlot(x,y,Math.round(w),Math.round(h)) } function orgY(y) { return y; return maxY-y }function sign(n) { if(n>0) return 1 if(n<0) return -1 return n } function Line(x1,y1,x2,y2) { x2 = Math.round(x2) y2 = Math.round(y2) xo = x2 yo = y2 y1 = orgY(y1) y2 = orgY(y2) var str = "" var i=0 var x = x1 var y = y1 dx = Math.abs(x2-x1) dy = Math.abs(y2-y1) s1 = sign(x2-x1) s2 = sign(y2-y1) if(dx==0 || dy==0) { ShowLine(x1,y1,x2-x1,y2-y1) return } if(dx>dy) { temp = dx dx = dy dy = temp key = 1 }else key = 0 e = 2*dy-dx for(i=0;i<dx;i++) { px = 0 py = 0 Plot(x,y) while(e>=0) { if(key==1) { x += s1 px += s1 }else { y += s2 py += s2 } e = e-2*dx } if(key==1) y += s2 else x += s1 e = e+2*dy } } function print(str) { document.all.printLine.innerHTML += str; }