vml 实现web topo原型（12）-自动摆放
2010-03-24 13:32
204 查看
作为网络拓扑，自动摆放时必不可少的功能。
根据MVC模型的思路，控制摆放的逻辑应该放在后台的控制层。
不过这里为了简化演示，直接通过js来实现简单的摆放算法。
这里主要显示一下效果。主要通过设备的hop属性来控制设备显示所在的层数和位置。
支持：
矩形摆放
圆形摆放
环形摆放
根据MVC模型的思路，控制摆放的逻辑应该放在后台的控制层。
不过这里为了简化演示，直接通过js来实现简单的摆放算法。
这里主要显示一下效果。主要通过设备的hop属性来控制设备显示所在的层数和位置。
支持：
矩形摆放
圆形摆放
环形摆放
<!-- dev5.html
1.拓扑整体放在一个区域(div/group)
2.自动摆放
-->
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v/:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
拓扑
</title>
</head>
<mce:script type="text/javascript" language="javascript" src="./js/createNE.js" mce_src="./js/createNE.js"></mce:script>
<mce:script type="text/javascript" language="javascript" src="./js/moveObj.js" mce_src="./js/moveObj.js"></mce:script>
<mce:script type="text/javascript"><!--
//将生成的vml保存
function save(){
//alert(document.body.innerHTML);
//alert(document.getElementById("backdiv").innerHTML);
var win=window.open('','','top=10000,left=10000');
//win.document.write('<html xmlns:v="urn:schemas-microsoft-com:vml">');
win.document.write(' <STYLE> v//:* { BEHAVIOR: url(#default#VML) } </STYLE>');
win.document.write('<body>');
win.document.write(document.getElementById("backdiv").innerHTML)
win.document.write('</body>');
win.document.execCommand('SaveAs','','dev.htm')
win.close();
}
//缩放
function zoom(h)
{
//bandwidthLegend.coordsize=xx/h+","+yy/h;
//div的放大不起作用
//document.getElementById("backdiv").style.zoom=h;
//大小变,top不变
document.getElementById("backgroup").style.zoom=h;
//连距离也相对变大了
//backgroup.coordsize=1000/h+","+1000/h;
//字不变大
//document.getElementById("DEV00005").coordsize=29/h+","+17/h;
//DEV00005.coordsize=29/h+","+17/h;
//bandwidthLegend.title="现在是"+h+"倍图";
}
//点中设备的相关电路变虚线
showDevRelaCir=true;
//初始化演示数据
//应该在后台生成
//设置hop数为0,1,2,画lvl圈
var m=6;
var n=6;
var lvl=3;//这里控制摆放的层数(1~3)
var st=new Date().getTime();
var hop =new Array();
for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var deviceid;
var tmpid=i*n+j;
deviceid="dev"+tmpid;
hop[tmpid]=i;
}
}
var st1=new Date().getTime()
var tt1=st1 - st;
//alert("初始化时间为"+tt1+"毫秒");
//按hop进行统计.只处理3hop(这里有实际hop和显示层的对应关系)
//这里可以记录每个hop点对应的设备，也可以记录每个设备对应的hop点.感觉后一个好一点(便于扩展多hop情况，因为没有二维数组)?
var hop0=new Array();
var hop1=new Array();
var hop2=new Array();
var hopcount=new Array();
var hopnum=new Array();
var hoplvl=new Array(); //实际5跳可能显示在3层上,或者不显示
for (ii = 0; ii < lvl; ii++){
hopcount[ii]=0;
}
for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var deviceid;
var tmpid=i*n+j;
deviceid="dev"+tmpid;
var devhop=hop[tmpid];
if(devhop < lvl){
hoplvl[tmpid]=devhop;
hopnum[tmpid]=hopcount[devhop];
hopcount[devhop]++;
//alert(hopcount[devhop]);
}
else{
hoplvl[tmpid]=lvl-1;
hopnum[tmpid]=hopcount[lvl-1];
hopcount[lvl-1]++;
}
/*
if(hop[tmpid] == 0){
hop0[hopcount[0]]=deviceid;
hoplvl[tmpid]=0;
hopnum[tmpid]=hopcount[0];
hopcount[0]++;
}
else if(hop[tmpid] == 1){
hop1[hopcount[1]]=deviceid;
hoplvl[tmpid]=1;
hopnum[tmpid]=hopcount[1];
hopcount[1]++;
}
else {//暂时把超过3跳的算为3跳
hop2[hopcount[2]]=deviceid;
hoplvl[tmpid]=2;
hopnum[tmpid]=hopcount[2];
hopcount[2]++;
}
*/
}
}
//矩形排列
//将画布分为(hop+1)*(hopcount(n)+1)块，把设备摆到交叉点上
//
var topmax=1000;
var leftmax=1000;
function alignbyrect(hopmax,devnum){
//alert(hopmax);
//先根据hop计算hop点行坐标
var topstep;
topstep=Math.round(topmax/(hopmax+1));
//alert("HI");
//对于每行，分别计算列坐标
var leftstep =new Array();
for (ii = 0; ii < hopmax; ii++){
leftstep[ii]=Math.round(leftmax/(hopcount[ii]+1));
//alert(hopcount[ii]);
}
//摆放设备.
//alert(devnum);
for (var i = 0; i < devnum; i++){
var deviceid;
var tmpid=i;
deviceid="dev"+tmpid;
//alert(deviceid);
var obj=document.getElementById(deviceid);
var x;
var y;
x=hopnum[tmpid];//列
y=hoplvl[tmpid];//行
var tox=(x+1)*leftstep[y];
var toy=(y+0.2)*topstep;
//alert(tox);
movdev(obj,toy,tox);
//movdev(obj,100,100);
//alert("hi");
}
}
//圆形排列
function alignbyround(devnum){
//和hop无关。计算hop点行坐标
for (var i = 0; i < devnum; i++){
var deviceid;
var tmpid=i;
deviceid="dev"+tmpid;
//alert(deviceid);
var obj=document.getElementById(deviceid);
var r=Math.round(topmax/4);
var pe=2*3.14*r; //周长
var angle=Math.PI*2*i/devnum;
var tox=r*Math.sin(angle)+r;
//alert(tox);
var toy=r-r*Math.cos(angle);
movdev(obj,toy,tox);
}
}
//环型排列
function alignbycircle(hopmax,devnum){
//先根据hop计算hop点行坐标
var r=new Array();
for (ii = 0; ii < hopmax; ii++){
r[ii]=Math.round(topmax/3*(ii+1)/(hopmax+1));
}
for (var i = 0; i < devnum; i++){
var deviceid;
var tmpid=i;
deviceid="dev"+tmpid;
//alert(deviceid);
var obj=document.getElementById(deviceid);
var rm=Math.round(topmax/3);
var hopn=hoplvl[tmpid]; //第nhop
// 第n hop 的设备总数
var devc=hopcount[hopn];
//第nhop的顺序
var devi=hopnum[tmpid];
var pe=2*3.14*r[hopn]; //第nhop的周长
var angle=Math.PI*2*devi/devc;
var tox=r[hopn]*Math.sin(angle)+rm;
//alert(tox);
var toy=rm-r[hopn]*Math.cos(angle);
movdev(obj,toy,tox);
}
}
// --></mce:script>
<body bgcolor="#ffffff">
<div id="backdiv">
<v:group id="backgroup" style="position:absolute;Z-INDEX:2;WIDTH:1000.0;HEIGHT:1000;top:50;left:50";coordsize="1000,1000">
</v:group>
</div>
<mce:script type="text/javascript"><!--
//创建设备
var st2=new Date().getTime();
for (i = 0; i < m; i++)
{
for (j = 0; j < n; j++)
{
var deviceid;
var tmpid=i*n+j;
deviceid="dev"+tmpid;
var device;
device=createDev(deviceid,i*40+100,j*40+100,30.0,18.0,"./image//DEV_IP_R.gif",deviceid,"backgroup");
device.title=deviceid;
}
}
var st3=new Date().getTime()
var tt1=st3 - st2;
//创建电路
//alert(m);
for (i = 1; i < m; i++)
{
for (j = 1; j < n; j++)
{
var circuitid;
var circuitid1;
var tmpid=i*n+j;
//上一行的设备
var tmpid1=(i-1)*n+j;
//前一列的设备
var tmpid2=i*n+j-1;
circuitid="cir"+"0"+tmpid;
circuitid1="cir"+"1"+tmpid;
var devicea;
var deviceb;
devicea="dev"+tmpid;
var xa;
var xb;
var ya;
var yb;
xa=j*40+15+100;
ya=i*40+9+100;
xb=j*40-40+15+100;
yb=i*40-40+9+100;
var from;
var to;
from=xa+","+ya;
to=xa+","+yb;
var link;
deviceb="dev"+tmpid1;
link=createCircuit(circuitid,from,to,circuitid,"#004382","",devicea,deviceb,"1px","backgroup");
link.title=circuitid+":"+devicea+";"+deviceb;
deviceb="dev"+tmpid2;
from=xa+","+ya;
to=xb+","+ya;
link=createCircuit(circuitid1,from,to,circuitid1,"#004382","",devicea,deviceb,"2px","backgroup");
link.title=circuitid1+":"+devicea+";"+deviceb;
//device=createDev(deviceid,i*40,j*30,29.0,17.0,"./image//DEV_IP_R.gif",deviceid);
}
}
var st4=new Date().getTime()
var tt2=st4 - st3;
//alert("生成设备执行时间为"+tt1+"毫秒");
//alert("生成电路执行时间为"+tt2+"毫秒");
// --></mce:script>
<button onclick="save()">源码</button>
<button onclick="zoom(2)">放大2倍</button><br>
<button onclick="alignbyrect(lvl,m*n)">矩形摆放</button>
<button onclick="alignbyround(m*n)">圆形摆放</button>
<button onclick="alignbycircle(lvl,m*n)">环形摆放</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- VML实现web topo原型 (2)-基本元素
- vml 实现web topo原型(4)-设备和电路
- vml 实现web topo原型(6)-鼠标事件
- vml实现web topo原型（7）-性能测试
- vml 实现web topo原型(13) -弹出菜单
- vml 实现 WEB topo原型(3)-设备
- vml实现web topo原型(14)-背景图
- vml实现web topo原型(9) - 性能改进
- VML实现WEB Topo原型（1）
- vml实现web topo原型（10) -移动
- vml实现web topo原型(11) - 弧线
- STC12单片机实现自动下载程序
- FreeBSD 12 下实现 Vim8 自动补全 Python
- Css中实现两个DIV左右并排摆放，且自动按比例伸缩（示例）
- 12-31--PHP函数spl_autoload_register实现自动加载研究
- VML实现web top0 原型(5)-缩放
- 12-31--PHP函数spl_autoload_register实现自动加载研究
- Android应用开发笔记(12)：Android应用的自动升级、更新模块的实现
- Eclipse自动打开实现类原型的工具
- Css中实现两个DIV左右并排摆放，且自动按比例伸缩（示例）