今天我们以真实的TP-LINK设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。
1、TP-LINK面板
我们从TP-LINK的设备面板开始，设备面板的示意图如下：
创建数据模型容器，并将其加入DOM：
准备工作完成后，就可以开始面板的绘制，对于基本图形，只需设置其相应地样式即可，例如有立体效果的按钮部分：
points为ht.List类型数组的顶点信息，顶点为{x: 100, y:200}格式的对象；
segments为ht.List类型的线段数组信息，线段为1~5的整数，分别代表不同的顶点连接方式，segments主要用于绘制曲线，或者有跳跃断点的情况，其1~5的取值含义如下：
1：moveTo，占用一个点的信息，代表一个新路径的起点；
2：lineTo，占用一个点信息，代表从上次最后点连接到该点；
3：quadraticCurveTo，占用三个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点；
4：bezierCurveTo，占用三个点信息，第一和第二个点作为曲线控制点，第三个点作为曲线结束点；
5：closePath，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点。
示例如下：
将所有的图形数据整合后，就形成我们的TPLINK面板的数据，整合方法如下：
将注册的矢量图片名称设置到模型上：
好了，现在在浏览器中预览你的HTML文档，是不是有个TPLINK面板？
到这里，你已经成功完成一个TPLINK面板的制作 (~ . ~)，当然还剩服务器的制作，这里就不再赘述，复杂TPLINK面板都完成了，服务器还远吗？
2、连线
大家也有注意到，我们的Demo中有两条连线，那连线应该怎么做呢？
在我们的Demo中，两条连接服务器和TP-LINK的曲线，均是使用自定义的新连线类型。
ht.Default.setEdgeType(type, func, mutual)函数可以用来自定义连线类型：
其中：
type：字符串类型的连线类型，对应style的edge.type属性；
fuc：函数类型，根据传入参数(edge, gap, graphView, sameSourceWithFirstEdge)返回走线的走向信息；
edge：当前连线对象；
gap：多条连线成捆时，笨连线对象对应中心连线的间距；
graphView：当前对应的拓扑组件对象；
sameSourceWithFirstEdge：boolean类型，该连线是否与同组的同一条连线同源；
返回值为{points：new ht.List(...)，segments：new ht.List(...)}结构的连线走向信息，segments的取值同上；
mutual：该参数决定连线是否影响起始或者结束节点上的所有连线，默认为false代表只影响同source和target的EdgeGroup中的连线。
具体实现时，我们需要再引入：
然后调用ht.Default.setEdgeType(type, func, mutual)函数，代码如下：
创建一条新的连线时，注意这时候连线类型edge.type为我们自定义的连线类型‘line’：
到这里连线已经基本完成，还有一点，大家可能对setLayer()方法不是很熟悉，其实这个方法是用于设置连线和图元的层级，因为默认的层级是edge在node之下，所以需要设置层级后，调用graphView的setLayers方法更改层级之间的关系：
3、流动
在我的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()注册；
....
这里必须要引入流动特效插件：
在这里，我们先将流动的图片提前注册：
第一种方式中，直接在连线edge上设置流动相关的属性（做完后别忘了调用启动流动的API），在这里通过设置flow.element.image属性值为'arrow'的方式设置流动的图片：
刷新页面，arrow在edge上流动起来了！可能还有人会疑问“如果我的流动组元素不是图片，是图元呢？”，没错，这就是第二种方式！
第二种方式，针对的是流动元素组是图元的情况：
因为流动实际上是图元的位置随着时间发生了变化，所以，我们可以更改图元的位置来控制它的流动，通过调用flow插件现成的API- - -calculateLength计算出流动线的长度length，然后改变当前步进百分比currentPercentage，具体实现如下：
做完这些之后，刷新页面，怎么仍旧没有流动效果？
其实这里有一个坑，那就是在计算length之前，必须先调用graphView.validate()，为什么呢？为了提高效率，graphView并不是实时刷新，而是多个图元发生改变后统一刷新，所以这里的graphView.validate()的功能是进行刷新graphView.