A partir de hoy, analizaremos cómo construir una aplicación de gráfico de topología HTML5 Canvas desde el nivel más básico. HT encapsula internamente un componente de gráfico de topología ht.graph.GraphView (en adelante, GraphView), que es el componente con las funciones 2D más ricas. en el marco HT, y sus bibliotecas de clases relacionadas están todas bajo el paquete ht.graph. GraphView tiene funciones básicas de presentación y edición de gráficos, conexión de nodos topológicos y funciones de diseño automático, objetos predefinidos en industrias como la energía y las telecomunicaciones y efectos especiales como la representación de animaciones. Por lo tanto, tiene una amplia gama de aplicaciones y puede usarse como un. herramienta de dibujo y recursos humanos en el campo de monitoreo. Tiene una interfaz de máquina y puede usarse como una herramienta de edición gráfica general y puede ampliarse a aplicaciones empresariales como flujos de trabajo y organigramas. En pocas palabras: diagrama de topología es un término generalizado: diagrama de topología de red para gestión de redes de telecomunicaciones, diagrama de topología de red eléctrica, diagrama de monitoreo de control industrial, diagrama de flujo de trabajo, mapa cerebral pensante, etc. Estos son los diagramas topológicos a los que aquí se hace referencia.
Es muy fácil desarrollar un diagrama de topología de red con HT. Solo se necesitan unas pocas líneas de código para completar un diagrama de topología de servidor y cliente simple:
Este ejemplo es muy básico y completa casi todas las funciones topológicas del servidor y cliente. Sin más preámbulos, ¿adivina cuántas líneas de código se necesitaron en total para este ejemplo, incluidas todas las partes de las etiquetas HTML? Menos las líneas en blanco, solo hay 50 líneas. También hice mucho diseño de estilo. Después de todo, el ejemplo que quiero mostrarles no puede ser demasiado feo ~.
Puede descargar el código usted mismo en tuputu_jb51.rar. Tenga en cuenta que debido a que hay archivos json, habrá problemas entre dominios con las imágenes. Debe usar Firefox o un servidor local para ejecutarlo.
Expliquemos al principio que HT es una solución integral para interfaces gráficas de aplicaciones empresariales basada en el estándar HTML5. Contiene ricas bibliotecas de desarrollo de interfaces gráficas, como componentes generales, componentes de topología y motores de renderizado 3D. .js, y no entra en conflicto con nada más, porque HT sólo declara una variable global ht, nada más.
A continuación, analice la parte del código. Primero, cree la escena del mapa de topología:
dm = new ht.DataModel();//Contenedor de datos gv = new ht.graph.GraphView(dm);//El parámetro del componente de topología es el modelo de datos vinculado por dm gv.addToDOM();//Agregar el gráfico de topología en el cuerpo
La raíz de todos los componentes de HT es un div, que se obtiene mediante el método getView(). Usamos este método en el método addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), //Obtener el div subyacente del componente style = view.style; document.body.appendChild(view); el cuerpo style.left = '0'; //HT generalmente establece los componentes en posicionamiento absoluto style.right = '0' style.top = '0'; window.addEventListener('resize', function () { self.iv(); }, false); // Cambios en el tamaño de la ventana de escucha de eventos, iv es un componente de actualización retrasada}Luego agregue nodos de servidor y cliente a la escena de topología:
var server = new ht.Node();server.setName('server');//Establezca el nombre del nodo y muéstrelo debajo del nodo server.setImage('serverImage');//Establezca la imagen del nodo server.setSize( 20, 60 );//Establezca el tamaño del nodo dm.add(server);//Agregue el nodo al contenedor de datos dm server.setPosition(100, 100);//Establecer las coordenadas del nodo (x, y) var group = new ht.Group();//Grupo, puede haber varios nodos en el grupo group.setImage('groupImage');//Establecer la imagen dm .add (grupo);var cliente = nuevo ht.Node();//Este nodo se agrega al grupo client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Agregar hijos al grupo group.setExpanded(true);//Establece el grupo en modo expandido client.setPosition(200, 100);//Establezca la posición del nodo. Si solo hay un nodo en el grupo, entonces la posición de este nodo puede ser la posición del grupo.¿Conexión entre servidor y cliente? ¡2 líneas de código terminadas! De hecho, el método para agregar nodos en HT es muy simple. Por lo general, solo se necesitan 2 líneas de código: primero declare la variable de instancia y luego agregue la variable de instancia al contenedor de datos.
var borde = nuevo ht.Edge(servidor, cliente);dm.add(edge);
¿Tenemos curiosidad por saber cómo se hace la línea de puntos? La formación de la línea de puntos se construye sobre la línea de conexión y consta de tres pasos:
¿No es muy simple? A continuación veamos cómo configurarlo:
edge.s({//Atributo de estilo de configuración de nodo'edge.dash': true,//Mostrar línea de puntos'edge.dash.flow': true,//Habilitar flujo de línea de puntos'edge.dash.color': 'amarillo ', //Color de línea de guión'edge.dash.pattern': [8, 8],//Estilo de línea de guión 'etiqueta': 'flujo',// Anotación de nodo 'label.fondo': 'rosa',// Color de fondo de la anotación del nodo });De esta forma, se han introducido todas las partes de la pantalla ~ Espera, ¿parece que falta algo? Por cierto, olvidé introducir la clase ht.Group en HT. Como sugiere el nombre, significa grupo. Un grupo puede contener muchos nodos. Haga doble clic para mostrar u ocultar todos los nodos del grupo. , pero aún así hice un pequeño movimiento, es decir, la parte de visualización en la esquina superior derecha del grupo es en realidad una marca, que se usa para indicar instrucciones:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Establece el color de fondo de la 'nota' del grupo: ¡haz doble clic en mí!,//Anota la nota del contenido mostrado .position ': 13,//Posición de anotación 'note.offset.y': 10,//Desplazamiento del eje Y de la posición de anotación});Podemos cambiar la posición de la anotación a través de note.position (para obtener información de posición específica, consulte el Manual de posición de HT para Web), o podemos usar note.offset.x y note.offset.y para cambiar la posición de la anotación. anotación.
¡Todo el análisis del código completado! Lo actualizaré lo antes posible. Si cree que el progreso es lento, puede ir a nuestro sitio web oficial (HT para Web) para aprender por su cuenta. Espero que pueda aprender más y practicarlo rápidamente. transforma el contenido de este artículo en ¡Hazlo tu propio conocimiento!
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.