Realization Box -Effekt basierend auf HTML5 -Leinwand

Wenn die Benutzermaus bewegt wird, gibt es einen Pop -up -Rahmen. Dies ist einfach, wenn Sie mit HTML -Elementen umgehen, aber wenn sie durch die Grafiken aus HTML5 -Leinwand verarbeitet werden, ist diese Methode nicht mehr anwendbar, da Canvas einen anderen Satz von Mechanismen verwendet. Eines insgesamt. Die Grafik selbst ist tatsächlich Teil der Leinwand. In HT für Web ist diese Nachfrage jedoch leicht zu realisieren, und die Szene lautet wie folgt:

Diese Szene basiert auf der JSON-Datei von HT für Web Erweitert, und es ist einfach, den Topology Editor zu erfüllen, der meine Bedürfnisse entspricht. Nicht nur, dass in dieser Demo die Vektor -Tabelle der drei Arten von Bombenrahmen 'TIPS1.JSON', 'TIPS2.JSON', 'TIPS3.JSON' über diesen Vektor -Editor (http: //www.hightopo. Com. Com. Com. /Demo/Vector-editor/index.html) wird einfach gezeichnet und es ist ziemlich einfach zu bedienen. Wenn der Benutzer die Maus in das Gras und andere Objekte bewegt, finden Sie im obigen Szenario detaillierte Informationen zum Pop -UP -Feld, um sie anzuzeigen.

Die spezifische Implementierung ist wie folgt:

Stellen Sie unsere HT (http://www.hightopo.com/) vor :):

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

HT bietet ein maßgeschneidertes Format in JSON -Format. Registrieren Sie hier die drei -fischten JSON -Pop -UP -Box in Bilder für nachfolgende Anrufe:

 ht.Default.setImage ('TIPS1', 'Symbole /TIPS1.JSON');

Rufen Sie dann ein Objekt mit interaktiven Effekten ab. Die Attributnamen der Objekte sind der für jedes Bild festgelegte Beschriftungsname:

 // Baum var time = {'time1': true, 'tree2': true, 'tree3': true}; }; // Mountain var Mountain = {'Mountain': True};

Tatsächlich ist die Essenz der Pop -up -Box ein Knoten.

1. Steuern Sie das verborgene und die Anzeige des Knotens können die Wirkung des Bombenrahmens erreichen.

2. Die Änderung der Mausposition wird von der Änderung der Knotenposition begleitet;

3. Wenn die Maus in verschiedene Objekte verschoben wird, ändert sich auch die Textur auf dem Knoten.

4. Der Attributwert im Knoten ändert sich auch mit der Position der Maus.

Um den Bullet -Frame zu erreichen, erstellen Sie zuerst einen neuen Knoten und setzen Sie das Level auf "höher".

 ht.default.xhroad ('meadow.json', function (text) {const json = ht.default.parse (text); if (json.tital) document.title = json.title; Deserialize (json); // Setzen Sie die hierarchische DataModel.each (Funktion (Daten) {data.setLayer ('Lower');}); ;; 'höher');

Beurteilen Sie dann, ob sich die Position der Maus über den drei Objekten befindet, und rufen Sie die Funktion der Layout () zum Node Re -Layout gemäß dem Objekttyp:

 GraphView.getView (). (! Hoverdata) return; tips2 ');} else if (montage [holddata.gettg ()]) {layout (Knoten, pos,' tips3 ');}});});

Die Funktion von Layout () wird ausführlich ausführlich gemacht. Der Inhalt des Funcs hat verschiedene Arten:

1. Funktionstyp, rufen Sie direkt die Funktion auf und geben Sie die zugehörigen Daten an und finden Sie den Funktionsrückgabewert.

2. String -Typ:

Ab Sty@*** wird der Wert der Daten.

Zu Beginn von attr@*** wird der Wert der Daten.

Zu Beginn von Field@*** werden die Daten zurückgegeben, was *** den Attributnamen von Attr darstellt.

Wenn die oben genannten Situationen nicht übereinstimmen, wird der Zeichenfolgentyp direkt als Datenname des Datenobjekts als Datenname bezeichnet, und der Rückgabewert wird als Parameterwert verwendet.

Zusätzlich zum Func -Attribut können Sie das Wertschöpfungsattribut als Standardwert festlegen. Das HT für Webdatenbindungshandbuch (http://www.hightopo.pom/guide/core/datamodel/htamodel-guide.html). Beispielsweise sind die Ergebnisse der Datenbindung des Sonneneinstrahlungswerts in der Datei 'Tips1.json' wie folgt:

 Text: {func: attr@sunshine, Wert: Sonneneinstrahlung Wert},

Setzen Sie den Quellcode der Funktion layout () ein:

 Funktionslayout (Knoten, pos, Typ) {node.s ('2d.visible', true); Getwidth ()/2, pos.y -node.getheigh ()/2); : 'Rain Dew Value:'+ (pos.y/1000) .Tofixed (2), 'Liebe': ': Liebeswert: ***'});} else if (type == 'tips2') {Knoten .SetPosition (pos.x, pos.y -node.getheight ()/2); x // 100)+'%'});} else if (type == 'tips3') {node.setPosition (pos.x -node.getwidth ()/2, pos.y -node.gethogh ()//// 2);

Schließlich hat unsere Demo auch einen Cloud -mobilen Animationseffekt. .

Die frame-basierten Methodenbenutzer steuern den Animationseffekt, indem die Anzahl der Frames-Animationsrahmen und den Intervallintervallparameter des Intervallanimationsrahmens angegeben wird.

Zeitbasierte Methoden Benutzer müssen nur die Millisekunden des Animationszyklus der Dauer angeben.

Weitere Informationen finden Sie in HT für Web.

Hier verwenden wir die zeitbasierte Methode.

 Var Cloud = DataModel.getDatabytag ('Cloud'); .GetPosition (). Ende == Runde1)? * v, py);}};

Ziehen Sie schließlich unsere Demo erneut für Ihre Referenz an.