Implementierungsmethode zum schnellen Erstellen eines TP-LINK-Telekommunikations-Topologie-Gerätepanels basierend auf HTML5

Heute verwenden wir das echte TP-LINK-Gerätepanel als Modell, um den Aufbau des Gerätepanels, das Blinken der Anzeigelampen und den Fluss der Grafikelemente zu vervollständigen.

1. TP-LINK-Panel

Wir beginnen mit dem TP-LINK-Gerät Panel Zu Beginn sieht das schematische Diagramm des Gerätepanels wie folgt aus:

Offensichtlich kann das Gerätepanel grundsätzlich von HT sein für Web ) , und die mittlere Schnittstelle muss mit benutzerdefinierten Grafiken gelöst werden. Die Vorbereitungsarbeiten sind wie folgt:

Importieren Sie unser HT

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

Erstellen Sie einen Datenmodellcontainer und fügen Sie ihn dem DOM hinzu:

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

Jemand könnte verwirrt sein, wenn er addToDOM() hier sieht? Ja, das ist eine neue Ergänzung zu HT s API! Bevor wir eine grafische Oberfläche erstellen mussten, mussten wir nicht nur die Haupt- und Links im CSS-Stil definieren, sondern auch die Fensterobjekt Größe ändern Ereignis zum Überwachen usw. Deshalb haben wir addToDOM() hinzugefügt, um Ihnen bei dieser Reihe von Dingen zu helfen. Sie können einen Blick auf die Implementierung im Quellcode werfen:

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

Vorbereiten Nachdem die Arbeit abgeschlossen ist, können Sie mit dem Zeichnen des Panels beginnen. Für grundlegende Grafiken müssen Sie nur den entsprechenden Stil festlegen, z. B. den Teil mit drei-. Dimensionseffekt:

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

Für benutzerdefinierte Definitionen von Grafiken wurde bereits eingeführt. Weitere Informationen finden Sie im HT für Web Shape-Handbuch. Sie müssen den Typ Vektor angeben als Form, und seine Form wird hauptsächlich durch die beiden -Attribute , Punkte und Segmente, beschrieben:

Punkte sind die Scheitelpunktinformationen des ht.List-Typs Array , und die Scheitelpunkte sind Objekte im Format {x: 100, y:200};

Segmente sind Liniensegment-Array-Informationen vom Typ ht.List . Die Liniensegmente sind Ganzzahlen von 1 bis 5, die jeweils verschiedene Scheitelpunktverbindungsmethoden darstellen. Segmente werden hauptsächlich für die Bedeutung der Werte verwendet ​​1~5 lautet wie folgt:

1: moveTo, besetzt Eine Punktinformation, die den Startpunkt eines neuen Pfads darstellt ;

2: lineTo, Belegung einer Punktinformation, die die Verbindung vom letzten Punkt zu diesem Punkt darstellt; > 3: quadraticCurveTo, belegt drei Punktinformationen, der erste Punkt wird als Kurvenkontrollpunkt und der zweite Punkt als Kurvenendpunkt verwendet

4: bezierCurveTo, belegt Dreipunktinformationen, der erste und der zweite Punkt werden als Kurvenkontrollpunkte verwendet und der dritte Punkt wird als Kurvenendpunkt verwendet.

5: closePath, nicht belegte Punktinformationen stellen dar; Ende dieser Pfadzeichnung und ist bis zum Startpunkt des Pfades geschlossen.

Die Daten, die unser TPLink -Panel bilden, sind wie folgt integriert:

Dies ist nur eine der Möglichkeiten,

Bilder zu registrieren. Wir können uns auch direkt über die URL registrieren (Details siehe HT für das Web-Erste-Schritte-Handbuch):

Stellen Sie den registrierten

Vektorbild--Stücknamen auf das Modell ein:

    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.

 

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum schnellen Erstellen eines TP-LINK-Telekommunikations-Topologie-Gerätepanels basierend auf HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!