Méthode de mise en œuvre pour créer rapidement un panneau d'équipement de topologie de télécommunications TP-LINK basé sur HTML5

Aujourd'hui, nous utilisons le véritable panneau de l'appareil TP-LINK comme modèle pour terminer la construction du panneau de l'appareil, le clignotement des voyants et le flux des éléments graphiques.

1. Panneau TP-LINK

Nous partons de l'appareil TP-LINK. panneau Au début, le schéma de principe du panneau de l'appareil est le suivant :

Évidemment, le panneau de l'appareil peut essentiellement être utilisé par HT pour Web ), et l'interface du milieu doit être résolue avec des graphiques personnalisés. Implémentons-le étape par étape. Le travail de préparation est le suivant :

Importez notre HT<.>

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

Créez un conteneur de modèle de données et ajoutez-le au DOM :

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

Quelqu'un peut être confus lorsqu'il voit addToDOM() ici Oui, c'est HT

new< 🎜 ? > de l'API Avant de devoir créer une interface graphique, nous devions non seulement définir le haut principal et la gauche dans le style CSS, mais aussi définir le objet fenêtre redimensionner événement à surveiller et ainsi de suite, nous avons donc ajouté addToDOM() pour vous aider à faire cette série de choses. Vous pouvez jeter un œil à l'implémentation dans le code source :

Préparer Une fois le travail terminé, vous pouvez commencer à dessiner le panneau. Pour les graphiques de base, il vous suffit de définir le style correspondant, comme la partie

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

bouton

avec effet tridimensionnel. :

Pour des graphiques personnalisés, la définition a déjà été introduite. Pour plus de détails, veuillez vous référer au manuel HT for Web Shape. Vous devez spécifier le type

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

vectoriel comme forme. , et sa forme est principalement décrite par les deux attributs , points et segments :

Points sont les informations de sommet du tableau

de type ht.List. , et les sommets sont des objets au format {x : 100, y : 200} ;

les segments sont des informations sur un tableau de segments de ligne de type ht.List. les segments de ligne sont des entiers de 1 à 5, représentant respectivement différentes méthodes de connexion de sommets. les segments sont principalement utilisés pour tracer une courbe, ou s'il y a un point d'arrêt de saut, la signification des valeurs. 1~5 est la suivante :

1 : moveTo, occupé Une information de point, représentant le point de départ d'un nouveau chemin <; 🎜> 2 : lineTo, occupant une information de point, représentant la connexion du dernier point à ce point

3 ; : quadraticCurveTo, occupe trois points d'information, le premier point est utilisé comme point de contrôle de la courbe et le deuxième point est utilisé comme point final de la courbe

4 : bezierCurveTo, occupe trois points ; informations, les premier et deuxième points sont utilisés comme points de contrôle de la courbe, et le troisième point est utilisé comme point final de la courbe

5 : closePath, les informations sur le point non occupé représentent la fin de ce chemin dessine et est fermé au point de départ du chemin.

                                                                                                                                                                                                         Les données qui composent notre panel TPLINK sont intégrées comme suit : 🎜>

Ce n'est qu'une des façons d'enregistrer des

images. Nous pouvons également nous inscrire directement via l'URL (détails Voir le manuel de démarrage HT pour le Web) :

Définir l'

image vectorielle enregistrée nom de la pièce sur le modèle :

    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.

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!