Diagramme de topologie de réseau télécom dessiné par HTML5 Canvas-tutoriel php-php.cn

Diagramme de topologie de réseau télécom dessiné par HTML5 Canvas

小云云

Libérer： 2023-03-20 06:08:02

original

2563 Les gens l'ont consulté

Cet article vous présente principalement le schéma de topologie du réseau de télécommunications dessiné à partir de HTML5 Canvas. J'espère qu'il pourra vous aider.

La structure du réseau de télécommunication fait référence à la logique de combinaison et à la forme de configuration de diverses unités de réseau du réseau de télécommunications qui sont combinées et configurées selon les exigences techniques et les principes économiques. La logique combinatoire décrit l'architecture des fonctions du réseau et le formulaire de configuration décrit la relation de contiguïté des unités du réseau, c'est-à-dire la topologie composée de centres de commutation (ou nœuds) et de liaisons de transmission. Les topologies de réseau courantes incluent la structure en étoile, la structure de bus, la structure en anneau, la structure arborescente, la structure maillée, la topologie hybride, la topologie cellulaire, etc. Les exemples de cet article décrivent principalement la topologie de bus, dont l'affichage est relativement différent des autres topologies de réseau. les types sont plus clairs et plus faciles à dessiner.

Bien que le titre soit Diagramme de topologie de réseau télécom, presque tous les diagrammes de topologie peuvent être couverts, tels que les diagrammes de réseau de base, les diagrammes de topologie de réseau, les diagrammes de rack, les diagrammes de communication réseau, les diagrammes de réseau 3D, etc.

Le rendu est le suivant :

Diagramme de topologie de réseau télécom dessiné par HTML5 Canvas

Cette image a l'air assez simple, avec moins de code, mais beaucoup de contenu.

Tout d'abord, l'armoire 01, l'armoire 02 et l'armoire 03 sont tous des types de "groupe" ht.Group. Le type ht.Group est utilisé comme conteneur parent pour contenir les primitives enfants dans la carte topologique GraphView. (http://www.hightopo.com) peut être développé et fusionné en double-cliquant. Les nœuds primitifs descendants seront masqués lors de la fusion. S'il existe des nœuds enfants avec des connexions vers l'extérieur, le Le groupe fusionné fera office de proxy pour la connexion. Le mouvement du groupe incitera les nœuds enfants à suivre, et les changements dans la position et la taille de l'enfant affecteront également la forme et la position élargies du groupe.

Nous mentionnons ici la question de la connexion d'agent. Le mot « agent » peut bien indiquer la signification de la connexion d'agent. En fait, s'il existe une connexion entre le nœud à l'intérieur du groupe et le nœud à l'extérieur du groupe, alors lorsque le groupe est fusionné, la connexion entre le groupe et le nœud externe sera « proxy ». Prenons l'exemple du coffret 02. Il y a un "ordinateur" à l'intérieur du coffret 02 et il y a deux connexions entre le "commutateur réseau interne". Ainsi, lorsque l'on double-clique sur le coffret 02 pour fusionner, c'est en fait équivalent au coffret 02 et au coffret 02. "commutateur réseau interne". Il existe deux connexions entre les commutateurs.

Voyons donc comment dessiner ce groupe et les nœuds à l'intérieur du groupe. Créez d'abord le nœud Groupe de « Cabinet 02 », car j'ai créé trois nœuds Groupe dans tout l'exemple, et la création. les méthodes sont similaires, donc le code de création du groupe est encapsulé et réutilisé :

function createGroup(name, x, y) {
    var group = new ht.Group();//组类型 实际上也是一个节点    group.setExpanded(true);//设置展开组    group.setName(name);//设置组的名字    group.s({//设置组的样式style        &#39;group.title.background&#39;: &#39;rgba(14,36,117,0.80)&#39;,//组展开后的title背景颜色，仅对group.type为空的类型起作用        &#39;group.background&#39;: &#39;rgba(14,36,117,0.40)&#39;,//组展开后的背景颜色        &#39;group.title.align&#39;: &#39;center&#39;//组展开后的title文字水平对齐方式，默认值为&#39;left&#39;，可设置为center和right
    });    group.setPosition(x, y);//设置组的位置    group.setImage(&#39;images/服务器.json&#39;);//设置拓扑上展现的图片信息，在GraphView拓扑图中图片一般以position为中心绘制
    dataModel.add(group);//将创建的组节点添加进数据容器中

    return group;
}

Copier après la connexion

Les groupes peuvent être développés et fusionnés. en double-cliquant, lors de la fusion, une boîte avec une barre de titre s'affiche (bien sûr, celles-ci peuvent être personnalisées). Lors de la fusion, l'image dans group.setImage définie dans le code ci-dessus est affichée.

Tous les nœuds à l'intérieur de l'armoire sont des nœuds de type ht.Node, je les ai donc également encapsulés :

function createNode(image, parent, x, y) {
    var node = new ht.Node();//创建一个 Node 节点
    if (image) node.setImage(image);//设置节点的显示图片
    if (parent) node.setParent(parent);//设置节点的父亲
    if (x && y) node.setPosition(x, y);//设置节点的位置
    dataModel.add(node);//将节点添加进数据容器中

    return node;
}

Copier après la connexion

Générer l'armoire 02 :

Diagramme de topologie de réseau télécom dessiné par HTML5 Canvas

Parce que la connexion nécessite un "nœud source" et un "nœud final", le nœud source ici est le "switch réseau interne" au milieu, on crée à nouveau ce nœud :

cabinet = createGroup(&#39;机柜02&#39;, 146, 445);//创建机柜02createNode(&#39;images/正常.json&#39;, cabinet, 78, 440).s(&#39;label&#39;, &#39;数据监控分析系统&#39;);//创建带有“正常”图片的节点，并设置这个节点的文字为“数据监控分析系统”

Copier après la connexion

Je ne sais pas si tu as J'ai remarqué qu'il existe un attribut de style de label2. Il s'agit d'une fonction ajoutée par HT pour ajouter deux textes d'étiquette à un nœud. Les attributs label et label2 sont exactement les mêmes, à condition qu'ils soient distingués par label et label2 lors de la définition. les attributs. Le nœud source et le nœud final sont tous deux disponibles, et vous pouvez créer des connexions :

var line = createNode();//创建一个节点line.setSize(725, 20);//设置节点大小line.setPosition(310, 325);//设置节点位置line.s({//设置节点的style属性    &#39;shape&#39;: &#39;roundRect&#39;,//决定shape的形状，默认值为空，代表用image绘制。roundRect四周圆角矩形    &#39;shape.background&#39;: &#39;rgba(14,36,117,0.80)&#39;,//背景填充颜色，为null代表不填充背景    &#39;shape.border.color&#39;: &#39;#979797&#39;,//边框颜色    &#39;shape.corner.radius&#39;: 10,//该参数指定roundRect类型的圆角半径，默认为空系统自动调节，可设置正数值    &#39;label&#39;: &#39;内部网络交换机&#39;, //文字内容，默认为空    &#39;label.position&#39;: 45,//文字内容，默认为空    &#39;label.offset.x&#39;: 50,//文字水平偏移，对于Edge意味着沿着连线方向水平偏移    &#39;label2&#39;: &#39;内部网络交换机&#39;,//HT默认除了label.*的属性外，还提供了label2.*的属性，用于满足一个图元需要显示双文字的情况    &#39;label2.position&#39;: 48,    &#39;label2.offset.x&#39;: 50,    &#39;label2.offset.y&#39;: 2,
});

Copier après la connexion

Quelque chose d'intéressant est que dans la partie "switch", le nœud carré bleu au loin gauche et le long nœud du milieu ne sont pas intégrés, mais séparés. Cependant, j'utilise setHost pour adsorber entre les nœuds, puis inverser l'adsorption, cette opération équivaut à ce que les deux nœuds ne fassent qu'un :

var exchange = createNode(&#39;images/交换机.json&#39;, null, -53, 313);
exchange.setHost(line);//设置吸附line.setHost(exchange);//反吸附 又设置line的吸附为exchange

Copier après la connexion

因为 HT 会按照节点添加进数据容器中的顺序来进行层次的排列，我的交换机是在 line 的添加之后的，所以默认交换机的节点会显示在 line 之下，我们将默认的层级显示关闭，并设置交换机 exchange 显示在数据容器的顶部：

dataModel.setAutoAdjustIndex(false);//将自动调整data在容器中索引顺序的开关关闭dataModel.sendToTop(exchange);//将data在拓扑上置顶

Copier après la connexion