今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，以及指示灯的闪烁和流量图形元素。 先来看看最终效果：http://www.hightopo.com/demo/...1.TP-LINK面板我们从TP-LINK设备面板开始。设备面板示意图如下：面板基本上可以由HTforWeb（http://www.hightopo.com/guide...)，中间的界面需要自定义图形来解决。让我们一步步实现，准备工作如下：导入我们的HT（http://www.hightopo.com/）：创建数据模型容器并添加到DOM中：dataModel=newht.DataModel();//创建数据模型容器graphView=newht.graph.GraphView(dataModel);//创建拓扑图组件graphView.addToDOM();可能有人看到这里的addToDOM()一头雾水？没错，这是HT的新API！之前我们要创建一个图形界面，不仅需要在CSS样式中定义main的top和left，还需要监听window对象的resize事件等，所以我们添加了addToDOM()来帮忙你做这一系列的事情，你可以看看源码中的实现：p.addToDOM=function(){varself=this,view=self.getView(),style=view.style;document.body.appendChild(视图);style.left='0';style.right='0';style.top='0';style.bottom='0';window.addEventListener('resize',function(){self.iv();},false);自我.iv();},准备工作完成后，就可以开始面板的绘制了。对于基本的图形，只需要设置相应的样式即可，比如有立体效果的按钮部分：{type:"circle",shadow:true,background:"rgb(0,0,0)",borderWidth:1、borderColor:"rgb(0,0,0)",border3d:true,gradient:"spread.horizo??ntal",gradientColor:"rgb(79,77,77)",dashColor:"rgb(0,0,0)",rotation:3.141592653589793,rect:[677,157,43,34]}自定义图形，之前介绍过，详见HTforWebshape手册（http://www.hightopo.com/guide...)需要指定vector类型为shape，其shape主要由两个属性描述：points和segments：points是ht.List类型数组的顶点信息，顶点是格式中的对象{x:100,y:200};segments为ht.List类型的线段数组信息，linesegment为1到5的整数，分别代表不同的顶点连接方式。Segments主要用来画曲线，或者有跳跃的断点的情况下，1~5的取值意义如下：1：moveTo，占用一个信息点，代表一个起点新路径；2：lineTo，占据一个点的信息，代表上一个点到这个点的连接；3：quadraticCurveTo，占用三个点信息，第一个点作为曲线的控制点，第二个点作为曲线的终点；4：bezierCurveTo，占用三个点信息，第一点和第二点作为曲线控制点Point，第三点作为曲线终点；5：closePath，不占用点信息，表示本次路径绘制结束，向路径起点关闭。ht.Default.setImage('tplink',{width:97,height:106,comps:[{type:"shape",background:"rgb(20,60,140)",borderWidth:8,borderColor:"gray",borderCap：“圆形”，点：[269、140、359、140、359、180、329、180、329、190、299、190、299、180、269、180、269、140]}]}）；将所有图形数据整合后，我们就形成了我们TPLINK面板的数据。整合方法如下：ht.Default.setImage('tplink',{width:97,height:106,comps:[{type:"shape",background:"rgb(20,60,140)",borderWidth:8,borderColor:"gray",borderCap:"round",points:[269,140,359,140,359,180,329,180,329,190,299,190,299,180,269,180,269,140]}，{类型：“圆”，阴影：真，背景：“rgb（0,0,0）”，borderWid日：1，borderColor：“rgb（0,0,0）”，border3d：true，渐变：“spread.horizo??ntal”，gradientColor：“rgb（79,77,77）”，dashColor：“rgb（0,0,0)",rotation:3,rect:[677,157,43,34]},//...//...//...//多个图形组件]});这只是注册图片的方法之一，我们也可以直接通过url注册（详见HTforWeb入门手册）： ht.Default.setImage('tplink','symbols/TPLink.json');将注册的矢量图的名称设置为模型：varnode=newht.Node(),node.setImage('tplink');dataModel.add（节点）；即使在HT的最新版本中，已经支持无需注册，直接调用setImage()并传入URL参数的方法（我的Demo中使用的就是这个方法）更加简洁，但是如果很多场景应用到同一个图片，建议用户使用注册图片。避免多次修改URL：node.setImage('symbols/TPLink.json');那么，现在在浏览器中预览您的HTML文档，是否有TPLINK面板？最后，我们如何让灯闪烁？使用HT开发的产品，实现闪烁效果是非常容易的，因为HT默认是调度绑定到DataModel中的Data数据，而且绑定的格式也很简单。你只需要使用一个func属性的对象即可替换，详见HTforWebDataBindingManual(http://www.hightopo.com/guide...)。这里指示灯的闪烁其实是visible属性值变化的结果，所以我们只需要给visible属性绑定数据即可，如下：{"type":"oval","visible"：{“func”：“attr@visibility1”}，“阴影”：真，“shadowColor”：“rgba（208,240,2,0.35）”，“背景”：“rgb（178,184,141）”，“渐变”：“radial.center","gradientColor":"rgb(247,255,0)","rect":[79,53,31,32]},setInterval(function(){node.a('visibility1',!t_node.a('visibility1'));},400);至此，你就顺利完成了一个TPLINK面板的制作（~.~），当然还有服务器的制作，这里就不赘述了，复杂的TPLINK面板制作完成，就是服务器还远吗？2.您还注意到我们的演示中有两个连接。我们应该如何做连接？HT默认提供直线和多点连接，但在绘制流程图、组织结构图、思维导图等应用中需要更多的连接类型。详情请点击HTforWebConnectionTypeManual(http://www.hightopo.com/guide...)。在我们的Demo中，连接服务器和TP-LINK的两条曲线都使用了新的自定义连接类型。ht.Default.setEdgeType(type,func,mutual)函数可以自定义连接类型：其中：type：字符串类型的连接类型，对应style的edge.type属性；fuc：函数类型，根据传入的参数（edge、gap、graphView、sameSourceWithFirstEdge）返回直线的方向信息；edge：当前线对象；gap：多条线捆绑时，笨线对象与中心线的距离；graphView：当前对应的topologyComponent对象；sameSourceWithFirstEdge：boolean类型，connection是否与同组的同一个connection同源；返回值为{points:newht.List(...),segments:newht.List(...)}结构连接方向信息，segments的值同上；mutual：该参数决定连接是否影响起始节点或结束节点上的所有连接，默认值为false，即只影响EdgeGroup中源和目标相同的连接。具体实现需要引入：然后调用ht.Default.setEdgeType(type,func,mutual)函数，代码如下：ht.Default.setEdgeType('line',function(edge){varsourcePoint=edge.getSourceAgent().getPosition(),targetPoint=edge.getTargetAgent().getPosition(),points=newht.List();点。add(sourcePoint);points.add({x:(sourcePoint.x+targetPoint.x)/2,y:(sourcePoint.y+targetPoint.y)/2+300});points.add(targetPoint);return{points:points,segments:newht.List([1,3])};});创建新连接时，注意连接类型edge.type是我们自定义的连接类型'line':varedge=newht.Edge();edge.setSource(startNode);edge.setTarget(endNode);edge.setLayer('edgeLayer');edge.s({'edge.type':'line','edge.color':'#0A3791','edge.width':8,'edge.center':true});dataModel.add（边缘）；连接到这里已经基本完成，还有一点，你可能对setLayer()方法不是很熟悉。实际上，此方法用于设置连接和原语的级别。因为默认的层级是边在节点下面，所以设置层级后调用graphView的setLayers方法改变层级之间的层级。关系： graphView.setLayers(['nodeLayer','edgeLayer']);如果对自定义连接类型还有疑惑，可以点击示例（http://www.hightopo.com/guide...）加深理解3.Flow来看看流量在HT产品中的炫酷效果（点击地址（http://www.hightopo.com/guide...）查看详情）：我Demo中的两个连接应用了不同的流方式，但是两种方式都需要ht.flow插件。此插件扩展了ht.Shape和ht.Edge类型的样式控制流效果。用户可以通过ht.Shape.setStyle()和ht.Edge.setStyle()来操作这些样式。下面简单介绍几种样式：1、flow值true和false，控制ht.Shape和ht.Edge是否可以流动，默认为false； 2、flow.count，控制流组数，默认为1； 3、flow.step，控制流程步长，默认为3； 4、flow.element.image，字符串类型，指定流组元素的图片，图片必须提前通过ht.Default.setImage()注册； .... 等，多种风格任你玩，详情点击地址（http://www.hightopo.com/guide...）；这里必须介绍一下流光特效插件：在这里，我们先预先注册流光图：ht.Default.setImage('arrow','符号/arrow.json');首先在第一种方法中，直接在connectionedge上设置流相关的属性（完成后别忘了调用API启动流），这里通过设置flow.element.image属性值来设置流图像'arrow':edge.setStyle({'edge.type':'line','edge.color':'#0A3791','edge.width':8,'edge.center':true,'flow':真，'flow.element.image'：'arrow'，'flow.element.count'：1，'flow.element.max'：30，'flow.element.autorotate'：true}）;raphView.enableFlow(40);//开始流程； 刷新页面，arrow在边缘流动！可能还有人会问“如果我的流组元素不是图片，而是图元呢？”是的，这是第二种方式！ 第二种方式针对流元素组为原语的情况：varflowNode=newht.Node();flowNode.setImage('箭头');因为流线其实就是图元的位置时间发生了变化，所以我们可以通过改变图元的位置来控制它的流线，通过调用流线插件现成的API来计算流线的长度——--calculateLength，然后改变当前步长百分比currentPercentage，具体实现如下：graphView.validate();//refresh;varlength=graphView.calculateLength(edge),//流线长度；step=4,//步长单位像素；stepPercentage=step/length*100,//步长百分比；当前百分比=0；//当前步进百分比；setInterval(function(){varpos=graphView.getPercentPosition(edge,currentPercentage);//第二个参数是百分比，取值范围0到100;flowNode.setPosition(pos.x,pos.y);//改变流节点的位置；currentPercentage+=stepPercentage；if(currentPercentage>100)currentPercentage=0;},400);做完之后刷新页面，为什么还是没有流量效果？ 其实这里有个坑，就是在计算长度之前，必须先调用graphView.validate()，为什么呢？为了提高效率，graphView不是实时刷新的，而是在多个图元素发生变化后统一刷新，所以这里的graphView.validate()的作用是刷新graphView。 最后是Demo的源码附件（http://www.hightopo.com/demo/...),希望大家多多指教
