本日我们以实在的TP-LINK装备面板为模子，完成装备面板的搭建，和指示灯的闪灼和图元活动。
先来眼见下终究的完成效果：http://www.hightopo.com/demo/…
1、TP-LINK面板
我们从TP-LINK的装备面板最先，装备面板的示意图以下：
面板基础上能由HT for Web（http://www.hightopo.com/guide…）的基础图形（rect、circle、oval等）组成，而中间的接口需要用自定义图形来处理，下面让我们一步步完成它，准备工作以下：
导入我们的HT（http://www.hightopo.com/）：
<script src="ht.js"></script>
建立数据模子容器，并将其到场DOM：
dataModel = new ht.DataModel();//建立数据模子容器
graphView = new ht.graph.GraphView(dataModel);//建立拓扑图组件
graphView.addToDOM(); 能够有人看到这里的addToDOM()很迷惑？没错，这是HT新增的API！之前我们要建立一个图形界面，不光需要在CSS款式中定义mian的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的取值寄义以下：
1：moveTo，占用一个点的信息，代表一个新途径的出发点；
2：lineTo，占用一个点信息，代表从上次末了点衔接到该点；
3：quadraticCurveTo，占用三个点信息，第一个点作为曲线掌握点，第二个点作为曲线完毕点；
4：bezierCurveTo，占用三个点信息，第一和第二个点作为曲线掌握点，第三个点作为曲线完毕点；
5：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的体式格局举行注册（概况见HT for Web入门手册）：
ht.Default.setImage('tplink', 'symbols/TPLink.json'); 将注册的矢量图片称号设置到模子上：
var node = new ht.Node(),
node.setImage('tplink');
dataModel.add(node); 甚至在最新版的HT中，已支撑无需注册，直接挪用setImage()，传入URL参数的体式格局（在我的Demo中就是运用的这类要领）。这类要领越发简约，然则假如许多场景都运用到一致图片时，照样发起用户经由过程注册的图片的，防止屡次修正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面板都完成了，服务器还远吗？
2、连线
人人也有注重到，我们的Demo中有两条连线，那连线应当怎样做呢？
HT默许供应的是直线和多点连线，然则在绘制流程图、构造构造图和头脑导图等运用还需要更多的连线范例， 概况戳HT for Web连线范例手册（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：当前对应的拓扑组件对象；
sameSourceWithFirstEdge：boolean范例，该连线是不是与同组的一致条连线同源；返回值为{points：new ht.List(…)，segments：new ht.List(…)}构造的连线走向信息，segments的取值同上；
mutual：该参数决议连线是不是影响肇端或许完毕节点上的一切连线，默许为false代表只影响同source和target的EdgeGroup中的连线。
详细完成时，我们需要再引入：
<script src='ht-edgetype.js'></script> 然后挪用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…）加深了解。
3、活动
先来看看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…）；
这里必需要引入活动殊效插件：
<script src="js/ht-flow.js"></script>
在这里，我们先将活动的图片提早注册：
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/…），愿望人人不吝赐教。
