互联网拓扑图详解,前端网络拓扑图
今天我们就从最基础的角度来分析如何构建HTML5 Canvas拓扑应用。ht封装了一个拓扑组件ht.graph.GraphView(以下简称图形视图)是HT框架中2D函数最丰富的组件，其相关类库都在ht.graph包下。GraphView具有基本图形的呈现和编辑、拓扑节点的连接和自动排列、电力和电信行业的预定义对象以及动画渲染等特效功能。因此，它具有广泛的应用，可以作为监控领域的绘图工具和人机界面，通用的图形编辑工具，并可以扩展到工作流和组织结构图等企业应用。简单来说，拓扑图就是一个概括的说法，比如电信网管的网络拓扑图、电网拓扑图、工控监控图、工作流程图、思维脑图等。简单来说就是由节点连接组成，这里指的都是节点连接。
用HT开发网络拓扑图非常容易。只需几行代码就可以完成一个简单的服务器和客户端拓扑图：
这个例子很基础，几乎完成了拓扑中服务器和客户端的所有功能。事不宜迟，猜猜这个例子用了多少行代码，包括HTML标签的所有部分？减去空白行，只有50行。我也为风格部分做了很多设计。毕竟我给你看的例子不能太丑~
你可以在tuputu_jb51.rar自行下载代码注意，因为有json文件，所以会出现图片的跨域问题。您需要使用Firefox或本地服务器来运行。
先在开头说明一下，ht是基于HTML5标准的企业应用图形界面一站式解决方案。包含通用组件、拓扑组件、3D渲染引擎等丰富的图形界面开发类库。用户只需要引入ht.js，和其他的完全不冲突，因为ht只是声明了一个全局变量HT，仅此而已。
接下来，分析代码部分。首先，设置拓扑图场景：
dm=新ht。data model()；//数据容器gv=new ht . graph . graph view(DM)；//拓扑组件参数是dm绑定的数据模型gv . addtodom()；//将拓扑图添加到几何体中。HT的所有组件的根是一个div，它是通过getView()方法获得的。我们在addToDOM方法中使用了这个方法：
addtodom=function(){ var self=this，view=self.getview()，//获取组件的底层div style=view.styledocument.body.appendChild(视图)；//将底部div添加到body body style.left= 0//HT一般所有组件都设置为绝对定位style.right= 0style . top=“0”；style . bottom=“0”；window . addevent listener( resize ，function(){ self . iv()；}，假)；//事件监控窗口大小变化，iv为延迟刷新组件}然后在拓扑场景中添加“服务器”和“客户端”节点：
var服务器=新ht。node()；server.setName(“服务器”)；//设置节点名，显示在节点server.setImage(serverImage )下；//设置节点图片server.setSize(20，60)；//设置节点大小DM . add(server)；//将节点添加到数据容器dm server.setPosition(100，100)；//设置节点坐标(x，y)var group=new ht。group()；//Group，可以有多个节点Group . setimage( Group image )；//设置图片dm.add(组)；var client=新ht。node()；//此节点是添加到组中的client . setname( client )；client . setimage( clientImage )；dm.add(客户端)；group.addChild(客户端)；//group add children group . set expanded(true)；//在扩展模式下将组设置为client.setPosition(200，100)；//设置节点位置。如果组中只有一个节点，则该节点的位置可以是组的位置。服务器和客户端之间的连接？2行代码完成！其实HT中添加节点的方法很简单。一般来说，它可以以两行代码结束：首先声明实例变量，然后将实例变量添加到数据容器中。
var edge=新ht。边缘(服务器、客户端)；DM . add(edge)；我们很好奇虚线是怎么做出来的。虚线的形成是建立在连接线上的。有三个步骤：
ht-dashflow.js文件介绍；将连接的样式属性edge.dash.flow设置为true；打开场景组件中虚线流的开关，这里是gv . enabledashflow(true)；是不是很简单！接下来，让我们看看如何设置它：
Edge.s({//node设置样式属性 edge.dash: true，//显示虚线 edge.dash.flow: true，//打开虚线流程 edge.dash.color: yellow ，//虚线颜色 edge.dash.pattern: [8，8]//虚线样式 label: flow ，//节点标注 label.background: pink ，//节点标注背景颜色})；以上是所有显示部分的介绍~等等，好像少了什么？对了，忘记介绍ht了。HT中的组类。顾名思义，就是“群”的意思。一个组可以包含许多节点。双击可以显示或隐藏组中的所有节点。上面的代码已经写好了，但是我还做了一个小技巧，就是组右上角的显示部分，其实是一个注释，用来提示解释：
group . s({ group . background : rgba(255，255，0，0.1)，//设置群组 note 的背景颜色：双击我！，//标记显示的内容‘note . position’:13，//标记位置‘note . offset . y’:10，//标记位置y轴偏移量})；我们可以通过note.position来改变标注的位置(具体位置信息请参考HT for Web location manual)，也可以使用note.offset.x和note.offset.y来改变标注的位置。
所有代码都被解析！我会尽快更新的。如果觉得进度慢，可以自己去我们官网(HT for Web)学习。希望你能有更多的收获。学习是自己的事。练习这篇文章，把它变成你自己的知识！
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。