Effet de la boîte de réalisation basée sur le toile HTML5

Lorsque la souris utilisateur est déplacée, il y a un cadre pop -up. Ceci est simple lors de la gestion des éléments HTML, mais s'il est traité par les graphiques composés de toile HTML5, cette méthode n'est plus applicable, car la toile utilise un autre ensemble de mécanismes. un dans l'ensemble. Les graphiques lui-même font en fait partie de la toile. Cependant, dans HT pour le Web, cette demande est facile à réaliser et la scène est la suivante:

Cette scène est basée sur le fichier JSON de HT pour le Web. élargi, et il est facile de personnaliser pour répondre à l'éditeur de topologie qui répond à mes besoins. Non seulement que, dans cette démo, le tableau vectoriel des trois types de cadres de bombes 'TIPS1.json', 'Tips2.json', 'Tips3.json' sont via cet éditeur de vecteur (http: //www.hightopo. Com. /Demo/vector-editor/index.html) est simplement dessiné, et il est assez facile à utiliser. Dans le scénario ci-dessus, lorsque l'utilisateur déplace la souris dans l'herbe et d'autres objets, il y aura des informations détaillées de la boîte pop -up pour l'afficher.

La mise en œuvre spécifique est la suivante:

Présentez notre HT (http://www.hightopo.com/) :):

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

HT fournit un format de description de vecteur personnalisé au format JSON. Ici, inscrivez la boîte à up-up JSON Pop en forme de trois en photos pour les appels suivants:

 Ht.Default.SetImage ('TIPS1', 'Symbols / Tips1.json');

Ensuite, obtenez un objet avec des effets interactifs, les noms d'attribut des objets sont le nom de nom d'étiquette pour chaque image:

 // arbre var time = {'time1': true, 'arbre2': true, 'arbre3': true}; };;

En fait, l'essence de la boîte pop -up est un nœud.

1. Contrôler le caché et l'affichage du nœud peut atteindre l'effet du cadre de la bombe;

2. Le changement de la position de la souris s'accompagne du changement de la position du nœud;

3. Lorsque la souris est déplacée dans différents objets, la texture sur le nœud change également;

4. La valeur d'attribut dans le nœud change également avec la position de la souris.

Par conséquent, pour atteindre le cadre de la puce, créez d'abord un nouveau nœud et définissez le niveau sur «plus haut».

 ht.default.xhrload ('meadow.json', fonction (text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; désérialiser (json); // Définir le hiérarchique DataModel.EACH (Fonction (Data) {Data.Setlayer ('Lower');}); ;; «plus haut»);

Ensuite, pour écouter l'incident de MouseMove à la couche inférieure, jugez si la position de la souris est au-dessus des trois objets et appelez la fonction Layout () à la re -yout de nœud selon le type d'objet:

 Graphview.getView (). (! HoverData) return; TIPS2 ');} else if (montagne [holddata.gettg ()]) {Layout (node, pos,' Tips3 ');}});});

Ce que la fonction de mise en page () est effectuée en détail en détail. .

1. Type de fonction, appelez directement la fonction et passez dans les objets de données et de vision connexes.

2. Type de chaîne:

À partir de Sty @ ***, la valeur data.getStyle (***) est renvoyée, qui est le nom d'attribut de style.

Au début de l'attr @ ***, la valeur data.getAtTr (***) est renvoyée, où *** représente le nom d'attribut d'attir.

Au début du champ @ ***, la valeur des données.

Si les situations ci-dessus ne sont pas adaptées, le type de chaîne est directement appelé Data *** (Affichage) comme nom de fonction de l'objet de données et la valeur de retour est utilisée comme valeur de paramètre.

En plus de l'attribut FUNC, vous pouvez également définir l'attribut de valeur en tant que valeur par défaut. Le HT pour le manuel de liaison des données Web (http: / /www.hightopo.pom/guide/guide/core/datamodel/htamodel-guide.html). Par exemple, ici, les résultats de la liaison des données de la valeur du soleil dans le fichier 'TIPS1.json' sont les suivants:

 Texte: {func: attr @ Sunshine, valeur: valeur du soleil},

Mettez le code source de la fonction Layout ():

 Function Layout (Node, pos, type) {node.s ('2d.visible', true); node.setImage (type); getWidth () / 2, pos.y -node.getheigh () / 2); : 'Rain Dew Value:' + (pos.y / 1000) .tofixed (2), 'Love': ': Valeur d'amour: ***'});} else if (type == 'Tips2') {node .SetPosition (pos.x, pos.y -node.getheight () / 2); node.a ({'temp': ': température: 30', 'humidité': ':' + math.round (pos. x // 100) + '%'});} else if (type == 'Tips3') {node.setPosition (pos.x -Node.getWidth () / 2, pos.y -node.getheigh () / 2)

Enfin, notre démo a également un effet d'animation mobile cloud. .

Les utilisateurs de méthode basés sur l'image contrôlent l'effet d'animation en spécifiant le nombre de trames d'animation de trames et le paramètre d'intervalle d'intervalle du cadre d'animation d'intervalle;

Les utilisateurs de méthode basés sur le temps doivent uniquement spécifier les millisecondes du cycle d'animation de la durée.

Pour plus de détails, voir HT pour le Web.

Ici, nous utilisons la méthode basée sur le temps.

 Var cloud = dataModel.getDatabyTag ('cloud'); .getPosition (). End == Round1)? * v, py);}};

Enfin, remettez à nouveau notre démo pour votre référence.