摘要：今天我們以真實(shí)的設(shè)備面板為模型，完成設(shè)備面板的搭建，和指示燈的閃爍和圖元流動(dòng)。在我們的中，兩條連接服務(wù)器和的曲線，均是使用自定義的新連線類型。

　　今天我們以真實(shí)的TP-LINK設(shè)備面板為模型，完成設(shè)備面板的搭建，和指示燈的閃爍和圖元流動(dòng)。

　　先來目睹下最終的實(shí)現(xiàn)效果：http://www.hightopo.com/demo/...

1、TP-LINK面板
我們從TP-LINK的設(shè)備面板開始，設(shè)備面板的示意圖如下：

面板基本上能由HT for Web（http://www.hightopo.com/guide...）的基本圖形（rect、circle、oval等）構(gòu)成，而中間的接口需要用自定義圖形來解決，下面讓我們一步步實(shí)現(xiàn)它，準(zhǔn)備工作如下：
導(dǎo)入我們的HT（http://www.hightopo.com/）：

創(chuàng)建數(shù)據(jù)模型容器，并將其加入DOM：

dataModel = new ht.DataModel();//創(chuàng)建數(shù)據(jù)模型容器 
graphView = new ht.graph.GraphView(dataModel);//創(chuàng)建拓?fù)鋱D組件 
graphView.addToDOM();  

可能有人看到這里的addToDOM()很疑惑？沒錯(cuò)，這是HT新增的API！之前我們要?jiǎng)?chuàng)建一個(gè)圖形界面，不光需要在CSS樣式中定義mian的top、left，還需要對(duì)window對(duì)象的resize事件進(jìn)行監(jiān)聽等等，所以我們新增addToDOM()幫您做好這一系列的事情，可以看看源代碼中的實(shí)現(xiàn)方式：

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();  
    }, 

準(zhǔn)備工作完成后，就可以開始面板的繪制，對(duì)于基本圖形，只需設(shè)置其相應(yīng)地樣式即可，例如有立體效果的按鈕部分：

{ 
      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 
      ] 
}

對(duì)于自定義圖形，前面也有介紹過，詳見HT for Web形狀手冊(cè)（http://www.hightopo.com/guide...）。需要制定矢量類型為shape，其形狀主要由points和segments這兩個(gè)屬性描述：
points為ht.List類型數(shù)組的頂點(diǎn)信息，頂點(diǎn)為{x: 100, y:200}格式的對(duì)象；
segments為ht.List類型的線段數(shù)組信息，線段為1~5的整數(shù)，分別代表不同的頂點(diǎn)連接方式，segments主要用于繪制曲線，或者有跳躍斷點(diǎn)的情況，其1~5的取值含義如下：
1：moveTo，占用一個(gè)點(diǎn)的信息，代表一個(gè)新路徑的起點(diǎn)；
2：lineTo，占用一個(gè)點(diǎn)信息，代表從上次最后點(diǎn)連接到該點(diǎn)；
3：quadraticCurveTo，占用三個(gè)點(diǎn)信息，第一個(gè)點(diǎn)作為曲線控制點(diǎn)，第二個(gè)點(diǎn)作為曲線結(jié)束點(diǎn)；
4：bezierCurveTo，占用三個(gè)點(diǎn)信息，第一和第二個(gè)點(diǎn)作為曲線控制點(diǎn)，第三個(gè)點(diǎn)作為曲線結(jié)束點(diǎn)；
5：closePath，不占用點(diǎn)信息，代表本次路徑繪制結(jié)束，并閉合到路徑的起始點(diǎn)。

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 
      ]} 
    ] 
}); 

將所有的圖形數(shù)據(jù)整合后，就形成我們的TPLINK面板的數(shù)據(jù)，整合方法如下：

    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 
      ]}, 
      //... 
      //... 
      //... 
      //多個(gè)圖形組件 
  ] 
}); 

這只是注冊(cè)圖片的其中一種方法，我們也可以直接通過url的方式進(jìn)行注冊(cè)（詳情見HT for Web入門手冊(cè)）：　

ht.Default.setImage("tplink", "symbols/TPLink.json");  

將注冊(cè)的矢量圖片名稱設(shè)置到模型上：

var node = new ht.Node(), 
node.setImage("tplink"); 
dataModel.add(node); 

甚至在最新版的HT中，已經(jīng)支持無需注冊(cè)，直接調(diào)用setImage()，傳入U(xiǎn)RL參數(shù)的方式（在我的Demo中就是使用的這種方法）。這種方法更加簡(jiǎn)潔，但是如果許多場(chǎng)景都應(yīng)用到同一圖片時(shí)，還是建議用戶通過注冊(cè)的圖片的，避免多次修改URL：
node.setImage("symbols/TPLink.json");

好了，現(xiàn)在在瀏覽器中預(yù)覽你的HTML文檔，是不是有個(gè)TPLINK面板？

最后，怎么讓我們的指示燈閃爍起來呢？用HT開發(fā)的產(chǎn)品，要實(shí)現(xiàn)閃爍效果很簡(jiǎn)單，因?yàn)镠T預(yù)定于圖形組件默認(rèn)就已與DataModel中的Data數(shù)據(jù)綁定，綁定的格式也很簡(jiǎn)單，只需將以前的參數(shù)值用一個(gè)帶func屬性的對(duì)象替換即可，詳見HT for Web數(shù)據(jù)綁定手冊(cè)（http://www.hightopo.com/guide...）。在這里指示燈的閃爍實(shí)際上是visible屬性值變化產(chǎn)生的結(jié)果，所以我們只需要給visible屬性數(shù)據(jù)綁定，如下所示：

{ 
      "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);

到這里，你已經(jīng)成功完成一個(gè)TPLINK面板的制作 (~ . ~)，當(dāng)然還剩服務(wù)器的制作，這里就不再贅述，復(fù)雜TPLINK面板都完成了，服務(wù)器還遠(yuǎn)嗎？
2、連線
大家也有注意到，我們的Demo中有兩條連線，那連線應(yīng)該怎么做呢？

HT默認(rèn)提供的是直線和多點(diǎn)連線，但是在繪制流程圖、組織結(jié)構(gòu)圖和思維導(dǎo)圖等應(yīng)用還需要更多的連線類型， 詳情戳HT for Web連線類型手冊(cè)（http://www.hightopo.com/guide...）。

在我們的Demo中，兩條連接服務(wù)器和TP-LINK的曲線，均是使用自定義的新連線類型。
ht.Default.setEdgeType(type, func, mutual)函數(shù)可以用來自定義連線類型：

其中：

type：字符串類型的連線類型，對(duì)應(yīng)style的edge.type屬性；

fuc：函數(shù)類型，根據(jù)傳入?yún)?shù)(edge, gap, graphView, sameSourceWithFirstEdge)返回走線的走向信息；

edge：當(dāng)前連線對(duì)象；
gap：多條連線成捆時(shí)，笨連線對(duì)象對(duì)應(yīng)中心連線的間距；
graphView：當(dāng)前對(duì)應(yīng)的拓?fù)浣M件對(duì)象；
sameSourceWithFirstEdge：boolean類型，該連線是否與同組的同一條連線同源；

返回值為{points：new ht.List(...)，segments：new ht.List(...)}結(jié)構(gòu)的連線走向信息，segments的取值同上；

mutual：該參數(shù)決定連線是否影響起始或者結(jié)束節(jié)點(diǎn)上的所有連線，默認(rèn)為false代表只影響同source和target的EdgeGroup中的連線。

具體實(shí)現(xiàn)時(shí)，我們需要再引入：

然后調(diào)用ht.Default.setEdgeType(type, func, mutual)函數(shù)，代碼如下：

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]) 
                    };                  
}); 

創(chuàng)建一條新的連線時(shí)，注意這時(shí)候連線類型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); 

到這里連線已經(jīng)基本完成，還有一點(diǎn)，大家可能對(duì)setLayer()方法不是很熟悉，其實(shí)這個(gè)方法是用于設(shè)置連線和圖元的層級(jí)，因?yàn)槟J(rèn)的層級(jí)是edge在node之下，所以需要設(shè)置層級(jí)后，調(diào)用graphView的setLayers方法更改層級(jí)之間的關(guān)系：　

graphView.setLayers(["nodeLayer", "edgeLayer"]); 

若對(duì)自定義連線類型仍舊有疑問，可以戳例子（http://www.hightopo.com/guide...）加深了解。

3、流動(dòng)
先來看看HT產(chǎn)品中流動(dòng)的炫酷效果（戳地址（http://www.hightopo.com/guide...）可看詳情）：

在我的Demo中兩條連線應(yīng)用了不同方式的流動(dòng)，但是兩種方式需要ht.flow插件。這個(gè)插件在ht.Shape和ht.Edge類型上擴(kuò)展了樣式控制流動(dòng)效果，用戶可以通過ht.Shape.setStyle()和ht.Edge.setStyle()來操作這些樣式，下面簡(jiǎn)單介紹幾種樣式：

1、flow值為true和false，控制此ht.Shape和ht.Edge是否可流動(dòng)，默認(rèn)為false；

　　2、flow.count，控制流動(dòng)組的個(gè)數(shù)，默認(rèn)為1；

　　3、flow.step，控制流動(dòng)的步進(jìn)，默認(rèn)為3；

　　4、flow.element.image，字符串類型，指定流動(dòng)組元素的圖片，圖片須提前通過ht.Default.setImage()注冊(cè)；
　　....
　　
等等，還有很多的樣式任你玩，詳情戳地址（http://www.hightopo.com/guide...）；
這里必須要引入流動(dòng)特效插件：

在這里，我們先將流動(dòng)的圖片提前注冊(cè)：

ht.Default.setImage("arrow", "symbols/arrow.json");

第一種方式中，直接在連線edge上設(shè)置流動(dòng)相關(guān)的屬性（做完后別忘了調(diào)用啟動(dòng)流動(dòng)的API），在這里通過設(shè)置flow.element.image屬性值為"arrow"的方式設(shè)置流動(dòng)的圖片：

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);//啟動(dòng)流動(dòng)； 

　刷新頁(yè)面，arrow在edge上流動(dòng)起來了！可能還有人會(huì)疑問“如果我的流動(dòng)組元素不是圖片，是圖元呢？”，沒錯(cuò)，這就是第二種方式！

　第二種方式，針對(duì)的是流動(dòng)元素組是圖元的情況：

var flowNode = new ht.Node();                  
flowNode.setImage("arrow"); 

因?yàn)榱鲃?dòng)實(shí)際上是圖元的位置隨著時(shí)間發(fā)生了變化，所以，我們可以更改圖元的位置來控制它的流動(dòng)，通過調(diào)用flow插件現(xiàn)成的API- - -calculateLength計(jì)算出流動(dòng)線的長(zhǎng)度length，然后改變當(dāng)前步進(jìn)百分比currentPercentage，具體實(shí)現(xiàn)如下：

graphView.validate();//刷新； 
var length = graphView.calculateLength(edge),//流動(dòng)線長(zhǎng)度； 
    step = 4, //步進(jìn)單位像素； 
    stepPercentage = step / length * 100, // 步進(jìn)百分比； 
    currentPercentage = 0; //當(dāng)前步進(jìn)百分比； 
   
setInterval(function(){ 
    var pos = graphView.getPercentPosition(edge, currentPercentage);//第二個(gè)參數(shù)為百分比，范圍0到100; 
    flowNode.setPosition(pos.x, pos.y);//改變流動(dòng)節(jié)點(diǎn)的位置； 
    currentPercentage += stepPercentage; 
    if (currentPercentage > 100) currentPercentage = 0; 
}, 400); 

做完這些之后，刷新頁(yè)面，怎么仍舊沒有流動(dòng)效果？

　　其實(shí)這里有一個(gè)坑，那就是在計(jì)算length之前，必須先調(diào)用graphView.validate()，為什么呢？為了提高效率，graphView并不是實(shí)時(shí)刷新，而是多個(gè)圖元發(fā)生改變后統(tǒng)一刷新，所以這里的graphView.validate()的功能是進(jìn)行刷新graphView.

　　最后，附上Demo的源碼（http://www.hightopo.com/demo/...），希望大家不吝賜教。