快速搭建TP-LINK電信拓樸設備面板基於HTML5的實作方法

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

 

 

1、TP-LINK面板

    我們從TP-LINK的裝置面板開始，裝置面板的示意圖如下：

               

    顯而易見，裝置面板基本上可由HT for Web（本圖形（rect、circle、oval等）構成，而中間的介面需要用自訂圖形來解決，下面讓我們一步一步實現它，準備工作如下：

    導入我們的HT

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

#     建立資料模型容器，並將其加入DOM：

#

dataModel = new ht.DataModel();//创建数据模型容器
graphView = new ht.graph.GraphView(dataModel);//创建拓扑图组件
graphView.addToDOM();

    可能有人看到這裡的addToDOM()很懷疑？ ##API！事件進行監聽等等，所以我們新增addToDOM()幫您做好這一系列的事情，可以看看原始碼中的實作方式：

<a href="https://www.php.cn/js/js-weixinapp-api.html" target="_blank">    p.addToDOM = function(){
        var self = this,
            view = self.getView(),
            style = view.style;
        document.body.appendChild(view);
        style.left = &#39;0&#39;;
        style.right = &#39;0&#39;;
        style.top = &#39;0&#39;;
        style.bottom = &#39;0&#39;;
        window.addEventListener(&#39;resize&#39;, function () { self.iv(); }, false);
        self.iv();
    },</a>

     準備工作完成後，就可以開始面板的繪製，對於基本圖形，只需設定其對應地樣式即可，例如有立體效果的按鈕部分：

{
      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形狀手冊。 ##     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数据绑定手册。在这里指示灯的闪烁实际上是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连线类型手册

　　

　　在我们的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=&#39;ht-edgetype.js&#39;></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']);

　　若对自定义连线类型仍旧有疑问，加深了解。

3、流动

　　先来看看HT产品中流动的炫酷效果情：

　　

　　在我的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()注册；

　　....

　　等等，还有很多的样式任你玩，

　　 这里必须要引入流动特效插件：

<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.

 

以上是快速搭建TP-LINK電信拓樸設備面板基於HTML5的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！