A partir de hoje, analisaremos como construir um aplicativo gráfico de topologia HTML5 Canvas a partir do nível mais básico. O HT encapsula internamente um componente gráfico de topologia ht.graph.GraphView (doravante denominado GraphView), que é o componente com as funções 2D mais ricas. na estrutura HT e suas bibliotecas de classes relacionadas estão todas no pacote ht.graph. GraphView possui funções básicas de apresentação e edição de gráficos, conexão de nós topológicos e funções de layout automático, objetos predefinidos em setores como energia e telecomunicações e efeitos especiais como renderização de animação. ferramenta de desenho e recursos humanos na área de monitoramento Possui interface de máquina e pode ser usada como ferramenta geral de edição gráfica e pode ser expandida para aplicações corporativas, como fluxo de trabalho e organogramas. Simplificando: diagrama de topologia é um termo generalizado, diagrama de topologia de rede de gerenciamento de rede de telecomunicações, diagrama de topologia de rede elétrica, diagrama de monitoramento de controle industrial, diagrama de fluxo de trabalho, mapa cerebral de pensamento, etc. Estes são os diagramas topológicos mencionados aqui.
É muito fácil desenvolver um diagrama de topologia de rede com HT. São necessárias apenas algumas linhas de código para completar um diagrama simples de topologia de servidor e cliente:
Este exemplo é muito básico e completa quase todas as funções topológicas do servidor e do cliente. Sem mais delongas, adivinhe quantas linhas de código foram necessárias no total para este exemplo, incluindo todas as partes das tags HTML? Sem as linhas em branco, há apenas 50 linhas. Eu também fiz muito design de estilo. Afinal, o exemplo que quero mostrar não pode ser muito feio.
Você mesmo pode baixar o código em tuputu_jb51.rar. Observe que, como existem arquivos json, haverá problemas entre domínios com imagens. Você precisará usar o Firefox ou um servidor local para executá-lo.
Vamos explicar no início que HT é uma solução completa para interfaces gráficas de aplicativos corporativos baseada no padrão HTML5. Ele contém ricas bibliotecas de desenvolvimento de interface gráfica, como componentes gerais, componentes de topologia e mecanismos de renderização 3D. .js, e não entra em conflito com mais nada, porque o HT declara apenas uma variável global ht, nada mais.
A seguir, analise a parte do código. Primeiro, construa a cena do mapa de topologia:
dm = new ht.DataModel();//Contêiner de dados gv = new ht.graph.GraphView(dm);//O parâmetro do componente de topologia é o modelo de dados vinculado por dm gv.addToDOM();//Adiciona o gráfico de topologia no corpo
A raiz de todos os componentes do HT é uma div, que é obtida através do método getView(). Usamos este método no método addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), //Obter o div subjacente do componente style = view.style; document.body.appendChild(view); o corpo style.left = '0' //HT geralmente define os componentes para posicionamento absoluto style.right = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //O tamanho da janela de escuta do evento muda, iv é um componente de atualização atrasada}Em seguida, adicione nós de servidor e cliente à cena da topologia:
var server = new ht.Node();server.setName('server');//Defina o nome do nó e exiba-o abaixo do nó server.setImage('serverImage');//Defina a imagem do nó server.setSize( 20, 60 );//Defina o tamanho do nó dm.add(server);//Adicione o nó no contêiner de dados dm server.setPosition(100, 100);//Definir coordenadas do nó (x, y) var group = new ht.Group();//Grupo, pode haver vários nós no grupo group.setImage('groupImage');//Definir a imagem dm .add (grupo);var cliente = novo ht.Node();//Este nó é adicionado ao grupo client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Adicionar filhos para o grupo group.setExpanded(true);//Define o grupo para modo expandido client.setPosition(200, 100);//Defina a posição do nó Se houver apenas um nó no grupo, então a posição deste nó pode ser a posição do grupo.Conexão entre servidor e cliente? 2 linhas de código concluídas! Na verdade, o método de adição de nós em HT é muito simples. Geralmente, são necessárias apenas 2 linhas de código: primeiro declare a variável de instância e, em seguida, adicione a variável de instância ao contêiner de dados.
var edge = new ht.Edge(servidor, cliente);dm.add(edge);
Estamos curiosos para saber como é feita a linha pontilhada? A formação da linha pontilhada é construída na linha de ligação e consiste em três etapas:
Não é muito simples! A seguir, vamos ver como configurá-lo:
edge.s({//Atributo de estilo de configuração do nó'edge.dash': true,//Exibir linha pontilhada'edge.dash.flow': true,//Ativar linha pontilhada flow'edge.dash.color': 'yellow ', //Cor da linha tracejada'edge.dash.pattern': [8, 8],//Estilo da linha tracejada 'label': 'flow',//Anotação do nó 'label.background': 'pink',// Cor de fundo da anotação do nó });Desta forma, todas as partes do display foram introduzidas~Espere, parece que falta alguma coisa? A propósito, esqueci de apresentar a classe ht.Group no HT. Como o nome sugere, significa grupo. Um grupo pode conter muitos nós para exibir ou ocultar todos os nós do grupo. , mas ainda fiz um pequeno movimento, ou seja, a parte de exibição no canto superior direito do grupo é na verdade uma marca, usada para solicitar instruções:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Defina a cor de fundo do grupo'note': Double click me!,//Anote o conteúdo exibido'note .position ': 13,//Posição da anotação 'note.offset.y': 10,//Deslocamento do eixo Y da posição da anotação});Podemos alterar a posição da anotação através de note.position (para informações de posição específicas, consulte o Manual de Posição do HT para Web), ou podemos usar note.offset.x e note.offset.y para alterar a posição do anotação.
Toda análise de código concluída! Atualizarei o mais rápido possível. Se você achar que o progresso está lento, você pode acessar nosso site oficial (HT para Web) para aprender por conta própria. Espero que você possa ganhar mais. transforme o conteúdo deste artigo em Faça dele o seu próprio conhecimento!
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.