Komponente für "Brainstorm"-Diagramme gesucht

[Tyler]

Hallo,

folgendes Problem:

Ich will in einer Scrollbox zur Laufzeit erstellte Panels mit Linien (als Brücken) quasi verbinden. Die Linien müssten dazu immer exakt horizontal bzw vertikal sein.

Ausserdem sollten sie, wenn ich die Panels bewege, an den Panels kleben bleiben und entsprechend ihre Länge ändern.

Ich hatte erst vor das ganze selber zu coden, aber ich denke das übertrifft erstens absolut meine Kentnisse, und wird zweitens viel zu aufwendig. (hab das zwar im Kopf schonmal theoretisch durch-gecodet, finde aber nichtmal einen vernünftigen Ansatz zu Realisierung).

Also müsste ne Komponente her, nur wonach suchen? :)

Und vielleicht hat ja jemand sowas in der Richtung bereits benutzt, und kann mir wertvolle Tipp´s geben.

Danke euch

tyler

[Nikolas]

Muss es eine Scrollbox sein? Wenn du eine Komponente nehmen würdest, die über eine Canvas verfügt könntest du das recht schnell mit lineto regeln.

[Tyler]

Ich hatte schon mit dem Gedanken gespielt, eine PaintBox in der ScrollBox zu nutzen, so sieht im Moment auch noch meine Form aus, mit nem Rectangle darin und ein paar Panels.


Aber ich steh vor ner Wand, um komm quasi nicht weiter, und bevor ich jetzt das Forum mit zig Threads zuspamme, dacht ich mir, mach ich´s auf die leichte Art :D

Wie gesagt, zum selber coden, fehlt warscheinlich ne ganze Menge wissen ^^

[Nikolas]

Überhaupt nicht: Sobald du deine Kompnenten auf ner Komponente mit Canvas hast, kanns losgehen:
Definier die einen Punkt in der Mitte, von dem die Linien ausgehen sollen und für jedes Panel einen Punkt an dem die Linie enden soll. Per Moveto(punkt in der Mitte) und lineto(Punkt am Panel) hast du schon eine Linie. Jetzt musst du dir diese Linie irgendwie merken. Wenn du das Panel dann verschieben willst überzeichnest du immer die alte Linie und malst die neue hin.

[Rackergen2]

Zitat:

Zitat von Tyler

Die Linien müssten dazu immer exakt horizontal bzw vertikal sein.

Also ist Toxmans Tip für die Kaz'...

Ich nehme an, du meinst das so:

Code:

panel1 -----
           |
           ------- panel2

[Tyler]

jap, das wär die optimale Lösung, nach der ich gesucht hätte, aber rein aus kosmetischen Gründen.

Direkte Verbindungslinien, wie tox es vorschlug, wären dabei natürlich auch möglich, aber nur als sog. "Notlösung" :)

Ich könnt mir halt gut vorstellen, das es dafür ne Komponente gibt, die mir diese Arbeit abnimmt.

(btw, es soll später mal ein Netzwerk-Tool werden, da will ich mich natürlich mehr auf diese Programmierung konzentrieren, als mit Linien um mich zu schmeissen :D )

tyler

[Eisenherz]

Hi Tyler,

du hast es hier mit einem sehr komplexen Thema zu tun. Ich halte es eher für unwahrscheinlich, dass du eine Komponente finden wirst, die genau das macht, was du willst. Du wirst dich wohl intensiever mit dem Thema beschäftigen müssen. Falls du kein wirklich fortgeschrittener Programmierer sein solltest, dann solltest du dir überlegen, ob du dir das wirklich antun willst.

Falls du die Zeit investieren willst, dann hier ein möglicher Weg:

Hier findest du die Beispielanwendung PolyLineTestSource. Anhand des Screenshots kannst du sehen, dass es zwar keine waagerechten/senkrechten Linien sind, es wird aber bereits das Thema "Wie hänge ich Linien an Objekte" behandelt. Es gibt auch eine Variante mit waagerechten/senkrechten Linien, wie sie in dem UML-Tool verwendet wird. Ich habe aber kein Code-Beispiel für die Verwendung der Komponente TRakGoHorzVertPolyLine veröffentlicht.

Bevor du dich aber überhaupt damit beschäftigen kannst, musst du erst die Grundkonzepte von RakGraphicObject verstanden haben, wofür es das Tutorial gibt.

[Sharky]

Hai Tyler,

schaue Dir mal das Diagram Studio von TMS Software an. Eventuell ist es ja das was Du suchst?

[Tyler]

@Sharky

thx... die Software sieht zwar absolut passend aus... macht echt n schnieken Eindruck... aber leider, kost´ die was. Egal, eventuell komm ich zur Not auf diese Komponente zurück. Thx so long.

Der 1. Link von Eisenherz aber hat es mir angetan.

Ich glaub da kann ich meine Ansprüche auch etwas zurückstecken, denn wenn man das so live sieht, sehen auch die direkten Verbindungs-Linien garnicht mal so übel aus. Ich glaub ich werde das mal in Angriff nehmen :)

Selber programmieren ist ja vielleicht auch besser, dann lerne ich auch noch was in der Richtung Grafik etc. :D

danke euch soweit, hat mir schon viel weitergeholfen!

tyler

[Sharky]

Zitat:

Zitat von Tyler

... aber leider, kost´ die was....

Hai Tyler,
wenn ich das richtig lese kostet sie aber nur etwas wenn ich sie kommerziel einsetzen möchte.

[Tyler]

hehe, muss ich wohl noch mal genauer lesen ^^

Naja, aber ich sag mal so: Selber machen, macht ja auch mehr Spass. Mal sehen wie ich damit klar komme, ansonsten werd ich auf die fertige Komponente zurückgreifen. Aufjedenfalll gut zu wissen, das es sowas gibt :D

[Nikolas]

Was habt ihr denn gegen den Vorschlag: Mit etwas Denkarbeit hab ich ganz schnell so eine Linie gebaut: (Siehe Anhang)
Benutzte Procedure:

Delphi-Quellcode:

procedure TForm1.Paint(x,y: integer; col: TColor; img: TImage);
var
xm: integer;
begin
// 250 = img.Width div 2
// 150 = img.Heigth div 2

xm:=(250-x) div 2 ;
with img.Canvas do
begin
Pen.Color:=col;
moveto(250,150);     // Mitte des images
lineto(250-xm,150);  // Waagrecht
lineto(250-xm,y);    // Senkrecht
lineto(x,y);         // nochmal waagrecht
end;
end; // of paint

[Rackergen2]

Soweit schonmal geil... Jetzt müsste man nur noch einbauen, dass der auch mal vertikal anfängt...

Delphi-Quellcode:

procedure TForm1.Paint(x1, y1, x2, y2: integer; col: TColor; img: TImage);
var
  xm, ym: integer;
begin
  with img.Canvas do
  begin
    Pen.Color:=col;
    moveto(x1,y1);     // Mitte des images
    if abs(x1-x2)>abs(y1-y2) then
    begin
      xm:=(x1-x2) div 2 ;
      lineto(x1-xm,y1);  // Waagrecht
      lineto(x1-xm,y2);    // Senkrecht
      lineto(x2,y2);         // nochmal waagrecht
    end
    else
    begin
      ym:=(y1-y2) div 2 ;
      lineto(x1,y1-ym);  // Senkrecht
      lineto(x2,y1-ym);    // Waagerecht
      lineto(x2,y2);         // nochmal Senkrecht
    end;
  end;
end; // of paint

Kommt das hin? Ich konnte es leider nicht testen...
EDIT: getestet, verändert, läuft super

Nebenbei, wie hast du die Koordinaten beim Klick ausgelsen? (EDIT: hat sich erledigt)

[Nikolas]

Das sollte aber kein wirkliches Problem darstellen, oder? Skizze machen und dann kurz nachdenken.
Der Code ist fast exakt der gleiche wie der schon gepostete, also selbst ist der Programmierer :coder:

[Eisenherz]

Zitat:

Zitat von Toxman

Was habt ihr denn gegen den Vorschlag

Eigentlich nichts. Es dürfte nur am eigentlichen Problem vorbei gehen.

Zitat:

Zitat von Tyler

Ausserdem sollten sie, wenn ich die Panels bewege, an den Panels kleben bleiben und entsprechend ihre Länge ändern.

Daraus schließe ich, dass die "Panels" bewegt werden sollen und ich vermute, dass soll nicht durch das Programm, sondern durch den Anwender geschehen. Tyler will also einen Editor für Brainstorm-Diagramme erstellen.
Und wie das bei Editoren so üblich ist, werden die Wünsche nach der Bedienbarkeit explodieren. Wenn man ein "Panel" verschieben kann, dann dürfte schnell der Wunsch entstehen mehrere "Panels" auf einmal verschieben zu können. Dann will der Anwender bestimmt auch die Verbindungslinien manipulieren können. Da die Diagramme bestimmt größer werden sollen als der zur Verfügung stehende Bildschirmplatz muss man Scrollen können. Dann ist folglich der nächste Wunsch, dass man Zoomen kann. Bestimmt will man das Diagramm nicht nur auf dem Bildschirm bewundern, sondern auch drucken können. Und wem ist es noch nicht passiert, dass er aus Versehen etwas gelöscht hat. Dann flucht man über die Programme die kein Undo zur Verfügung stellen.

Es geht also um viel mehr als nur ein paar waagerechte und senkrechte Linien zu zeichnen.

[Nikolas]

Ja und? Diese ganzen Eigenschaften lassen sich ja auch realisieren. Bis jetzt war nur eine Möglichkeit gesucht, solche Linien zu zeichnen. Was jetzt damit gemacht wird, ist doch eigentlich wieder Tyler's Sache.

[Tyler]

@Eisenherz

hehe... stimmt natürlich, früher oder später steigen dann die Ansprüche. Aber mühsam ernährt sich das Eichhörnchen... ich fang erstmal klein an. Realisieren lässt sich das ja dann immer noch :)

Aber erstmal folgendes, achtung, viel Code ^^

Delphi-Quellcode:

procedure TForm1.Button1Click(Sender: TObject);
var
  x1, y1, x2, y2 : Integer;
  xdif1, ydif1 : Integer;
  xdif2, ydif2 : Integer;

begin

//  PaintBox1.Canvas.Brush.Color := Form1.Color;
//  PaintBox1.Canvas.Rectangle(-1,-1,Form1.Width,Form1.Height);
  PaintBox1.Canvas.Pen.Color := Form1.Color;
  PaintBox1.Canvas.MoveTo(x1_,y1_);
  PaintBox1.Canvas.LineTo(x1_,ydif1_);
  PaintBox1.Canvas.MoveTo(x2_,y2_);
  PaintBox1.Canvas.LineTo(x2_,ydif1_);
  PaintBox1.Canvas.MoveTo(x1_,ydif1_);
  PaintBox1.Canvas.LineTo(x2_,ydif1_);

  PaintBox1.Canvas.LineTo(xdif1,y1);
  PaintBox1.Canvas.LineTo(xdif1,y2);
  PaintBox1.Canvas.MoveTo(xdif1,y1);
  PaintBox1.Canvas.LineTo(xdif1,y2);

  if (Panel1.Top + Panel1.Height >= Panel2.Top) then
  begin
    x1 := Panel1.Left + Panel1.Width;
    y1 := Panel1.Top  + (Panel1.Height div 2);
    x2 := Panel2.Left;
    y2 := Panel2.Top + (Panel2.Height div 2);

    ydif1 := Panel2.Top - ((Panel2.Top  - (Panel1.Top +  Panel2.Height)) div 2);
    xdif1 := x1 + (Panel2.Left - ((Panel2.Left - Panel1.Left + Panel1.Width) div 2));

    PaintBox1.Canvas.Pen.Color := clRed;
    PaintBox1.Canvas.MoveTo(x1,y1);
    PaintBox1.Canvas.LineTo(xdif1,y1);
    PaintBox1.Canvas.MoveTo(x2,y2);
    PaintBox1.Canvas.LineTo(xdif1,y2);
    PaintBox1.Canvas.MoveTo(xdif1,y1);
    PaintBox1.Canvas.LineTo(xdif1,y2);
  end else
  begin
    x1 := Panel1.Left + (Panel1.Width div 2);
    y1 := Panel1.Top  + (Panel1.Height);
    x2 := Panel2.Left + (Panel2.Width div 2);
    y2 := Panel2.Top;
    ydif1 := Panel2.Top - ((Panel2.Top  - (Panel1.Top +  Panel2.Height)) div 2);
    xdif1 := (Panel2.Left - Panel1.Left + Panel1.Width) div 2;

    PaintBox1.Canvas.Pen.Color := clBlue;
    PaintBox1.Canvas.MoveTo(x1,y1);
    PaintBox1.Canvas.LineTo(x1,ydif1);
    PaintBox1.Canvas.MoveTo(x2,y2);
    PaintBox1.Canvas.LineTo(x2,ydif1);
    PaintBox1.Canvas.MoveTo(x1,ydif1);
    PaintBox1.Canvas.LineTo(x2,ydif1);
  end;

  x1_ := x1;
  y1_ := y1;
  x2_ := x2;
  y2_ := y2;
  ydif1_ := ydif1;
  xdif1_ := xdif1;
end;

Dem Form.Paint-Ereigniss hab ich nun den ButtonClick zugeordnet, bin mir aber nicht sicher ob das der beste Weg ist.

Was mich wundert, die rote Linie wird nicht ganz korrekt gelöscht, daher hab ich (hier jetzt auskommentiert) einfach jedesmal ein grosses Rectangle in FormFarbe gemalt. Das dürfte nichts ausmachen.

So schwer isses ja tatsächlich nicht :D

[Nikolas]

Das löschen per Rectangle kannst du später nicht mehr nutzen, ohne alle Verbindungen neu zu zeichnen. Benutz zum zeichnen lieber eine Procedure der du die (Anfangs- und) Endpunkte, sowie die zeichenfarbe und die Zeichenfläche übergibts. Das macht den Code übersichtlicher und du kannst einfacher an unterschiedlichen Stellen auf die procedure zugreifen. Tipp für Leserlichkeit:

Delphi-Quellcode:

PaintBox1.Canvas.Pen.Color := clRed;
PaintBox1.Canvas.MoveTo(x1,y1);
PaintBox1.Canvas.LineTo(xdif1,y1);

=

Delphi-Quellcode:

with paintbox1.canvas do 
pen.color:=clred;
moveto(x,y);
lineto(x,y);
end;

[Eisenherz]

Zitat:

Zitat von Toxman

Ja und? Diese ganzen Eigenschaften lassen sich ja auch realisieren. Bis jetzt war nur eine Möglichkeit gesucht, solche Linien zu zeichnen. Was jetzt damit gemacht wird, ist doch eigentlich wieder Tyler's Sache.

Wenn man sich nur auf ein Feature konzentriert, dann ist die Wahrscheinlichkeit hoch, dass das daraus resultierende Design zwar für dieses eine Feature aber nicht für einige der anderen Features geeignet ist. Wenn man dann das nächste Feature dazunehmen will, dann passiert es nicht selten, dass man feststellen muss, dass man den größten Teil seines Codes wegschmeißen und nochmal so gut wie von vorne anfangen darf. Deshalb wäre es gut, wenn man sich zuerst Gedanken macht, was das Programm so alles mit der Zeit wird können müssen und dementsprechend das Design danach ausrichtet.

Andererseits bedarf es dafür einer gewissen Erfahrung. Woher bekommt man die Erfahrung? Indem man selbst etliche male in solche Sackkgassen reingerannt ist. Also vergesst meinen Vorschlag und geht euren eigenen Weg. :)