nicht angemeldet
Anleitung - wie MindMap zeichnen
Guten Abend,
wo lassen sich grundlegende Informationen/Tutorials dazu finden, wie man Elemente so "dynamisch" irgendwie auf eine Canvas bringen und miteinander verbinden kann durch Linien, die sich auch noch so harmonisch bewegen.
http://kenneth.kufluk.com/google/js-mindmap/
Im Prinzip brauche ich so etwas ähnliches, möchte das aber a) zu Lernzwecken selbst basteln und b) da meine Anforderungen doch etwas anders sind.
Im Prinzip ist das Resultat aber soetwas wie ein mehrfachverzweigtes riesieges MindMap, durch das man sich schön durchklicken können muss und das nie komplett angezeigt werden kann/soll.
Bin für Links zu einer grundlegenden Einführung zu solchen Canvas-Spielereien dankbar.
Das ganze möchte ich in dojoo oder jquery basteln - abhängig auch davon, was die Dokus hergeben.
Grüße
-
doojoo und jquery werden Dir wenig helfen (nur zum Selektieren des Canvas-Nodes), da Du hauptsächlich im Canvas, bzw. dessen 2d-Context arbeiten musst. Dazu gibt es ein schönes Cheat Sheet, auf dem die wichtigsten Befehle kurz aufgeführt sind.
An sich ist das mit der MindMap kein Hexenwerk. Du brauchst lediglich eine Funktion, die einzelne Knoten einer MindMap zeichnet (Boxen mit Text drin) und eine weitere, die sie miteinander verbindet sowie eine letzte, die beide Funktionen einigermaßen sinnvoll aufruft. Mache Dir also erst einmal Gedanken, wie diese Funktionen von außen aussehen sollen, also bspw:
drawMapNode({text: '...', x: 2424, y: 1134}); joinMapNode({x: 2544, y: 1145}, {x: 1044, y: 2948});Anhand einer solchen Schnittstelle kannst Du dann Funktionen entwickeln, die sich zweckmäßig verwenden lassen.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Danke für Deine Antwort.
Und wie kommt es zu dem schönen "Wabern" und dem Feeling, dem Design der Linien etc. in genanntem Beispiel?
Könnte in so einem Knotenpunkt, der Box mit Text, auch ein anklickbarer Link als Bild stehen?
Gruß
-
Hallo, doquery!
Danke für Deine Antwort.
Gern geschehen!
Und wie kommt es zu dem schönen "Wabern" und dem Feeling, dem Design der Linien etc. in genanntem Beispiel?
Das kommt dadurch, dass das Canvas mit leicht geänderten Positionen ständig neu gezeichnet wird. Die Linien zwischen den Knotenpunkten sind Splines (vereinfacht ausgedrückt Kurven). Ich würde Dir vorschlagen, erst mal mit einer einfachen Version anzufangen und dann die Komplexität nachträglich hinzuzufügen. Wenn Deine Schnittstellen und Datenformate vernünftig gewählt sind, sollte das kein Problem sein.
Könnte in so einem Knotenpunkt, der Box mit Text, auch ein anklickbarer Link als Bild stehen?
Nur, wenn Du den Link oberhalb des Canvas platzierst (was generell auch machbar ist, aber die Koordination zwischen Links und Canvas erschwert).
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hallo,
Könnte in so einem Knotenpunkt, der Box mit Text, auch ein anklickbarer Link als Bild stehen?
Nur, wenn Du den Link oberhalb des Canvas platzierst (was generell auch machbar ist, aber die Koordination zwischen Links und Canvas erschwert).
Sind Textlinks in dem genannten Beispiel dann vermutlich auch nur kompliziert genau über die Box positioniert?
Ich benötige nämlich vereinfach gesagt ein Klick-Event für jeden Knotenpunkt.Grüße
-
Nein, in diesem Fall muss aus dem Klick-Event die Position ausgelesen werden und daraus der geklickte Begriff errechnet werden.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
-
-
-
-