Plötzlich gibt es eine Idee, wenn Sie verschiedene Wissenspunkte auf die gleiche Schnittstelle setzen und sie in eine Box legen können. Wenn ich also etwas betrachten möchte, kann sie direkt angezeigt werden, und diese Box muss sie öffnen können. Wesen Ich habe meine Idee mit mehr als hundert Code -Zeilen verwirklicht, so dass nur wenige Code diesen Effekt erzielen können.
Schauen wir uns die Renderings an:
Das grundlegendste dieses Beispiels ist die äußerste Box. Schauen wir uns also an, wie Sie es erreichen können:
var box = new ht.csgbox ();
Die Verwendung von HT kann diese Box einfach implementieren.
Die in diesem Beispiel verwendete grundlegende Karte ist HT.CSGBOX, ein Kastenmodell, Sie können das HT -Modell für das Handbuch für Webmodellungen verweisen. Ht.Style (HT für Webstilhandbuch).
Wenn Sie einen Aufkleber auf einer Seite der Box hinzufügen möchten, kann nur ht.Default.setimage -Funktion eingekapselt werden.
Die Methode, die ich hier implementiert habe, soll auf den Editor von HT verweisen, um eine GraphView -Komponente und ein Datamodel -Datenmodell zu deklarieren und dann JSON über ht.default.xhroad -Methode aufzurufen. Inhalt in JSON als visuelle Schnittstelle setzt dann die Animation und aktualisiert dann sofort die Schnittstelle dieses JSON.
ht.default.xhroad ('Anzeigen/Demo/Pump.json', Funktion (Text) {const json = ht.default.parse (text); pumpdm.Deserialize (JSON); var curent rotation = 0; var last time = new Date () .getTime (); (CurrentRotation);Zu diesem Zeitpunkt kann ich dem unteren Div Pumpgv und G3D nicht hinzufügen, und meine Absicht ist es, PumpgV in die CSGBox in G3D hinzuzufügen. ist nicht vollständig. Wenn Sie die Auswirkungen dieser weiten Höhe auf das Display sehen möchten, können Sie sie selbst ändern.
pumpgv.getwidth = function () {return 600;} pumpgv.getheight = function () {return 600;} pumpgv.getCanvas ().Die Anzeige des Echarts -Diagramms ist ebenfalls sehr einfach.
Am Ende müssen Sie diese beiden zurückgegebenen Leinwand nur in ht.default.setImage :: übergeben ::
ht.Default.setImage ('echart', Diagramme (Option));Die Funktion ht.default.drawimage generiert ein neues Diagramm zeichnet tatsächlich Bilder auf Leinwand. Daher müssen wir nur die Leinwand übergeben, die wir für ht.default.setimage angezogen haben, um Bilder zu generieren.
Eine Sache muss verbessert werden. Wenn es Transparenz gibt, müssen wir alle auf wahr einstellen.
Wir können das transparente: wahr einstellen, das angezeigt werden muss. Schauen Sie sich die Renderings nach Fertigstellung an:
ZusammenfassenDas oben genannte HTML5 -basierte WebGL -Implementierung von JSON- und Echarts -Charts, die für alle vorgestellt werden. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!