Starting today, we will analyze how to build an HTML5 Canvas topology graph application from the most basic level. HT internally encapsulates a topology graph component ht.graph.GraphView (hereinafter referred to as GraphView), which is the component with the richest 2D functions in the HT framework, and its related class libraries are all Under the ht.graph package. GraphView has basic graphics presentation and editing functions, topological node connection and automatic layout functions, predefined objects in industries such as power and telecommunications, and special effects such as animation rendering. Therefore, it has a wide range of applications and can be used as a drawing tool and human resource in the monitoring field. It has a machine interface and can be used as a general graphical editing tool and can be expanded into enterprise applications such as workflow and organization charts. To put it simply: topology diagram is a generalized term. Network topology diagram of telecommunications network management, power grid topology diagram, industrial control monitoring diagram, work flow diagram, thinking brain map, etc. Simply put, it is composed of node connections. These are the topological diagrams referred to here.
It is very easy to develop a network topology diagram with HT. It only takes a few lines of code to complete a simple server and client topology diagram:
This example is very basic and completes almost all the topological functions of the server and client. Without further ado, guess how many lines of code it took in total for this example including all parts of the HTML tags? Minus the blank lines, there are only 50 lines. I also did a lot of style design. After all, the example I want to show you can’t be too ugly~
You can download the code yourself at tuputu_jb51.rar. Please note that because there are json files, there will be cross-domain problems with images. You need to use Firefox or a local server to run it.
Let us explain at the beginning that HT is a one-stop solution for enterprise application graphical interfaces based on the HTML5 standard. It contains rich graphical interface development libraries such as general components, topology components and 3D rendering engines. Users only need to introduce ht. js, and it does not conflict with anything else at all, because HT only declares a global variable ht, nothing more.
Next, analyze the code part. First, build the topology map scene:
dm = new ht.DataModel();//Data container gv = new ht.graph.GraphView(dm);//The topology component parameter is the data model bound by dm gv.addToDOM();//Add the topology graph into body
The root of all components of HT is a div, which is obtained through the getView() method. We use this method in the addToDOM method:
addToDOM = function(){ var self = this, view = self.getView(), //Get the underlying div of the component style = view.style; document.body.appendChild(view); //Add the underlying div into the body style.left = '0'; //HT generally sets components to absolute positioning style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //Event listening window size changes, iv is a delayed refresh component}
Then add server and client nodes to the topology scene:
var server = new ht.Node();server.setName('server');//Set the node name and display it below the node server.setImage('serverImage');//Set the node image server.setSize(20, 60 );//Set the node size dm.add(server);//Add the node into the data container dm server.setPosition(100, 100);//Set node coordinates (x, y) var group = new ht.Group();//Group, there can be multiple nodes in the group group.setImage('groupImage');//Set the image dm.add (group);var client = new ht.Node();//This node is added to the group client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Add children to the group group.setExpanded(true);//Set the group to expanded mode client.setPosition(200, 100);//Set the node position. If there is only one node in the group, then the position of this node can be the position of the group.
Connection between server and client? 2 lines of code done! In fact, the method of adding nodes in HT is very simple. It usually only takes 2 lines of code: declare the instance variable first, and then add the instance variable to the data container.
var edge = new ht.Edge(server, client);dm.add(edge);
We are curious how the dotted line is made? The formation of the dotted line is built on the connecting line, and there are three steps:
Isn't it very simple! Next let’s see how to set it up:
edge.s({//Node setting style attribute'edge.dash': true,//Display dotted line'edge.dash.flow': true,//Enable dotted line flow'edge.dash.color': 'yellow', //Dash line color'edge.dash.pattern': [8, 8],//Dash line style 'label': 'flow',//Node annotation 'label.background': 'pink',//Node annotation background color });
In this way, all the display parts have been introduced~Wait, it seems that there is something missing? By the way, I forgot to introduce the ht.Group class in HT. As the name suggests, it means group. A group can contain many nodes. Double-click to display or hide all nodes in the group. The above code is written, but I still I made a little move, that is, the display part in the upper right corner of the group is actually a mark, used to prompt instructions:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Set the background color of the group'note': Double click me!,//Annotate the displayed content'note.position ': 13,//Annotation position 'note.offset.y': 10,//Y-axis offset of annotation position});
We can change the position of the annotation through note.position (for specific position information, please refer to the HT for Web Position Manual), or we can use note.offset.x and note.offset.y to change the position of the annotation.
All code analysis completed! I will update as soon as possible. If you feel that the progress is slow, you can go to our official website (HT for Web) to learn by yourself. I hope you can gain more. Learning is your own business. Quickly practice and transform the content of this article into Make it your own knowledge!
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.