今天开始，我们将从最基础的分析开始，分析如何构建HTML5Canvas拓扑图应用。HT内部封装了一个拓扑图组件ht.graph.GraphView（以下简称GraphView），它包含在HT框架2D中，是功能最多的组件，其相关类库都在ht.graph包下。GraphView具有基本的图形展示和编辑功能、拓扑节点连接和自动布局功能、电力、电信等行业的预定义对象、动画渲染等特效。因此，它的应用范围很广，既可以作为绘图工具，也可以作为通用的图形编辑工具，可以扩展到工作流、组织结构图等企业应用。简单来说：拓扑图是一种广义的表述。电信网管的网络拓扑图、电网拓扑图、工业控制的监控图、工作流程图、思维导图等，简单来说就是由节点连接组成。这些是这里提到的拓扑图。使用HT开发网络拓扑图非常容易。只需要几行代码就可以完成一个简单的服务端和客户端拓扑图：这个例子很基础，差不多就完成了服务端和客户端的拓扑图。所有功能。话不多说，猜猜这个例子用了多少行代码，包括HTML标签的所有部分？减去空白行只有50行。我也做了很多款式设计。毕竟展示给大家的例子不能太丑~开篇先说明一下，HT是一个基于HTML5标准的一站式企业应用图形界面，包含通用组件等丰富的图形界面开发类库，拓扑组件和3D渲染引擎。用户只需要importht.js就可以了，和其他的完全不冲突，因为HT只是声明了一个全局变量ht，仅此而已。接下来分析代码部分。首先构建拓扑图场景：dm=newht.DataModel();//数据容器gv=newht.graph.GraphView(dm);//拓扑组件参数为dm绑定的数据模型gv.addToDOM();//将拓扑图添加到正文中。所有HT组件的根都是一个div，通过getView()方法获取。我们在addToDOM方法中使用了这个方法：addToDOM=function(){varself=this,view=self.getView(),//获取组件底层divstyle=view.style;document.body.appendChild(view);//给body添加底层divstyle.left='0';//HT一般设置组件为absolute绝对定位style.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);//事件监听窗口大小变化，iv为延迟刷新组件}然后在拓扑场景中添加“server”和“client”节点：varserver=newht.Node();server.setName('server');//设置节点名称，显示在节点下方server.setImage('serverImage');//设置节点图片server.setSize(20,60);//设置节点大小dm.add(server);//添加节点到数据容器dmserver.setPosition(100,100);//设置节点坐标(x,y)vargroup=newht.Group();//Group，组内可以有多个节点group.setImage('groupImage');//设置图片dm.add(group);varclient=newht.Node();//这个节点被添加到group中client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);//Group添加childrengroup.setExpanded(true);//设置组为展开模式client.setPosition(200,100);//设置节点位置如果组中只有一个节点，那么这个节点的位置可以是组的位置服务器和客户端之间的连接？2行代码搞定！其实HT中添加节点的方法很简单，一般2行代码就可以完成：首先声明实例变量，然后将实例变量添加到数据容器中varedge=newht.Edge（服务器，客户端）；dm.add（edge）；我们很好奇虚线是怎么做出来的？虚线的形成建立在连接线上，分三步：导入ht-dashflow.js文件；设置连接线的样式属性edge.dash.flow为true；在场景组件中开启虚线流的开关，这里是gv.enableDashFlow(true)；是不是很简单！接下来看看如何设置：edge.s({//节点设置样式属性'edge.dash':true,//显示虚线'edge.dash.flow':true,//开启虚线流'edge.dash.color':'yellow',//虚线颜色'edge.dash.pattern':[8,8],//虚线样式'label':'flow',//节点注释'label.background':'pink',//节点注释背景色});就这样，所有的显示部分都介绍完了~等等，好像少了什么？对了，忘记介绍HT中的ht.Group类了。顾名思义，就是“群”的意思。一个组可以包含许多节点。双击可以显示或隐藏组中的所有节点。上面的代码已经写好了，不过我还做了一个小动作，就是分组右上角的显示部分，其实就是一个提示说明的标签：group.s({'group.background':'rgba(255,255,0,0.1)',//设置'note'组的背景色:"Doubleclickme!",//注释显示的内容'note.position':13,//annotationposition'note.offset.y':10,//注释位置y轴偏移量});我们可以通过note.position改变标签的位置（具体位置信息请参考HTforWeb位置手册），或者使用note.offset.x和note.offset.y来改变标签的位置。所有代码都解析！我会尽快更新。如果觉得进度慢，可以到我们的官网（HTforWeb）自行学习。希望大家多多收获，学习是自己的事，赶快练习改本文内容。成为你自己的知识！
