<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv=Content-Type content="text/html; charset=GB2312">
<style>
v/:* {behavior:url(#default#VML);}
o/:* {behavior:url(#default#VML);}
x/:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<SCRIPT LANGUAGE="JScript">
//点的对象:
function point(x0,y0)
{
this.x = x0;
this.y = y0;
//向量的模
this.r = Math.sqrt(this.x*this.x+this.y*this.y);
var alfa = Math.acos(this.x/this.r);
if (this.y >= 0) {
alfa = alfa;
} else {
alfa = 2*Math.PI-alfa;
}
//向量的倾角(弧度)
this.alfaR = alfa;
//向量的倾角(角度)
this.alfaD = alfa*180/Math.PI;
}
function line1(id,from,to,strokeweight,strokecolor,dashstyle,arrow1,arrow2) {
this.id = id;
this.from = from;
this.to = to;
if (strokeweight==undefined)
{
strokeweight = "1";
}
if (strokecolor==undefined)
{
strokecolor = "#00F";
}
if (dashstyle==undefined)
{
dashstyle = "solid";
}
if (arrow1==undefined)
{
arrow1 = "";
}
if (arrow2==undefined)
{
arrow2 = "block";
}
this.strokeweight = strokeweight;
this.strokecolor = strokecolor;
this.dashstyle = dashstyle;
this.startarrow = arrow1;
this.endarrow = arrow2;
this.length = getlinelen;
this.draw = drawline;
}
//取得线段的长度:
function getlinelen()
{
if ((this.from.x == this.to.x) && (this.from.y == this.to.y))
{
return 0;
} else
{
return Math.sqrt((this.from.x-this.to.x)*(this.from.x-this.to.x)+(this.from.y-this.to.y)*(this.from.y-this.to.y));
}
}
//画线:
// arrow=None,Block,Classic,Diamond,Oval,Open
// dashstyle= Solid,ShortDash,ShortDot,ShortDashDot,ShortDashDotDot,Dot,
// Dash,LongDash,DashDot,LongDashDot,LongDashDotDot
function drawline()
{
// str = str +" left:0px;top:0px;Z-INDEX:0";
var str = "";
str = str +"<v:line id="+this.id+" style='position:absolute;left:0;top:0;' ";
str = str +" οnmοusedοwn='down1(this);'";
str = str +" from='"+this.from.x+","+this.from.y+"'";
str = str +" to='"+ this.to.x +","+ this.to.y +"' ";
str = str +" strokeweight='"+this.strokeweight+"px;' strokecolor='"+this.strokecolor+"'> ";
str = str +" <v:stroke dashstyle='"+this.dashstyle+"' startarrow='"+this.startarrow+"' endarrow='"+this.endarrow+"' /> ";
str = str +"</v:line>";
document.write(str);
}
function getcontinuecolor(bgnclr)
{
// bgnclr: #FFF
var vclr = parseInt(bgnclr.substr(1,3),16);
vclr += 4;
var s = "000"+vclr.toString(16);
var l = s.length-3;
window.status=bgnclr.substr(1,3)+"saaaaaaato='"+vclr+";"+s.substr(l,3);
return "#"+s.substr(l,3);
}
function getrandomcolor()
{
var r1,r2,r3;
r1=Math.round((Math.random()*256));
r2=Math.round((Math.random()*256));
r3=Math.round((Math.random()*256));
// document.write("随机数:"+r1+"."+r2+"."+r3);
return "#"+ prefixzero(r1.toString(16))+
prefixzero(r2.toString(16))+
prefixzero(r3.toString(16));
}
function prefixzero(strg)
{
var slen=strg.length;
strg = (slen==1)?("0"+strg):(strg);
return strg;
}
function angle(Deg)
{
this.Degree = Deg*180 / Math.PI;
this.Radian = Deg*Math.PI / 180;
}
//点x1,y1 经转af(角度)后的新点坐标x2,y2:
function RotPnt(p1,alfa1)
{
// var alfa1 = new angle(alfa1).Radian;
x2 = p1.x * Math.cos(alfa1) - p1.y * Math.sin(alfa1);
y2 = p1.x * Math.sin(alfa1) + p1.y * Math.cos(alfa1);
return new point(x2,y2);
}
// 点平移:
function shiftp(p1,p2) {
return new point((p1.x + p2.x),(p1.y + p2.y));
}
// 画椭园:
function ellipsering(id,x0,y0,ra,rb,filled,fillcolor,stroked,strokecolor,strokeweight,rotation,txt)
{
var left,top,width,height
var str = "";
left = x0-ra;
top = y0-rb
width = 2*ra;
height = 2*rb;
str = str +"<v:oval id="+id+" ";
str = str +" style='position:absolute; ";
str = str +" left:"+left+";top:"+top+";width:"+width+";height:"+height+"; ";
str = str +" rotation:"+rotation+"fd;z-index:1' ";
str = str +" οnmοusedοwn='down1(this);'";
str = str +" filled='"+filled+"' fillcolor="+fillcolor+" stroked='"+stroked+"' strokecolor="+strokecolor+" ";
str = str +" strokeweight="+strokeweight+"> ";
str = str +" <v:stroke dashstyle='solid'/>";
str = str +" <v:TextBox inset='0,0,0,0'><p style='color:#FFFFFF;font-size:12;' align=center>"+txt+"</p></v:TextBox>";
str = str +"</v:oval>";
document.write(str);
}
//线段a-b上距离a端R的点的坐标:
function DisPnt(a,b,R)
{
var R0 = new point(R,0);
var ab = new point(b.x-a.x,b.y-a.y);
var a0 = new RotPnt(R0,ab.alfaR);
var a1 = new shiftp(a0,a);
return a1;
}
//画两园间的连接线(不是通过园心,而是通过园周)
//一个园在a点,另一个园在b点,两园的半径都为R
function Line2Cir(id,a,b,R,clr)
{
a1 = new DisPnt(a,b,R);
b1 = new DisPnt(b,a,R);
var lab1 = new line1(id,a1,b1,1,clr);
lab1.draw();
return;
}
//
var originx0 = screen.availWidth/2 - 20; //取屏幕宽度中值-20
var originy0 = screen.availHeight/2 - 100; //取屏幕高度中值-200
var originz0 = 0; //Z值
var OrigPnt0 = new point(originx0,originy0);
</SCRIPT>
</head>
<body scroll=yes style="font-family: 宋体; font-style: italic; background-color: #ffffff; color:#0000FF"
οnmοusemοve="move();" οnmοuseup="down=false;">
1,通过JAVASCRIPT实现饼与线移动。以屏幕中心为坐标原点(按F11让屏幕最大化)。(谷来成,2007.7.19)<br>
2,线为有向线条<br>
<script>
R = 20;
var a = new point(originx0-400,originy0);
var b = new point(a.x+150,a.y+150);
var c = new point(a.x+300,a.y);
var d = new point(a.x+450,a.y);
ellipsering("ca",a.x,a.y,R ,R ,"t","#E00FF0","t","#FF0000",-1,"0,0","A");
ellipsering("cb",b.x,b.y,R ,R ,"t","#0DD000","t","#FF0000",-1,"0,0","B");
ellipsering("cc",c.x,c.y,R ,R ,"t","#000DD0","t","#FF0000",-1,"0,0","C");
ellipsering("cd",d.x,d.y,R ,R ,"t","#F0D000","t","#FF0000",-1,"0,0","D");
//var lab = new line1("l_ab",a,b,1,"#0FF"); lab.draw();
//var lbc = new line1("l_bc",b,c,1,"#F0F"); lbc.draw();
//var lcd = new line1("l_cd",c,d,1,"#F00"); lcd.draw();
//function Line2Cir(id,a,b,R,clr)
Line2Cir("l_ab",a,b,R,"#07F");
Line2Cir("l_bc",b,c,R,"#77F");
Line2Cir("l_cd",c,d,R,"#F7F");
var over=false,down=false,oLeft,oTop,o;
function down1(m)
{
o=m;
down=true;
oLeft = event.clientX-parseFloat(o.style.left);
oTop = event.clientY-parseFloat(o.style.top)
window.status=""+oLeft+","+oTop;
}
function move()
{
if(down)
{
o.style.left = event.clientX-oLeft;
o.style.top = event.clientY-oTop;
if (o.id == "ca")
{
a0 = new point(parseFloat(o.style.left)+parseFloat(o.style.width)/2.0,
parseFloat(o.style.top)+parseFloat(o.style.height)/2.0);
b0 = new point(parseFloat(cb.style.left)+parseFloat(cb.style.width)/2.0,
parseFloat(cb.style.top)+parseFloat(cb.style.height)/2.0);
a1 = new DisPnt(a0,b0,R);
b1 = new DisPnt(b0,a0,R);
l_ab.from = "'"+a1.x+","+a1.y+"'";
l_ab.to = "'"+b1.x+","+b1.y+"'";
} else if (o.id == "cb")
{
a0 = new point(parseFloat(ca.style.left)+parseFloat(ca.style.width)/2.0,
parseFloat(ca.style.top)+parseFloat(ca.style.height)/2.0);
b0 = new point(parseFloat(o.style.left)+parseFloat(o.style.width)/2.0,
parseFloat(o.style.top)+parseFloat(o.style.height)/2.0);
a1 = new DisPnt(a0,b0,R);
b1 = new DisPnt(b0,a0,R);
l_ab.from = "'"+a1.x+","+a1.y+"'";
l_ab.to = "'"+b1.x+","+b1.y+"'";
a0 = new point(parseFloat(o.style.left)+parseFloat(o.style.width)/2.0,
parseFloat(o.style.top)+parseFloat(o.style.height)/2.0);
b0 = new point(parseFloat(cc.style.left)+parseFloat(cc.style.width)/2.0,
parseFloat(cc.style.top)+parseFloat(cc.style.height)/2.0);
a1 = new DisPnt(a0,b0,R);
b1 = new DisPnt(b0,a0,R);
l_bc.from = "'"+a1.x+","+a1.y+"'";
l_bc.to = "'"+b1.x+","+b1.y+"'";
} else if (o.id == "cc")
{
a0 = new point(parseFloat(cb.style.left)+parseFloat(cb.style.width)/2.0,
parseFloat(cb.style.top)+parseFloat(cb.style.height)/2.0);
b0 =new point(parseFloat(o.style.left)+parseFloat(o.style.width)/2.0,
parseFloat(o.style.top)+parseFloat(o.style.height)/2.0);
a1 = new DisPnt(a0,b0,R);
b1 = new DisPnt(b0,a0,R);
l_bc.from = "'"+a1.x+","+a1.y+"'";
l_bc.to = "'"+b1.x+","+b1.y+"'";
a0 = new point(parseFloat(o.style.left)+parseFloat(o.style.width)/2.0,
parseFloat(o.style.top)+parseFloat(o.style.height)/2.0);
b0 = new point(parseFloat(cd.style.left)+parseFloat(cd.style.width)/2.0,
parseFloat(cd.style.top)+parseFloat(cd.style.height)/2.0);
a1 = new DisPnt(a0,b0,R);
b1 = new DisPnt(b0,a0,R);
l_cd.from = "'"+a1.x+","+a1.y+"'";
l_cd.to = "'"+b1.x+","+b1.y+"'";
} else if (o.id == "cd")
{
a0 = new point(parseFloat(cc.style.left)+parseFloat(cc.style.width)/2.0,
parseFloat(cc.style.top)+parseFloat(cc.style.height)/2.0);
b0 = new point(parseFloat(o.style.left)+parseFloat(o.style.width)/2.0,
parseFloat(o.style.top)+parseFloat(o.style.height)/2.0);
a1 = new DisPnt(a0,b0,R);
b1 = new DisPnt(b0,a0,R);
l_cd.from = "'"+a1.x+","+a1.y+"'";
l_cd.to = "'"+b1.x+","+b1.y+"'";
} else
{
}
window.status=""+o.style.left+","+o.style.top + " " +o.id +"===="+l_ab.from +" " +l_ab.to;
}
}
</script>
</body>
</html>