這篇文章主要介紹了如何搭建基于HTML5的TP-LINK電信拓?fù)湓O(shè)備面板，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)長期為成百上千客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為臨河企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站制作，臨河網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

1、TP-LINK面板

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

顯而易見，設(shè)備面板基本上能由HT for Web（本圖形（rect、circle、oval等）構(gòu)成，而中間的接口需要用自定義圖形來解決，下面讓我們一步步實(shí)現(xiàn)它，準(zhǔn)備工作如下：

導(dǎo)入我們的HT

<script src="ht.js"></script>

    創(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()很疑惑？沒錯，這是HT新增的API！之前我們要創(chuàng)建一個圖形界面，不光需要在CSS樣式中定義mian的top、left，還需要對window對象的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)備工作完成后，就可以開始面板的繪制，對于基本圖形，只需設(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  
      ]  
}

對于自定義圖形，前面也有介紹過，詳見HT for Web形狀手冊。需要制定矢量類型為shape，其形狀主要由points和segments這兩個屬性描述：

    points為ht.List類型數(shù)組的頂點(diǎn)信息，頂點(diǎn)為{x: 100, y:200}格式的對象；

    segments為ht.List類型的線段數(shù)組信息，線段為1~5的整數(shù)，分別代表不同的頂點(diǎn)連接方式，segments主要用于繪制曲線，或者有跳躍斷點(diǎn)的情況，其1~5的取值含義如下：

    1：moveTo，占用一個點(diǎn)的信息，代表一個新路徑的起點(diǎn)；

    2：lineTo，占用一個點(diǎn)信息，代表從上次最后點(diǎn)連接到該點(diǎn)；

    3：quadraticCurveTo，占用三個點(diǎn)信息，第一個點(diǎn)作為曲線控制點(diǎn)，第二個點(diǎn)作為曲線結(jié)束點(diǎn)；

    4：bezierCurveTo，占用三個點(diǎn)信息，第一和第二個點(diǎn)作為曲線控制點(diǎn)，第三個點(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  
          ]},  
          //...  
          //...  
          //...  
          //多個圖形組件  
      ]  
    });

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

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

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

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

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

    node.setImage('symbols/TPLink.json');

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

最后，怎么讓我們的指示燈閃爍起來呢？用HT開發(fā)的產(chǎn)品，要實(shí)現(xiàn)閃爍效果很簡單，因?yàn)镠T預(yù)定于圖形組件默認(rèn)就已與DataModel中的Data數(shù)據(jù)綁定，綁定的格式也很簡單，只需將以前的參數(shù)值用一個帶func屬性的對象替換即可，詳見HT for Web數(shù)據(jù)綁定手冊。在這里指示燈的閃爍實(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)成功完成一個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連線類型手冊

　　

　　在我們的Demo中，兩條連接服務(wù)器和TP-LINK的曲線，均是使用自定義的新連線類型。

　　ht.Default.setEdgeType(type, func, mutual)函數(shù)可以用來自定義連線類型：

　　其中：

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

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

edge：當(dāng)前連線對象；

gap：多條連線成捆時(shí)，笨連線對象對應(yīng)中心連線的間距；

graphView：當(dāng)前對應(yīng)的拓?fù)浣M件對象；

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í)，我們需要再引入：

    <script src='ht-edgetype.js'></script>

　　然后調(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)，大家可能對setLayer()方法不是很熟悉，其實(shí)這個方法是用于設(shè)置連線和圖元的層級，因?yàn)槟J(rèn)的層級是edge在node之下，所以需要設(shè)置層級后，調(diào)用graphView的setLayers方法更改層級之間的關(guān)系：　

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

　　若對自定義連線類型仍舊有疑問，加深了解。

3、流動

　　先來看看HT產(chǎn)品中流動的炫酷效果情：

　　

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

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

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

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

　　4、flow.element.image，字符串類型，指定流動組元素的圖片，圖片須提前通過ht.Default.setImage()注冊；

　　....

　　等等，還有很多的樣式任你玩，

　　 這里必須要引入流動特效插件：

<script src="js/ht-flow.js"></script>

　　在這里，我們先將流動的圖片提前注冊：

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

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

    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');

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

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

　　做完這些之后，刷新頁面，怎么仍舊沒有流動效果？

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享如何搭建基于HTML5的TP-LINK電信拓?fù)湓O(shè)備面板內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，詳細(xì)的解決方法等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：如何搭建基于HTML5的TP-LINK電信拓?fù)湓O(shè)備面板-創(chuàng)新互聯(lián)
URL分享：http://www.chinadenli.net/article26/dccccg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、服務(wù)器托管、App設(shè)計(jì)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)