Suche Pfeile zur Visualisierung von Beziehungen

[torud]

Hallo Hawkeye,

vielen Dank für Dein Beispiel. Ich finde es so wie es ist schon ganz ok. Nun kommen die ABERS...für die ich sicher selbst versuchen muss eine Lösung zu finden.

Die Pfeile sind nicht verwaltbar.
Sie nicht verschiebbar oder sonstwie editierbar. Logisch, sie folgen ja automatisch ihrer Bindung. Das ist auch gut so!
Die Pfeile gehen nicht umme Ecke. => Das ist sicher auch einer der schwierigen Abschnitte. Auch wandert die Pfeilspitze und der Linienanfang nicht mit, wenn man die Seiten der Panels vertauscht.

Ich könnte mir zwar im Hintergrund eine Liste halten, wo ich mir nortiere, welche Controls miteinander verbunden sind und dann desweiteren noch notieren, was für ein Pfeil zwischen den Controls ist (Farbe,Style usw.) aber ich denke, dass das ziemlich aufwendig ist.

Ich denke insgesamt, ist das eigentlich schon ein Riesenprojekt für sich, an dem mich wundert, dass es sowas noch nicht gibt. Die Jungs von TMS haben zwar sowas schon, aber geht dies nur in deren DiagrammStudio. Ansonsten habe ich nicht wirklich viel zu diesem Thema finden können.

Zum einen wäre es das allereinfachste eine Komponente zu haben, die man einfach nur platziert und man hat einen fertigen Pfeil, den man in der Grösse, Drehrichtung, Farbe und sonstigem Styling anpassen kann. Wenn dieser noch an dere Control gedockt werden kann, wäre es perfekt.

Ich schwanke noch zwischen den beiden Lösungen, weiss aber auch, dass ich nicht in der Lage sein werde, sowas komplett allein zu erstellen...Was sind Eure Favoriten!?

[oki]

Hi torud,

Zitat von torud:

Ich könnte mir zwar im Hintergrund eine Liste halten, wo ich mir nortiere, welche Controls miteinander verbunden sind und dann desweiteren noch notieren, was für ein Pfeil zwischen den Controls ist (Farbe,Style usw.) aber ich denke, dass das ziemlich aufwendig ist.

und aus diesem Grund gibt es OOP.
In dem du es in einer Klassen kapselst programmierst du das Verhalten incl. der Eigenschaften einmal und erstellst zur Laufzeit mehrere Instanzen (bei dir also Pfeile). Wenn du in deiner Klasse eine Eigenschaft LineColor definierst, dann nimmst du beim zeichnen eben nicht eine feste Farbe, sonder FLineColor. Jedes Pfeilobjekt hat somit sein eigenes LineColor was es sich selber merkt.
Ich denke Hawkeye hat sein einfaches Beispiel ganz bewust so gewählt. Du hast zur Zeit zwei wesentliche Probleme:
1. dir ist das Prinzip von OOP noch nicht ganz klar,
2. du hast noch kein "Gefühl" dafür wie das Prinzip der VCL abläuft.

Mit Hawkeye's Beispiel kannst du eventuell den 2. Punkt etwas klarer sehen. Da siehst du gut, wie das mit dem Zeichnen und darstellen abläuft, ohne das dir gleich einer was von eigenen Controls erzählt.
An deiner Stelle würde ich Hawkeye's Beispiel nehmen und versuchen die fehlenden Sachen zu ergänzen. Dann schaun wir weiter. Der weg zur eigenen Klasse ist dann auch nicht weit.

Gruß oki

[torud]

Hello Again,

ich danke Euch beiden für Eure hilfreichen Tipps und den Hinweis darauf, dass ich meine Schwachstellen abdichten muss. Ich gelobe Besserung. => Binsoweit, dass der Pfeil fast richtig mitwandert...

Ich habe mich etwas mit dem Beispiel auseinandergesetzt, da ich finde, dass ich schon verstehen muss, was da passiert und sicher einiges davon gebrauchen kann, was drin geschrieben steht. Ich beziehe mich jetzt also auf das Beispiel mit den beiden Panels.

Dort gibt es die Routine FormPaint, wo bisher geschrieben stand, von wo nach wo der Pfeil gezeichnet werden soll. Ich habe versucht diese Routine zu verfeinern, bin aber nicht wirklich glücklich mit der Lösung, da ich, wie ich finde eigentlich einen Winkel um jeden Pin legen müsste. Wenn sich das andere Panel in einem der Winkel befindet, oder es tangiert, wäre klar, dass von wo nach wo der Pfeil gezeichnet werden muss.

Da mir dazu die Routine fehlt, habe ich es erstmal provisorisch so gelöst:

Delphi-Quellcode:

procedure TForm1.FormPaint (Sender: TObject);
var 
  P1, P2 : TPoint;
begin
  inherited
  if Panel1.Top > Panel2.Top + Panel2.Height then P1 := PinPosition(Panel1,pinTop);
  if Panel1.Top < Panel2.Top + Panel2.Height then P1 := PinPosition(Panel1,pinBottom);
  if Panel1.Top = Panel2.Top then P1 := PinPosition(Panel1,pinRight);

  if Panel1.Left < Panel2.Left then P2 := PinPosition(Panel2,pinLeft);
  if Panel1.Left > Panel2.Left then P2 := PinPosition(Panel2,pinLeft);
  if Panel1.Left = Panel2.Left then
    if Panel1.Top < Panel2.Top then P2 := PinPosition(Panel2,pinTop);
    if Panel1.Top > Panel2.Top then P2 := PinPosition(Panel2,pinBottom);
   {und dann der rest vom Schützenfest}
end;

Der Code könnte Fehler beinhalten, da ich ihn mit der Hand abschreiben musste. Sitze hier an einem Rechner, wo ich nicht mal eben den Code vom Stick kopieren kann.

Problem oder Unsauberkeit des Codes ist, dass Pfeil nur dann Rechts oder Links angedockt wird, wenn die beiden Panels auf gleicher Höhe sind. Besser wäre aber, wenn in der Routine ein gewisser Bereich berücksichtigt werden würde.

Skizziert sieht das ganz einfach aus. man zeichne ein Panel in die Mitte und ziehe linien diagonal durch. Die dadurch enstehenden 4 Bereiche sind die Bereiche, die wichtig sind. Wie kann ich das nun ermitteln???

[oki]

Hi torud,

Zitat:

Skizziert sieht das ganz einfach aus. man zeichne ein Panel in die Mitte und ziehe linien diagonal durch. Die dadurch enstehenden 4 Bereiche sind die Bereiche, die wichtig sind. Wie kann ich das nun ermitteln???

Das ist dann mal pure Mathematik. Du musst die Graphen (Funktion der Geraden) der beiden Diagonalen durch dein erstes Panel ermitteln. Die entsprechenden Eckpunkte hast du ja. Erster Graph links/oben nach rechts/unten. Zweiter Graph links/unten nach rechts/oben.

Dann nimmst du deinen Verbindungspunkt deines zweiten Panels und berechnest für die Koordinatenwerte die entsprechende Lage der Graphen. Mit einfacher <> Prüfung auf X und Y kannst du dann den "Quadranten" (eigentlich sind es ja keine) ermitteln, in dem dein zweites Panel in Bezug auf dein erstes Panel liegt. danach dei festgelegten Punkte verbinden. Die Festlegung der Typen für pinTop etc. sind übriegens sehr gut. Das erhöht ungemein die Lesbarkeit des Codes.

Gruß oki

[torud]

also das klingt jetzt ganz schön kompliziert. ich werde mal das forum nach graphen und alldem, was du da geschrieben hast, durchsuchen, da mein mathe mehr als eingerostet ist und ich zwar alles mögliche im kopf rechne, aber winkelfunktionen und dergleichen zuletzt vor ca. 19 jahren hatte...

mir ist schon klar, dass bei dem zeichnen der diagonalen 4 dreiecke entstehen und ich nur checken muss, ob das 2. panel in einem der bereiche ist.

[Hawkeye219]

Hallo Tom,

die Position der beiden beteiligten Panels zueinander läßt sich recht einfach mit dem Sutherland-Cohen-Algorithmus ermitteln. In Abhängigkeit des ermittelten Lagecodes wird dann der Pfeil gezeichnet.

Delphi-Quellcode:

procedure TForm1.FormPaint (Sender: TObject);

  procedure DoDrawVector (aPin1, aPin2: TPin);
  var
    P1, P2 : TPoint;
  begin
    P1 := PinPosition(Panel1, aPin1);
    P2 := PinPosition(Panel2, aPin2);
    Canvas.Pen.Color := clBlue;
    Canvas.Brush.Color := clBlue;
    DrawVector (Canvas, P1.X, P1.Y, P2.X, P2.Y, 10, True);
  end;

var
  code : Integer;
begin
  inherited;

  // Lagecode des ersten Panels bezogen auf das zweite Panel ermitteln
  code := 0;
  if (Panel1.Left + Panel1.Width < Panel2.Left) then Inc (code, 1);
  if (Panel1.Left > Panel2.Left + Panel2.Width) then Inc (code, 2);
  if (Panel1.Top + Panel1.Height < Panel2.Top) then Inc (code, 8);
  if (Panel1.Top > Panel2.Top + Panel2.Height) then Inc (code, 4);

  // Vektor in Abhängigkeit des Lagecodes zeichnen
  case code of
    1: DoDrawVector (pinRight, pinLeft);
    2: DoDrawVector (pinLeft, pinRight);
    4: DoDrawVector (pinTop, pinBottom);
    5: DoDrawVector (pinTop, pinLeft);
    6: DoDrawVector (pinTop, pinRight);
    8: DoDrawVector (pinBottom, pinTop);
    9: DoDrawVector (pinBottom, pinLeft);
   10: DoDrawVector (pinBottom, pinRight);
  end;
end;

Die Lösung von oki (mehrere Ecken pro Verbindung) ist natürlich wesentlich ansprechender, aber auch etwas aufwendiger.

Gruß Hawkeye

[torud]

Wird sofort ausprobiert.
Feedback garantiert!

[torud]

Hallo,

also das funktioniert nun schon ganz gut. Folgendes interessiert mich nun noch.

Wie kann ich den Pfeil auch mit einer gestrichelten Linie darstellen?
- Canvas.Pen.Style := psDashDot; //führte nicht zum Erfolg

Ist es möglich auch einen Doppelpfeil darstellen zu lassen?
- Ich denke, dass ich dazu DrawVector etwas modifizieren müsste...!?

Was muss ich tun, um den Pfeil mit Grafics32 besser aussehen zu lassen?
- Mich stören noch die Treppchen in der Linie.

Wie könnte ich intern die Pfeile verwalten?
- Ich weiss, das OKI sicher wieder darauf verweisen wird, dass es besser wäre eine eigene Extra-Komponente zu erstellen. Ich gebe ihm da auch recht, aber in der Kürze der Zeit ist das derzeit nicht drin.
--Anfang sollen also gar keine Pfeile zwischen den Controls sein. Der User soll auswählen können von wo nach wo ein Pfeil erstellt werden soll. Dazu müsste ich mir intern notieren:

- von Control
- nach Control
- Art der Pfeilspitze
- Farbe des Pfeiles
- Style der Pfeillinie

Bei jedem FormPaint müsste ich dann in einer Schleife die interne Liste abarbeiten und die Pfeile neuzeichnen. Was empfehlt ihr hierzu? Ich würde es in einer einer TStringlist vorhalten und die Eigenschaften eines jeden Pfeiles in einem Item Semikolon-getrennt schreiben und in einer Extraliste dem User visualisieren.

Gehts auch anders? Oder anders gefragt, macht es anders mehr Sinn?

Im Anhang mein aktuelles Beispiel...

[Hawkeye219]

Hallo Tom,

Zitat:

Wie kann ich den Pfeil auch mit einer gestrichelten Linie darstellen?
- Canvas.Pen.Style := psDashDot; //führte nicht zum Erfolg

Damit Pen.Style akzeptiert wird, muß offenbar Brush.Style den Wert bsClear haben. Wenn die Pfeilspitze gefüllt werden soll, muß natürlich Brush.sStyle wieder auf den Wert bsSolid gesetzt werden. Es wäre somit besser, alle Zugriffe auf den Canvas in die Zeichenroutine zu verlagern.

Zitat:

Ist es möglich auch einen Doppelpfeil darstellen zu lassen?
- Ich denke, dass ich dazu DrawVector etwas modifizieren müsste...!?

Möglich ist das, es stellt sich aber die Frage, ob der jetzige Weg dafür der richtige ist. Deine Frage nach der Verwaltung der Pfeile geht ja in die gleiche Richtung. Es muß nicht unbedingt eine Komponente sein, die auf dem Formular abgelegt werden kann. Zunächst sollte man vielleicht alle Parameter einer Verbindung in einem Objekt TConnection kapseln. Die Zeichenroutine wird dann zu einer Methode dieses Objektes und kann auf die benötigten Daten zugreifen. Lediglich der Canvas für die Ausgabe muß ihr noch übergeben werden.

Zitat:

Was empfehlt ihr hierzu? Ich würde es in einer einer TStringlist vorhalten und die Eigenschaften eines jeden Pfeiles in einem Item Semikolon-getrennt schreiben und in einer Extraliste dem User visualisieren.

Wenn du die Kapselung wie oben beschrieben durchführst, genügt für die interne Speicherung der Daten schon eine TObjectList mit Verweisen auf die TConnection-Objekte.

Zitat:

Was muss ich tun, um den Pfeil mit Grafics32 besser aussehen zu lassen?

Hier muß ich leider passen, da ich noch nicht mit dieser Bibliothek gearbeitet habe. Da sie aber schon häufiger in diesem Forum empfohlen wurde, findet sich vielleicht jemand, der dir in diesem Punkt besser helfen kann.

Gruß Hawkeye

[torud]

Hallo Wissende,

im Anhang habe ich ein erstes Ergebnis als Bild angehangen. WIe ich finde nicht soo schlecht. Leider habe ich doch noch ein paar Fragen, da wie Ihr vielleicht zustimmen werdet, die Pfeile noch nicht optimal verlaufen.

Die Pfeile von Objekt 2 zu 3 und 5 wären mir OnTop wesentlich lieber, damit es einheitlicher wirkt.

Das Fenster zur Pfeileverwaltung zeige ich nur Modal an und sobald ich es über das Fenster mit den Pfeilen schiebe, werden diese gelöscht und erst dann neu gezeichnet, wenn ich auf die Paintbox klicke, die ich alClient auf die Scrollbox gelegt habe. Wie kann ich das umgehen?

Ich habe schon my_controls.PaintBox.Repaint; versucht, wenn ich das Fenster bewege und dann mit der Maus loslasse, aber es wird nicht neu gezeichnet.

Wenn ich die Objekte bewege und verschiebe, werden die Pfeile neu gezeichnet, aber die alten bleiben vorhanden. Erst wenn ich wieder auf die Paintbox klicke, werden alle Pfeile gelöscht und neu gezeichnet...

Die Ereignisse zu den Control bei MouseDown,MouseMove oder MouseUp musste rausnehmen, da ich eine andere Komponente zum verschieben der Controls benutze. Wenn ich diese Routinen anbinde, dann reicht es, wenn ich mit der Maus in die Nähe komme und schon laufen mir die Controls vor der Maus weg. Sieht zwar lsutig aus, aber ist so nicht zu gebrauchen. Ich werde mal sehen, was in den 3 Routinen gemacht wird, damit ich es vielleicht selbst woanders implementiere...

Über Ideen und Anregungen würde ich mich freuen...