Ab heute analysieren wir, wie eine HTML5-Canvas-Topologiediagrammanwendung auf der grundlegendsten Ebene erstellt wird. HT kapselt intern eine Topologiediagrammkomponente ht.graph.GraphView (im Folgenden als GraphView bezeichnet), die Komponente mit den umfangreichsten 2D-Funktionen im HT-Framework und den zugehörigen Klassenbibliotheken befinden sich alle im Paket ht.graph. GraphView verfügt über grundlegende Grafikpräsentations- und Bearbeitungsfunktionen, topologische Knotenverbindungs- und automatische Layoutfunktionen, vordefinierte Objekte in Branchen wie Energie und Telekommunikation sowie Spezialeffekte wie Animationsrendering. Daher verfügt es über ein breites Anwendungsspektrum und kann als verwendet werden Es verfügt über eine Maschinenschnittstelle und kann als allgemeines grafisches Bearbeitungstool verwendet und in Unternehmensanwendungen wie Workflow- und Organigramme erweitert werden. Einfach ausgedrückt: Topologiediagramm ist ein verallgemeinerter Begriff für das Telekommunikationsnetzwerkmanagement, ein Stromnetztopologiediagramm, ein Diagramm zur Überwachung industrieller Steuerungen, ein Arbeitsablaufdiagramm, eine Denkkarte usw. Es besteht einfach aus Knotenverbindungen. Dies sind die topologischen Diagramme, auf die hier Bezug genommen wird.
Es ist sehr einfach, mit HT ein Netzwerktopologiediagramm zu entwickeln. Es sind nur wenige Codezeilen erforderlich, um ein einfaches Server- und Client-Topologiediagramm zu erstellen:
Dieses Beispiel ist sehr einfach und vervollständigt fast alle topologischen Funktionen des Servers und Clients. Raten Sie ohne weiteres, wie viele Codezeilen insgesamt für dieses Beispiel einschließlich aller Teile der HTML-Tags benötigt wurden? Abgesehen von den Leerzeilen gibt es nur 50 Zeilen. Schließlich kann das Beispiel, das ich Ihnen zeigen möchte, nicht zu hässlich sein
Sie können den Code selbst unter tuputu_jb51.rar herunterladen. Bitte beachten Sie, dass es aufgrund der JSON-Dateien zu domänenübergreifenden Problemen mit Bildern kommen kann. Sie müssen Firefox oder einen lokalen Server verwenden, um ihn auszuführen.
Lassen Sie uns zu Beginn erklären, dass HT eine Komplettlösung für grafische Schnittstellen für Unternehmensanwendungen ist, die auf dem HTML5-Standard basiert. Es enthält umfangreiche Entwicklungsbibliotheken für grafische Schnittstellen wie allgemeine Komponenten, Topologiekomponenten und 3D-Rendering-Engines .js, und es gibt überhaupt keinen Konflikt mit irgendetwas anderem, da HT nur eine globale Variable ht deklariert, mehr nicht.
Analysieren Sie als Nächstes den Codeteil. Erstellen Sie zunächst die Topologiekartenszene:
dm = new ht.DataModel();//Datencontainer gv = new ht.graph.GraphView(dm);//Der Topologiekomponentenparameter ist das von dm gebundene Datenmodell gv.addToDOM();//Füge das Topologiediagramm hinzu in den Körper
Die Wurzel aller Komponenten von HT ist ein Div, das über die Methode getView() abgerufen wird. Wir verwenden diese Methode in der Methode addToDOM:
addToDOM = function(){ var self = this, view = self.getView(), //Das zugrunde liegende Div der Komponente abrufen style = view.style document.body.appendChild(view); //Das zugrunde liegende Div hinzufügen the body style.left = '0'; //HT setzt Komponenten im Allgemeinen auf absolute Positionierung style.right = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //Größe des Ereignisüberwachungsfensters ändert sich, iv ist eine verzögerte Aktualisierungskomponente}Fügen Sie dann Server- und Clientknoten zur Topologieszene hinzu:
var server = new ht.Node();server.setName('server');//Legen Sie den Knotennamen fest und zeigen Sie ihn unter dem Knoten an server.setImage('serverImage');//Legen Sie das Knotenbild fest server.setSize( 20, 60 );//Legen Sie die Knotengröße fest dm.add(server);//Fügen Sie den Knoten zum Datencontainer hinzu dm server.setPosition(100, 100);//Knotenkoordinaten (x, y) festlegen var group = new ht.Group();//Gruppe, es können mehrere Knoten in der Gruppe vorhanden sein group.setImage('groupImage');//Stellen Sie das Bild dm ein .add (Gruppe);var client = new ht.Node();//Dieser Knoten wird der Gruppe hinzugefügt client.setName('client');client.setImage('clientImage');dm.add(client);group.addChild(client);// Hinzufügen Kinder zur Gruppe group.setExpanded(true);//Setzen Sie die Gruppe in den erweiterten Modus client.setPosition(200, 100);//Legen Sie die Knotenposition fest. Wenn es nur einen Knoten in der Gruppe gibt, kann die Position dieses Knotens die Position der Gruppe sein.Verbindung zwischen Server und Client? 2 Zeilen Code fertig! Tatsächlich ist die Methode zum Hinzufügen von Knoten in HT sehr einfach. Normalerweise sind nur zwei Codezeilen erforderlich: Deklarieren Sie zuerst die Instanzvariable und fügen Sie dann die Instanzvariable zum Datencontainer hinzu.
var edge = new ht.Edge(server, client);dm.add(edge);
Wir sind neugierig, wie die gepunktete Linie entsteht? Die Bildung der gestrichelten Linie basiert auf der Verbindungslinie und besteht aus drei Schritten:
Ist es nicht ganz einfach! Sehen wir uns als Nächstes an, wie man es einrichtet:
edge.s({//Knoteneinstellungsstilattribut'edge.dash': true,//Gepunktete Linie anzeigen'edge.dash.flow': true,//Punktlinienfluss aktivieren'edge.dash.color': 'gelb ', //Strichlinienfarbe'edge.dash.pattern': [8, 8],//Strichlinienstil 'label': 'flow',//Knotenanmerkung 'label.background': 'pink',// Hintergrundfarbe der Knotenanmerkung });Auf diese Weise wurden alle Anzeigeteile eingeführt. Warten Sie, es scheint, dass etwas fehlt? Übrigens habe ich vergessen, die Klasse ht.Group in HT einzuführen. Sie bedeutet, dass eine Gruppe viele Knoten enthalten kann. Der obige Code wird geschrieben , aber ich habe immer noch einen kleinen Schritt gemacht, das heißt, der Anzeigeteil in der oberen rechten Ecke der Gruppe ist eigentlich eine Markierung, die zur Aufforderung von Anweisungen verwendet wird:
group.s({ 'group.background': 'rgba(255, 255, 0, 0.1)',//Setzen Sie die Hintergrundfarbe der Gruppe'note': Doppelklicken Sie auf mich!,//Kommentieren Sie den angezeigten Inhalt'note .position ': 13,//Anmerkungsposition 'note.offset.y': 10,//Y-Achsen-Offset der Anmerkungsposition});Wir können die Position der Anmerkung über note.position ändern (spezifische Positionsinformationen finden Sie im HT for Web Position Manual), oder wir können note.offset.x und note.offset.y verwenden, um die Position der Anmerkung zu ändern Anmerkung.
Alle Codeanalysen abgeschlossen! Ich werde so schnell wie möglich aktualisieren. Wenn Sie das Gefühl haben, dass der Fortschritt langsam ist, können Sie auf unserer offiziellen Website (HT for Web) selbst lernen Wandeln Sie den Inhalt dieses Artikels in „Machen Sie es zu Ihrem eigenen Wissen“ um!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.