前言
今天我们以真实的 TP-LINK 设备面板为模型，完成设备面板的搭建，和指示灯的闪烁和图元流动。
先来目睹下最终的实现效果：http://www.hightopo.com/demo/...
代码实现
TP-LINK面板
我们从 TP-LINK 的设备面板开始，设备面板的示意图如下：
显而易见，设备面板基本上能由 HT for Web 的基本图形（rect、circle、oval 等）构成，而中间的接口需要用自定义图形来解决，下面让我们一步步实现它，准备工作如下：
导入我们的 HT（http://www.hightopo.com/ ）：
创建数据模型容器，并将其加入 DOM：
dataModel = new ht.DataModel(); // 创建数据模型容器
graphView = new ht.graph.GraphView(dataModel); // 创建拓扑图组件
graphView.addToDOM(); 可能有人看到这里的 addToDOM() 很疑惑？没错，这是 HT 新增的 API！之前我们要创建一个图形界面，不光需要在 CSS 样式中定义 main 的 top、left，还需要对 window 对象的 resize 事件进行监听等等，所以我们新增 addToDOM() 帮您做好这一系列的事情，可以看看源代码中的实现方式：
p.addToDOM = function(){
var self = this,
view = self.getView(),
style = view.style;
document.body.appendChild(view);
style.left = '0';
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);
self.iv();
}, 准备工作完成后，就可以开始面板的绘制，对于基本图形，只需设置其相应地样式即可，例如有立体效果的按钮部分：
{
type: "circle",
shadow: true,
background: "rgb(0,0,0)",
borderWidth: 1,
borderColor: "rgb(0,0,0)",
border3d: true,
gradient: "spread.horizontal",
gradientColor: "rgb(79,77,77)",
dashColor: "rgb(0,0,0)",
rotation: 3.141592653589793,
rect: [
677, 157,
43, 34
]
} 对于自定义图形，前面也有介绍过，详见HT for Web形状手册（http://www.hightopo.com/guide... ）。需要制定矢量类型为 shape，其形状主要由 points 和 segments 这两个属性描述：
points 为 ht.List 类型数组的顶点信息，顶点为 {x: 100, y:200} 格式的对象；
segments 为 ht.List 类型的线段数组信息，线段为1-5分别代表不同的顶点连接方式，segments 主要用于绘制曲线，或者有跳跃断点的情况，其1~5的取值含义如下：
- moveTo，占用一个点的信息，代表一个新路径的起点；
- lineTo，占用一个点信息，代表从上次最后点连接到该点；
- quadraticCurveTo，占用三个点信息，第一个点作为曲线控制点，第二个点作为曲线结束点；
- bezierCurveTo，占用三个点信息，第一和第二个点作为曲线控制点，第三个点作为曲线结束点；
- closePath，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点。
示例如下：
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
]}
]
}); 将所有的图形数据整合后，就形成我们的 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
]},
{
type: "circle",
shadow: true,
background: "rgb(0,0,0)",
borderWidth: 1,
borderColor: "rgb(0,0,0)",
border3d: true,
gradient: "spread.horizontal",
gradientColor: "rgb(79,77,77)",
dashColor: "rgb(0,0,0)",
rotation: 3,
rect: [
677, 157,
43, 34
]},
//...
//...
//...
// 多个图形组件
]
}); 这只是注册图片的其中一种方法，我们也可以直接通过 url 的方式进行注册（详情见 http://www.hightopo.com/guide... ）：
ht.Default.setImage('tplink', 'symbols/TPLink.json');将注册的矢量图片名称设置到模型上：
var node = new ht.Node(),
node.setImage('tplink');
dataModel.add(node); 甚至在最新版的 HT 中，已经支持无需注册，直接调用 setImage()，传入 URL 参数的方式。这种方法更加简洁，但是如果许多场景都应用到同一图片时，还是建议用户通过注册的图片的，避免多次修改 URL：
node.setImage('symbols/TPLink.json'); 好了，现在在浏览器中预览你的 HTML 文档，是不是有个 TPLINK 面板？
最后，怎么让我们的指示灯闪烁起来呢？用 HT 开发的产品，要实现闪烁效果很简单，因为 HT 预定于图形组件默认就已与 DataModel 中的 Data 数据绑定，绑定的格式也很简单，只需将以前的参数值用一个带 func 属性的对象替换即可，详见 HT for Web 数据绑定手册（http://www.hightopo.com/guide... ）。在这里指示灯的闪烁实际上是 visible 属性值变化产生的结果，所以我们只需要给 visible 属性数据绑定，如下所示：
{
"type": "oval",
"visible": {
"func": "attr@visibility1"
},
"shadow": true,
"shadowColor": "rgba(208,240,2,0.35)",
"background": "rgb(178,184,141)",
"gradient": "radial.center",
"gradientColor": "rgb(247,255,0)",
"rect": [
79, 53,
31, 32
]
},
setInterval(function(){
node.a('visibility1', !t_node.a('visibility1'));
}, 400); 到这里，你已经成功完成一个 TPLINK 面板的制作 (~ . ~)，当然还剩服务器的制作，这里就不再赘述，复杂 TPLINK 面板都完成了，服务器还远吗？
连线
大家也有注意到，我们的 Demo 中有两条连线，那连线应该怎么做呢？
HT 默认提供的是直线和多点连线，但是在绘制流程图、组织结构图和思维导图等应用还需要更多的连线类型， 详情戳 HT for Web 连线类型手册（http://www.hightopo.com/guide... ）。
在我们的 Demo 中，两条连接服务器和 TP-LINK 的曲线，均是使用自定义的新连线类型。
ht.Default.setEdgeType(type, func, mutual) 函数可以用来自定义连线类型：
其中：
- type：字符串类型的连线类型，对应 style 的 edge.type 属性；
- func：函数类型，根据传入参数 (edge, gap, graphView, sameSourceWithFirstEdge) 返回走线的走向信息；
1). edge：当前连线对象；
2). gap：多条连线成捆时，笨连线对象对应中心连线的间距；
3). graphView：当前对应的拓扑组件对象；
4). sameSourceWithFirstEdge：boolean 类型，该连线是否与同组的同一条连线同源；
返回值为 {points：new ht.List(...)，segments：new ht.List(...)} 结构的连线走向信息，segments 的取值同上；
- mutual：该参数决定连线是否影响起始或者结束节点上的所有连线，默认为 false 代表只影响同 source 和 target 的 EdgeGroup 中的连线。
具体实现时，我们需要再引入：
然后调用 ht.Default.setEdgeType(type, func, mutual) 函数，代码如下：
ht.Default.setEdgeType('line', function(edge){
var sourcePoint = edge.getSourceAgent().getPosition(),
targetPoint = edge.getTargetAgent().getPosition(),
points = new ht.List();
points.add(sourcePoint);
points.add({
x: (sourcePoint.x + targetPoint.x)/2,
y: (sourcePoint.y + targetPoint.y)/2 + 300
});
points.add(targetPoint);
return {
points: points,
segments: new ht.List([1, 3])
};
}); 创建一条新的连线时，注意这时候连线类型 edge.type 为我们自定义的连线类型 ‘line’：
var edge = new ht.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(edge); 到这里连线已经基本完成，还有一点，大家可能对 setLayer() 方法不是很熟悉，其实这个方法是用于设置连线和图元的层级，因为默认的层级是 edge 在 node 之下，所以需要设置层级后，调用 graphView 的 setLayers 方法更改层级之间的关系：
graphView.setLayers(['nodeLayer', 'edgeLayer']); 若对自定义连线类型仍旧有疑问，可以戳例子（http://www.hightopo.com/guide... ）加深了解。
流动
先来看看 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', 'symbols/arrow.json'); 第一种方式中，直接在连线 edge 上设置流动相关的属性（做完后别忘了调用启动流动的 API），在这里通过设置 flow.element.image 属性值为 'arrow' 的方式设置流动的图片：
edge.setStyle({
'edge.type': 'line',
'edge.color': '#0A3791',
'edge.width': 8,
'edge.center': true,
'flow': true,
'flow.element.image': 'arrow',
'flow.element.count': 1,
'flow.element.max': 30,
'flow.element.autorotate': true
});
raphView.enableFlow(40); // 启动流动刷新页面，arrow 在 edge 上流动起来了！可能还有人会疑问“如果我的流动组元素不是图片，是图元呢？没错，这就是第二种方式！
第二种方式，针对的是流动元素组是图元的情况：
var flowNode = new ht.Node();
flowNode.setImage('arrow'); 因为流动实际上是图元的位置随着时间发生了变化，所以，我们可以更改图元的位置来控制它的流动，通过调用 flow 插件现成的 API - - - calculateLength 计算出流动线的长度 length，然后改变当前步进百分比 currentPercentage，具体实现如下：
graphView.validate(); // 刷新
var length = graphView.calculateLength(edge), // 流动线长度
step = 4, // 步进单位像素
stepPercentage = step / length * 100, // 步进百分比
currentPercentage = 0; // 当前步进百分比
setInterval(function(){
var pos = graphView.getPercentPosition(edge, currentPercentage); // 第二个参数为百分比，范围0到100
flowNode.setPosition(pos.x, pos.y); // 改变流动节点的位置
currentPercentage += stepPercentage;
if (currentPercentage > 100) currentPercentage = 0;
}, 400); 做完这些之后，刷新页面，怎么仍旧没有流动效果？
其实这里有一个坑，那就是在计算 length 之前，必须先调用 graphView.validate()，为什么呢？为了提高效率，graphView 并不是实时刷新，而是多个图元发生改变后统一刷新，所以这里的 graphView.validate() 的功能是进行刷新 graphView。
总结
最后，附上 Demo 的源码（http://www.hightopo.com/demo/... ），希望大家不吝赐教。