园与线的拖动01

最新推荐文章于 2024-09-22 11:17:00 发布

-布谷鸟-

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量3.3k

点赞数

文章标签： function behavior textbox office url javascript

本文链接：https://blog.csdn.net/cuckoo1/article/details/1704686

版权

<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>

//点的对象:
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);