vml 实现web topo原型（12）-自动摆放

最新推荐文章于 2025-05-28 09:00:02 发布

原创最新推荐文章于 2025-05-28 09:00:02 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #button #function #date #javascript #behavior

web编程专栏收录该内容

54 篇文章

订阅专栏

本文介绍了一种基于JavaScript的网络拓扑自动布局算法，该算法可根据设备的hop属性将其放置于不同层级，并支持矩形、圆形及环形布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为网络拓扑，自动摆放时必不可少的功能。

根据MVC模型的思路，控制摆放的逻辑应该放在后台的控制层。

不过这里为了简化演示，直接通过js来实现简单的摆放算法。

这里主要显示一下效果。主要通过设备的hop属性来控制设备显示所在的层数和位置。

支持：

矩形摆放

圆形摆放

环形摆放

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