未完成的代码(JS)
本来打算写个显示数据库关系的页面，可惜JS太慢了。代码又舍不得扔,就放在这里。
<html>
<head>
<title>javascript绘图</title>
<style>
td{font-size:12px}
</style>
</head>
<script src="line.js"></script>
<script language="javascript">
var Obj
function 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>
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+';width:'+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;
}
<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+';width:'+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; } 
