Efecto de cuadro de realización basado en el lienzo HTML5

Cuando se mueve el mouse del usuario, hay un marco pop -up. Esto es simple cuando se trata de elementos HTML, pero si es procesado por los gráficos compuestos de lienzo HTML5, este método ya no es aplicable, porque el lienzo usa otro conjunto de mecanismos. uno en general. Los gráficos en sí son en realidad parte del lienzo. Sin embargo, en HT para la web, esta demanda es fácil de realizar, y la escena es la siguiente:

Esta escena se basa en el archivo JSON de HT para Web. expandido, y es fácil personalizar para satisfacer el editor de topología que satisfaga mis necesidades. No solo eso, en esta demostración, la tabla vectorial de los tres tipos de marcos de bombas 'Tips1.json', 'tips2.json', 'tips3.json' son a través de este editor vectorial (http: //www.hightopo. Com. Com. Com. Com. Com. /Demo/vector-editor/index.html) simplemente se dibuja, y es bastante fácil de usar. En el escenario anterior, cuando el usuario mueva el mouse al césped y otros objetos, habrá una información detallada del cuadro pop -up para mostrarlo.

La implementación específica es la siguiente:

Presente nuestro HT (http://www.hightopo.com/) :):

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

HT proporciona un formulario de descripción de vector personalizado en formato JSON. Aquí, registre el cuadro Pop -Up JSON de tres en forma en imágenes para llamadas posteriores:

 ht.default.setImage ('Tips1', 'Symbols /Tips1.json');

Luego obtenga un objeto con efectos interactivos, los nombres de atributos de los objetos son el nombre de etiqueta establecido para cada imagen:

 // Tree var Time = {'Time1': True, 'Tree2': True, 'Tree3': True}; } ;// Mountain Var Mountain = {'Mountain': True};

De hecho, la esencia del cuadro pop -up es un nodo.

1. Controle el oculto y la visualización del nodo pueden lograr el efecto del marco de la bomba;

2. El cambio de la posición del ratón se acompaña del cambio de la posición del nodo;

3. Cuando el mouse se mueve a diferentes objetos, la textura en el nodo también cambia;

4. El valor del atributo en el nodo también cambia con la posición del mouse.

Por lo tanto, para lograr el marco de la bala, primero cree un nuevo nodo y establezca el nivel en 'más alto'.

 ht.default.xhrload ('meadow.json', function (text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; deserialize (json); // Establezca el datamodel.each (function (data) {data.setLayer ('inferior');}); ;; 'Higher');

Luego, para escuchar el incidente del mouseMove en la capa inferior, juzga si la posición del mouse está por encima de los tres objetos y llame a la función de diseño () al nodo re -layout de acuerdo con el tipo de objeto:

 GraphView.getView (). (! HoverData) return; tips2 ');} else if (montaña [holdData.gettg ()]) {diseño (nodo, pos,' tips3 ');}});});

La función de diseño () se realiza en detalle. .

1. Tipo de función, llame directamente a la función y pase en los objetos de datos y vistas relacionados.

2. Tipo de cadena:

Comenzando en Sty@***, se devuelve el valor Data.getStyle (***), que es el nombre del estilo del atributo.

Al comienzo de attr@***, se devuelve el valor data.getattr (***), donde *** representa el nombre de atributo de ATTR.

Al comienzo del campo@***, se devuelve el valor de los datos.

Si las situaciones anteriores no coinciden, el tipo de cadena se llama directamente datos *** (Ver) como el nombre de la función del objeto de datos, y el valor de retorno se usa como el valor del parámetro.

Además del atributo FUNC, también puede establecer el atributo de valor como el valor predeterminado. El HT para el manual de enlace de datos web (http: /www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). Por ejemplo, aquí, los resultados del enlace de datos del valor de la luz solar en el archivo 'Tips1.json' son los siguientes:

 Texto: {func: attr@Sunshine, Valor: Sunlight Value},

Coloque el código fuente de la función Layout ():

 Diseño de funciones (nodo, pos, type) {node.s ('2d.visible', true); getWidth ()/2, pos.y -node.getheigh ()/2); : 'Valor de rocío de lluvia:'+ (pos.y/1000) .tofixed (2), 'amor': ': valor de amor: ***'});} else if (type == 'tips2') {nodo .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, nuestra demostración también tiene un efecto de animación móvil en la nube. .

Los usuarios de método basado en marco controlan el efecto de animación especificando el número de marcos de animación de cuadros y el parámetro de intervalo de intervalo del marco de animación de intervalo;

Los usuarios del método basado en el tiempo solo necesitan especificar los milisegundos del ciclo de animación de la duración.

Para más detalles, consulte HT para la web.

Aquí usamos el método basado en el tiempo.

 Var nube = datAmodel.getDatabytag ('Cloud'); .getPosition (). End == Round1)? * v, py);}};

Finalmente, ponga nuestra demostración nuevamente para su referencia.