Mein Ziel
Mein Ziel ist es, ein System zu entwickeln, das jeden Prozess im Allgemeinen animiert, der als Flussdiagramm dargestellt wird, das auf dem Bildschirm gezeichnet werden kann.
Zum Beispiel eine Architektur-Pipeline. Es würde aus einer Reihe von Rechtecken bestehen, die verschiedene Komponenten wie Register, ALU-Komponente, Speicher usw. darstellen. Außerdem würden Pfeile aufeinander zeigen.
Ich möchte also die Möglichkeit haben, die Anzahl der Formen anzugeben, die ich zeichnen, umformen und Text hinzufügen und sie mit Pfeilen verbinden möchte. Schließlich möchte ich eine Art Animation zwischen ihnen zeigen.
Spezifisches Beispiel
Hier werde ich mein Bestes geben, um ausführlich zu beschreiben, was meine Anwendung tun wird. So kann ein Benutzer Module (z. B. Rechtecke) zeichnen und per Drag-and-Drop verschieben. Dann kann der Benutzer Pfeile verwenden, um Verbindungen zwischen ihnen anzuzeigen. Schließlich möchte ich eine Art Animation zeigen, die Schritt für Schritt von Pfeil zu Pfeil geht, um zu zeigen, welches Modul (Rechteck) zuerst ausgeführt wird. Die Animation könnte einfach die Farbe des Pfeils oder Rechtecks ändern, während sie ausgeführt wird.
Mein Problem
Ich weiß nicht, welche Werkzeuge ich verwenden soll, um dies zu erreichen. Ich bin ein Anfänger in der Entwicklungswelt und möchte sicherstellen, dass ich einfache Open-Source-Bibliotheken habe. Ich habe mich gefragt, ob in JS Open-Source-Bibliotheken verfügbar sind. Soweit mir HTML5-Canvas bekannt ist, möchte ich einfach zu erlernende Tools auswählen. Ich kenne mich mit HTML und JS aus. Daher wäre es mir lieber, wenn mir jemand vorschlagen könnte, welche Tools ich verwenden kann, um mein Ziel zu erreichen. Denken Sie auch daran, dass ich nicht gut darin wäre, einige erweiterte Diagrammzeichnungsbibliotheken zu verwenden, da ich sehr neu bin.
Ich möchte im Wesentlichen mit einem einfachen Tool beginnen, damit ich es leicht erlernen und sicherstellen kann, dass es bei der Community-Unterstützung ausreichend beliebt ist. Ich weiß, dass dies eine ziemlich offene Frage ist, daher sind alle Vorschläge willkommen.
Hinweis : Die Sache ist, dass ich keine Zeit damit verschwenden möchte, das Zeichnen von Rechtecken und Animationen herauszufinden. Ich denke, da Leinwand schnell und einfach zu verwenden ist, werde ich das verwenden, es sei denn, es gibt eine einfachere Option. So kann ich mich auf das Hauptkonzept meiner Bewerbung konzentrieren.
Ein großartiger Ort, um alle möglichen solcher JS-Bibliotheken zu entdecken, ist bei Graphing-Module ...
Obwohl es sich um Drupal handelt , enthält diese verlinkte Seite viele Links zu dem, was in Drupal "Module" (= Plugins) genannt wird.
Aber ziemlich oft gibt es Hinweise in dem vorgeschlagenen Link zu JS-Bibliotheken wie zum Beispiel:
Hinweis : Die Frage hier bezieht sich eindeutig auf Graphs , nicht zu verwechseln mit Charts , wie die Bibliotheken (Charting-Engines), die im Vergleich von Charting-Modulen erwähnt werden .
Probieren Sie jsplumb aus, jsPlumb bietet eine Möglichkeit, Elemente einer Benutzeroberfläche zusammenzufügen". Das Aussehen ist nett. Die Verwendung sieht recht einfach aus. http://www.jsplumb.org/demo/flowchart/dom.html
jsPlumb bietet Entwicklern die Möglichkeit, Elemente auf ihren Webseiten visuell zu verbinden. Es verwendet SVG in modernen Browsern und VML in IE 8 und darunter. Da es eine Möglichkeit bietet, alle Elemente einer Benutzeroberfläche zusammenzuführen. Die neuste Version ist 1.7.5. Ab 1.7.0 unterstützt jsPlumb YUI oder Mootools nicht mehr - wenn Sie eine externe Bibliothek verwenden möchten, um das Ziehen zu verwalten, dann ist jQuery Ihre einzige Option. Aber es wird empfohlen, wann immer möglich Vanilla jsPlumb zu verwenden: Es ist schneller als die jQuery-Version, es bietet mehr Funktionen (mehreres Ziehen von Elementen, mehrere Bereiche) und da die Ereignisbehandlung und der Drag/Drop-Code ebenfalls Projekte sind, die von jsPlumb verwaltet werden, müssen Sie Es ist wahrscheinlicher, dass wir eine Funktionsanfrage für Anforderungen erhalten, die sich auf solche Dinge beziehen. Plus, Es ist sehr wahrscheinlich, dass die Unterstützung für die jQuery-Variante irgendwann eingestellt wird. Es ist noch kein Datum dafür geplant, aber es scheint wahrscheinlich.
Essential Diagram for JS wird das tun, wonach Sie suchen.
Essential Diagram ist nicht Open Source, aber eine kostenlose Community-Lizenz ist verfügbar.
Grüße,
Davis
Hinweis: Ich arbeite für Syncfusion
Wenn es Ihnen nichts ausmacht, Javascript und HTML zu verwenden, können Sie THREE.js für diese Art von Projekt erkunden. Ziemlich niedrige Lernkurve und ein leistungsstarker Satz von Zeichenwerkzeugen, die Sie verwenden können, um mit einfachen Geometrien (Würfel, Kugeln usw.) zu beginnen und sie später in spezifischere Objekte umzuwandeln, sobald sie sich so verhalten, wie Sie es möchten.
Jörg Campos
Lerner
Jörg Campos
Lerner