Efeito da caixa de realização com base na tela HTML5

Quando o mouse do usuário é movido, há um quadro de pop -up. Isso é simples ao lidar com elementos HTML, mas se for processado pelos gráficos compostos por tela HTML5, esse método não é mais aplicável, porque a tela usa outro conjunto de mecanismos. um no geral. Na verdade, os gráficos fazem parte da tela. No entanto, na HT para a Web, essa demanda é fácil de realizar, e a cena é a seguinte:

Essa cena é baseada no arquivo JSON da HT para a Web Expandido e é fácil de personalizar atender ao editor de topologia que atende às minhas necessidades. Não apenas isso, nesta demonstração, o gráfico de vetores dos três tipos de quadros de bombas 'tips1.json', 'tips2.json', 'tips3.json' estão através deste editor de vetores (http: //www.hightopo. /Demo/vector-editor/index.html) é simplesmente desenhado e é muito fácil de usar. No cenário acima, quando o usuário move o mouse para a grama e outros objetos, haverá uma informação detalhada da caixa pop -up para exibi -la.

A implementação específica é a seguinte:

Apresente nosso HT (http://www.hightopo.com/) :):

 <script src = 'ht.js'> </script> datamodel = new ht.datamodel ();

HT fornece um formato de descrição do vetor personalizado no formato JSON. Aqui, registre a caixa Pop -up JSON de três emoldura em fotos para chamadas subsequentes:

 ht.default.setImage ('tips1', 'símbolos /tips1.json');

Em seguida, obtenha um objeto com efeitos interativos, os nomes dos atributos dos objetos são o nome do rótulo conjunto para cada imagem:

 // árvore var time = {'time1': true, 'árvore2': true, 'árvore3': true}; };

De fato, a essência da caixa pop -up é um nó.

1. Controle o oculto e a exibição do nó pode atingir o efeito da estrutura da bomba;

2. A mudança da posição do mouse é acompanhada pela mudança da posição do nó;

3. Quando o mouse é movido para objetos diferentes, a textura no nó também muda;

4. O valor do atributo no nó também muda com a posição do mouse.

Portanto, para alcançar o quadro da bala, primeiro crie um novo nó e defina o nível como 'superior'.

 ht.default.xhrload ('meadow.json', function (text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; Deserialize (json); ////// Defina o hierárquico datamodel.each (function (data) {data.setLayer ('inferior');}); ;; 'superior');

Então, para ouvir o incidente do mousemove na camada inferior, julgue se a posição do mouse está acima dos três objetos e chame a função layout () para o nó re -layout de acordo com o tipo de objeto:

 GraphView.getView (). (! Hoverdata) retornar; tips2 ');} else if (montanha [holdData.gettg ()]) {layout (nó, pos,' tips3 ');}});});

O que a função Layout () é feita em detalhes. .

1. Tipo de função chama diretamente a função e passa os dados relacionados e visualize objetos.

2. Tipo de string:

Começando em sty@***, o valor do data.getStyle (***) é retornado, que é o nome do atributo do estilo.

No início do Attr@***, o valor Data.getAtTtr (***) é retornado, onde *** representa o nome do atributo de Att.

No início do campo@***, os dados.

Se as situações acima não forem correspondentes, o tipo de string será chamado diretamente de dados *** (view) como o nome da função do objeto de dados e o valor de retorno será usado como o valor do parâmetro.

Além do atributo func, você também pode definir o atributo de valor como o valor padrão. O HT for Web Data Binding Manual (http://www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). Por exemplo, aqui, os resultados da ligação de dados do valor da luz solar no arquivo 'tips1.json' são os seguintes:

 Texto: {func: att@Sunshine, valor: Valor da luz solar},

Coloque o código -fonte da função layout ():

 Layout da função (nó, pos, tipo) {node.s ('2d.Visible', true); getwidth ()/2, pos.y -node.getheigh ()/2); : 'Valor de orvalho da chuva:'+ (pos.y/1000). .setPosition (pos.x, pos.y -node.getHeight ()/2); x // 100)+'%'});} else if (type == 'tips3') {node.setPosition (pos.x -node.getwidth ()/2, pos.y -node.getheigh ()/ 2);

Finalmente, nossa demonstração também tem um efeito de animação móvel em nuvem. HT fornecido por HT a função de animação de ht.default.startanim, ht.default.startanim suporta duas maneiras: baseado em quadros e baseado no tempo:

Os usuários do método baseado em quadros controlam o efeito de animação especificando o número de quadros de animação de quadros e o parâmetro de intervalo de intervalo do quadro de animação de intervalo;

Os usuários do método baseado no tempo precisam especificar apenas os milissegundos do ciclo de animação da duração.

Para detalhes, consulte HT para Web.

Aqui usamos o método baseado em tempo.

 Var Cloud = Datamodel.getDatabyTag ('Cloud'); .getPoition (). End == ROUND1)? * v, py);}};

Finalmente, coloque nossa demonstração novamente para sua referência.