Suche Pfeile zur Visualisierung von Beziehungen

[torud]

Hallo,

es tut mir leid, wenn ich Deinen Ausführungen zwar inhaltlich folgen kann, aber eigentlich mit der Umsetzung total überfordert bin. Ich habe folgenden Link gefunden, der das Zeichnen eines Pfeiles von x,y nach x,y schon mal realisiert.

http://www.delphipraxis.net/internal...t.php?p=290736

Das hat zwar mit dem was Du tust, nichts zu tun, aber es bringt mich ein Stück weiter. Allerdings bin ich mit dieser Lösung KEINEN Schritt voran gekommen, da ich damit nur einen Pfeil zeichnen kann, aber danach habe ich nen Pfeil auf nem Canvas und habe eher keine Chance diesen zu bewegen oder zu löschen oder sonstwas mit ihm anzustellen...

Also weiss ich jetzt zwar, wie ich einen Pfeil zeichne, aber ich weiss noch nicht genau, worauf ich ihn zeichnen soll. Wie wäre es mit einem TLabel? Oder welche Frage muss ich mir stellen, um wieder einen Schritt voran zu kommen?

Bezüglich der Linien des Pfeiles gefallen mir die grässlichen Treppchen nicht. Aber ich habe auch blos keine Ahnung, wie man die wegbekommen kann. AntiAlaising!?

[torud]

Ich habe gerade festegestellt, dass ich zwar gelernt habe, wie man Pfeile zeichnen lassen kann und dies dahingehend erweitert, dass ich erstmal die Pfeile von einem Button zum anderen zeichnen lasse, aber nachdem das Fenster mal im Hintergrund war, war durch ein Repaint des Fensters nichts mehr zu sehen von den Pfeilen. Eigentlich logisch.

Also muss ich wohl oder über auf eine Control zeichnen.

Da scheint sich langsam der Kreis zu schliessen...Ich denke, dass ich jetzt dann zu TCustomControl gelangen werde!?

[oki]

Zitat von torud:

Da scheint sich langsam der Kreis zu schliessen...Ich denke, dass ich jetzt dann zu TCustomControl gelangen werde!?

Joop,

Somit hast du dein eigenes Control (TArrowControl), mit dem du alles notwendige anstellen kannst.
Implementiere in dein neues Control eine Methode:

Delphi-Quellcode:

procedure DrawArrow;
procedure Paint; override;

procedure TArrowControl.Paint;
begin
  inherited;
  DrawArrow;
end;

In die Procedure DrawArrow packst du deinen Code für das Zeichen deines Pfeiles.

Registriere dieses Control als Komponente in einer eigenen Seite deiner IDE. Dann kannst du es zur Designzeit verwenden.

Gruß oki

[torud]

Ehrlich gesagt ist das zu viel des Guten. Ich habe zum einen noch keine eigene Komponente erstellt und weiss auch nicht sooo recht, was Du da schreibst...Allerdings habe ich festgestellt, dass selbst der Cnavas des TLabels nach dem Neuzeichnen des Forms leer ist.

Ich erlaube mir mal mein Demo-Projekt anzuhängen, in der Hoffnung, dass Du oder ein andere mal testet und mir etwas weitere Hilfe gewährt...

Zur Funktionalität: Einfach nur auf einen Button klicken und danach auf einen anderen button klicken. Beim 2. Buttonklick wird dann ein Pfeil vom ersten zum zweiten Button gezeicht, in ein Label, welches nicht generiert wurde, sondern alClient auf dem Form selbst liegt...

Das dynamische Generieren eines Labels sollte kein Problem sein. Auch das ausrichten der Pfeile, die derzeit noch immer von oben links starten ist kein Problem, aber ich verstehe nicht wirklich alles von dem was Du da schreibst...Schaust Du bitte mal drüber...?

[oki]

Hi,

also, du hast jetzt zwei Möglichkeiten.

1. Du zeichnest alles auf deine Form. Dann ist das halt gezeichnet. Verschieben einzelner Elemente (Pfeile etc.) ist dann aber nicht möglich. Halt nur neu zeichen. Dein Formular hat ein Ereignis OnPaint. Wenn alles nach dem "Neuanzeigen" wieder gezeichnet werden muß, dann rufe deine Zeichenmethode von dort auf.

2. Du estellst dir eigene Controls. Dann empfehle ich dir dich erst mal mit der Erstellung eigener Klassen und Komponenten zu beschäftigen.

Gruß oki

[oki]

ok, jetzt mit etwas mehr Zeit.

In deinem Demo zeichnest du zur Laufzeit die Linien und die Pfeile in den Canvas. Das erfolgt aber nur, wenn du auf den Button klickst. Wird dein Fenster neu gezeichnet, so musst du natürlich dafür sorgen, dass auch deine Linien und Pfeile neu gezeichnet werden. Um das zu ereichen, mußt du deine Zeichenmethoden in das OnPaint-Ereignis verlagern oder die Methode Paint des Controls (Fensters) auf dessen Canvas du zeichnest überschreiben.
Zusätzlich ist es natürlich notwendig, dass du einen Start und Endpunkt hast.

Fang mal einfach an. Lege einen Startpunkt und endpunkt im Code fest. Dann verlagere das, was du bei deinem ButtonClick machst in eine Procedure. Schreibe den Namen dieser Procedure in das OnPaint-ereignis.
schwups wird immer dein Pfeil gezeichnet.

Solltest du so nicht weiter kommen, so sag bescheid. Dann schau ich mir dein Demo mal genauer an und überarbeite den Code.

Gruß oki

[torud]

Hallo,

wie ich ein eigenes TControl zur Laufzeit erstelle ist mir natürlich klar. Das ist nicht das Problem. Ich bin also schon in der Lage in TLabel zur Laufzeit zu erstellen und es so zu platzieren, dass es Sinn macht und dann darauf den Pfeil zu zeichnen. Das ist kein Problem.

Aber wie verhindere ich, dass der Pfeil verschwindet, wenn das Form oder das Label selbst neu gezeichnet wird!?

Diese Frage impliziert die Entscheidung zur Variante 2. Ich habe aber nicht vor, mir deshalb eine eigene Komponente zu programmieren, wenns sich nicht wirklich vermeiden lässt...

[oki]

Hei torud,

das Erstellen zur Laufzeit reicht halt nicht. Die Klasse muß auch neue Eigenschaften besitzen. Halt Pfeil zeichnen. Kennst du eine Kompo oder Klasse die das kann?
Ich denke nicht, sonst würdest du nicht fragen

Also brauchst du eine neue Klasse! Ob du daraus auch gleich mittels Register eine Komponente in deiner IDE machst bleibt dir überlassen.
Dieser neuen Klasse mußt du jetzt die Eigenschaft Pfeil zeichnen verpassen. Dazu gehören die entsprechenden Start- und Endpunkte deiner Linie und an welchem Punkt der Pfeil gezeichnet werden soll. Dann noch eine Procedure, die alles in den Canvas zeichnet, aufgerufen in der vererbten Procedure Paint und fertig.

Das wars schon.

Gruß oki

[torud]

Ok, ich denke...das das dann mit nem neuen Thema verbunden ist und werde dann wohl nen neuen Thraed aufmachen oder aber mich zum Thema Erstellung einer Komponente beschäftigen...Muss ja auch lösbar sein oder!?

Soll ich nun ein TLabel nehmen oder bietet sich nicht ein TShape an?
Und wie stellt man sicher, dass der gezeichnete Pfeil nicht immer verschwindet?

[Hawkeye219]

Hallo Tom,

ich habe hier eine kleine Demo zusammengebaut, die dir zeigen soll, wie du möglicherweise auf eine Pfeil-Komponente verzichten kannst. Zum Testen benötigst du lediglich ein leeres Formular, auf das du zwei Panels (Panel1 und Panel2) legst. Die Ereignisse OnMouseDown, OnMouseMove und OnMouseUp der Panels verbindest du über den Objektinspektor mit den zugehörigen Methoden des folgenden Codes. Das Ereignis OnPaint des Formulars verbindest du mit der Methode FormPaint. Wenn du nun die Anwendung startest, solltest du beide Panels mit der Maus verschieben können. Ein Pfeil verbindet Panel1 mit Panel2.

Delphi-Quellcode:

// uses Math;
type
  TForm1 = class (TForm)
    Panel1: TPanel;
    Panel2: TPanel;
    procedure FormPaint (Sender: TObject);
    procedure PanelMouseDown (Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
    procedure PanelMouseMove (Sender: TObject; Shift: TShiftState; X,Y: Integer);
    procedure PanelMouseUp (Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
  private
    FAnchor  : TPoint;   // Mausposition zu Beginn des Verschiebens
    FOrgPos  : TPoint;   // Position des Controls vor dem Verschieben
    FPanning : Boolean;  // True während des Verschiebens
  end;

CONST
  GRIDINTERVAL = 16;

type
  TPin = (pinBody, pinLeft, pinTop, pinRight, pinBottom);

// zeichnet einen Vektor mit einer Pfeilspitze
procedure DrawVector (aCanvas: TCanvas;  
                      x1, y1, x2, y2: Integer;  
                      aHeadSize: Integer = 5;  
                      aFillHead: Boolean = False);
const
  ApexAngle = 30 * Pi / 180;
var
  dx, dy : Integer;
  angle  : Double;
  s1, c1 : Extended;
  s2, c2 : Extended;
  P1, P2 : TPoint;
begin
  aCanvas.MoveTo (x1, y1);
  aCanvas.LineTo (x2, y2);

  if (x1 <> x2) then
    angle := {Math.}ArcTan2(y2 - y1, x2 - x1)
  else
    if (y1 < y2) then
      angle := Pi / 2
    else
      angle := 3 * Pi / 2;

  {Math.}SinCos (angle - ApexAngle, s1, c1);
  {Math.}SinCos (angle + ApexAngle, s2, c2);

  P1.x := x2 - Round(c1 * aHeadSize);
  P1.y := y2 - Round(s1 * aHeadSize);
  P2.x := x2 - Round(c2 * aHeadSize);
  P2.y := y2 - Round(s2 * aHeadSize);

  if aFillHead then
    aCanvas.Polygon ([P1, Point(x2, y2), P2])
  else
    begin
      aCanvas.MoveTo (P1.x, P1.y);
      aCanvas.LineTo (x2, y2);
      aCanvas.MoveTo (P2.x, P2.y);
      aCanvas.LineTo (x2, y2);
    end;
end;

// Liefert die Position eines Anschlußpunktes für ein Control
function PinPosition (aControl: TControl; aPin: TPin): TPoint;
var
  w2, h2 : Integer;
begin
  w2 := aControl.Left + aControl.Width div 2;
  h2 := aControl.Top + aControl.Height div 2;
  case aPin of
    pinLeft: Result := Point(aControl.Left, h2);
    pinTop: Result := Point(w2, aControl.Top);
    pinRight: Result := Point(aControl.Left + aControl.Width, h2);
    pinBottom: Result := Point(w2, aControl.Top + aControl.Height);
  else
    Result := Point(w2, h2);
  end;
end;

procedure TForm1.PanelMouseDown (Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  FAnchor := Mouse.CursorPos;
  FOrgPos := TControl(Sender).BoundsRect.TopLeft;
  FPanning := True;
end;

procedure TForm1.PanelMouseMove (Sender: TObject; Shift: TShiftState; X,
  Y: Integer);
var
  xPos, yPos : Integer;
begin                                            
  if FPanning then
    begin
      xPos := FOrgPos.X + (Mouse.CursorPos.X - FAnchor.X);
      yPos := FOrgPos.Y + (Mouse.CursorPos.Y - FAnchor.Y);
      TControl(Sender).Left := xPos - (xPos mod GRIDINTERVAL);
      TControl(Sender).Top := yPos - (yPos mod GRIDINTERVAL);
      Invalidate;
    end;
end;

procedure TForm1.PanelMouseUp (Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  FPanning := False;
end;

procedure TForm1.FormPaint (Sender: TObject);
var
  P1, P2 : TPoint;
begin
  inherited;
  // zeichne eine Verbindung von Panel1 (rechter Anschlußpunkt) zu Panel2 (linker Anschlußpunkt)
  P1 := PinPosition(Panel1, pinRight);
  P2 := PinPosition(Panel2, pinLeft);
  Canvas.Pen.Color := clBlue;
  Canvas.Brush.Color := clBlue;
{
  Canvas.Pen.Width := 2;
  Canvas.MoveTo (P1.X, P1.Y);
  Canvas.LineTo (P2.X, P2.Y);
}
  DrawVector (Canvas, P1.X, P1.Y, P2.X, P2.Y, 10, True);
end;

end.

Im Beispiel wird eine feste Verbindung eingezeichnet, in deiner Anwendung wirst du diese Verbindung variabel gestalten wollen. Du mußt dir dazu überlegen, wie du die beiden beteiligten Controls zusammen mit den benutzten Anschlußpunkten verwalten kannst.

Der Code wird sicher nicht genau dem entsprechen, was du dir vorstellst, er soll lediglich das Prinzip zeigen. Um die Treppen bei den Linien zu entfernen, könntest du das Graphics32-Paket einsetzen. Es unterstützt auch die Kantenglättung (antialiasing) bei Linien.

Gruß Hawkeye