今天我們以真實的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.