À partir d'aujourd'hui, nous analyserons comment créer une application de graphique de topologie HTML5 Canvas à partir du niveau le plus basique. HT encapsule en interne un composant de graphique de topologie ht.graph.GraphView (ci-après dénommé GraphView), qui est le composant doté des fonctions 2D les plus riches. dans le framework HT et ses bibliothèques de classes associées se trouvent toutes sous le package ht.graph. GraphView possède des fonctions de présentation et d'édition graphiques de base, des fonctions de connexion de nœuds topologiques et de mise en page automatique, des objets prédéfinis dans des secteurs tels que l'énergie et les télécommunications, et des effets spéciaux tels que le rendu d'animation. Par conséquent, il a un large éventail d'applications et peut être utilisé comme un. Outil de dessin et ressources humaines dans le domaine de la surveillance. Il dispose d'une interface machine et peut être utilisé comme outil d'édition graphique général et peut être étendu à des applications d'entreprise telles que des flux de travail et des organigrammes. Pour le dire simplement : le diagramme de topologie est un terme généralisé. Diagramme de topologie de réseau de gestion de réseau de télécommunications, diagramme de topologie de réseau électrique, diagramme de surveillance de contrôle industriel, diagramme de flux de travail, carte cérébrale de réflexion, etc. En termes simples, il est composé de connexions de nœuds. Ce sont les diagrammes topologiques mentionnés ici.
Il est très simple de développer un diagramme de topologie de réseau avec HT. Il suffit de quelques lignes de code pour compléter un diagramme de topologie de serveur et de client simple :
Cet exemple est très basique et complète presque toutes les fonctions topologiques du serveur et du client. Sans plus tarder, devinez combien de lignes de code il a fallu au total pour cet exemple, y compris toutes les parties des balises HTML ? Sans les lignes vierges, il n'y a que 50 lignes. J'ai aussi fait beaucoup de design de style. Après tout, l'exemple que je veux vous montrer ne peut pas être trop moche~.
Vous pouvez télécharger le code vous-même sur tuputu_jb51.rar. Veuillez noter qu'en raison de la présence de fichiers json, il y aura des problèmes inter-domaines avec les images. Vous devez utiliser Firefox ou un serveur local pour l'exécuter.
Expliquons d'abord que HT est une solution unique pour les interfaces graphiques d'applications d'entreprise basées sur la norme HTML5. Elle contient de riches bibliothèques de développement d'interfaces graphiques telles que des composants généraux, des composants de topologie et des moteurs de rendu 3D. . js, et cela n'entre en conflit avec rien d'autre, car HT déclare uniquement une variable globale ht, rien de plus.
Ensuite, analysez la partie code. Commencez par créer la scène de carte topologique :
dm = new ht.DataModel();//Conteneur de données gv = new ht.graph.GraphView(dm);//Le paramètre du composant topologique est le modèle de données lié par dm gv.addToDOM();//Ajouter le graphique de topologie dans le corps
La racine de tous les composants de HT est un div, obtenu via la méthode getView(). Nous utilisons cette méthode dans la méthode addToDOM :
addToDOM = function(){ var self = this, view = self.getView(), //Obtenir le div sous-jacent du composant style = view.style; document.body.appendChild(view); le corps style.left = '0'; //HT définit généralement les composants sur un positionnement absolu style.right = '0'; style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //La taille de la fenêtre d'écoute des événements change, iv est un composant d'actualisation retardé}Ajoutez ensuite des nœuds serveur et client à la scène topologique :
var server = new ht.Node();server.setName('server');//Définir le nom du nœud et l'afficher sous le nœud server.setImage('serverImage');//Définir l'image du nœud server.setSize( 20, 60 );//Définir la taille du nœud dm.add(server);//Ajouter le nœud dans le conteneur de données dm server.setPosition(100, 100);//Définir les coordonnées du nœud (x, y) var group = new ht.Group();//Groupe, il peut y avoir plusieurs nœuds dans le groupe group.setImage('groupImage');//Définir l'image dm .add (groupe);var client = nouveau ht.Node();//Ce nœud est ajouté au groupe client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Ajouter enfants au groupe group.setExpanded(true);//Définir le groupe en mode étendu client.setPosition(200, 100);//Définir la position du nœud S'il n'y a qu'un seul nœud dans le groupe, alors la position de ce nœud peut être la position du groupe.Connexion entre serveur et client ? 2 lignes de code terminées ! En fait, la méthode d'ajout de nœuds dans HT est très simple. Elle ne prend généralement que 2 lignes de code : déclarez d'abord la variable d'instance, puis ajoutez la variable d'instance au conteneur de données.
var edge = new ht.Edge(serveur, client);dm.add(edge);
Nous sommes curieux de savoir comment est faite la ligne pointillée ? La formation de la ligne pointillée se construit sur la ligne de connexion et se déroule en trois étapes :
N'est-ce pas très simple ! Voyons ensuite comment le configurer :
edge.s({//Attribut de style de paramètre de nœud'edge.dash' : true,//Afficher la ligne pointillée'edge.dash.flow' : true,//Activer le flux de ligne pointillée'edge.dash.color' : 'jaune ', //Couleur de la ligne de tiret'edge.dash.pattern' : [8, 8],//Style de ligne de tiret 'label' : 'flow',//Annotation de nœud 'label.background' : 'rose',// Couleur d'arrière-plan de l'annotation du nœud });De cette façon, toutes les pièces d'affichage ont été introduites~Attendez, il semble qu'il manque quelque chose ? Au fait, j'ai oublié d'introduire la classe ht.Group dans HT. Comme son nom l'indique, cela signifie qu'un groupe peut contenir plusieurs nœuds. Double-cliquez pour afficher ou masquer tous les nœuds du groupe. , mais j'ai quand même fait un petit mouvement, c'est-à-dire que la partie d'affichage dans le coin supérieur droit du groupe est en fait une marque, utilisée pour demander des instructions :
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Définir la couleur de fond du groupe'note' : Double-cliquez sur moi !,//Annoter le contenu affiché'note .position ': 13,//Position de l'annotation 'note.offset.y': 10,//Décalage de l'axe Y de la position de l'annotation});Nous pouvons modifier la position de l'annotation via note.position (pour des informations de position spécifiques, veuillez vous référer au manuel de position HT pour Web), ou nous pouvons utiliser note.offset.x et note.offset.y pour modifier la position de l'annotation. annotation.
Toute l'analyse du code est terminée ! Je mettrai à jour dès que possible. Si vous sentez que les progrès sont lents, vous pouvez accéder à notre site officiel (HT pour le Web) pour apprendre par vous-même. J'espère que vous pourrez en apprendre davantage et pratiquer rapidement. transformez le contenu de cet article en Faites-en votre propre connaissance !
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.