Pfeil auf einem Image platzieren

[fisipjm]

Hi,

ich bräuchte mal einen kleinen Denkanstoß.
Was ich versuche zu erreichen:

Ich habe ein TImage, dort ist irgend ein Bild geladen.
Auf diesem Bild möchte ich jetzt einen Pfeil platzieren können.
Das soll so funktionieren, das ich auf einen Punkt im Bild klicke und die Maustaste gedrückt halte. Dann kann ich den Pfeil an die Stelle ziehen, wo er hin zeigen soll. Der Pfeil soll von der Ursprünglichen Stelle an die letzte Position "wachsen". Also Endergebnis soll dann sein, wenn ich Unten rechts auf das Bild klicke und dann die Maus nach oben Links ziehe das ich dann einen Pfeil habe der von unten rechts nach oben links zeigt.

Ich hab das schon versucht mit SVG Grafiken umzusetzen, aber beim ändern der width und height, ändert sich logischerweise nur die Größe des gesamten Pfeils, nicht aber die Ausrichtung. Muss ich mir im MouseMove Event anhand von PressedPosition und X/Y den Winkel errechnen und die Pfeilspitze so bei der Maus halten?

Irgendwie hab ich das gefühlt ich bin in die Flasche Richtung unterwegs, hat das jemand schon mal umgesetzt und kann mir eine kleine Denkhilfe geben?:oops:

Gruß
PJM

[itsChris]

Moin,

schonmal im Internet recherchiert? Habe sofort etwas Nützliches gefunden, was einige deiner Kriterien erfüllt. Ist zwar kein schöner Pfeil, aber bei Canvas kann man auch nicht so viel erwarten.

https://www.swissdelphicenter.ch/en/...de.php?id=2426

Wenn sich der Pfeil mit deiner Maus bis zum Loslassen bewegen soll, dann musst du im MouseMove auch zeichnen.

[Sinspin]

Ich dachte doch jetzt glatt erst an ausdrucken ... Korkplatte ... Armbrust.

Aber OnMouseMove, OnMouseDown, XOR, lässt sicher genauere Ergebnisse zu.

[himitsu]

XOR und so, war, damit man auf ein Bild zeichnen und das gezeichnete durch nochmaliges zeichnen wieder löschen zurücksetzen kann.

* entweder man malt das Bild neu und darauf erneut den neuen Pfeil
* oder man malt eben nicht auf das Bild (Bitmap), sondern nur darüber

Da man nun doch nicht auf ein TImage zeichnen kann, also nur dauf den "sichtbaren" Canvas des TImage, und nicht ins Canvas des Bildes
https://www.delphipraxis.net/213846-...nd-bitmap.html

* entweder ein Cast und sich das "richtige" Canvas besorgen
* oder z.B. eine TPaintBox über das TImage legen
* oder direkt eine TPaintBox benutzen (anstatt TImage) und dann Pfeil und Bild (TBitmap oder so) selbst auf's Canvas zeichnen
* oder
* oder
* oder

[fisipjm]

Moin,

vielen Dank für die hilfreichen Tipps. Entschuldigung, wenn ich mich zuvor ungenau ausgedrückt habe. Ich habe jetzt einen Ansatz, der soweit funktioniert. Mein eigentliches Problem bestand darin, dass ich nicht wusste, wie ich die Maus der Bewegung meines Bildes folgen lassen kann. Hier ist, wie ich es gelöst habe:

Ich verwende ein TSkSVG-Objekt aus der Skia4Delphi-Bibliothek für das Overlay auf dem Bild. An dieser Stelle möchte ich ein großes Lob für diese wirklich großartige Bibliothek aussprechen.

Für die Mausverfolgung nutze ich jetzt die ArcTan2-Funktion, um den Winkel zu bestimmen. Hier ist der relevante Code:

Delphi-Quellcode:

procedure OnImageControlMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
  function CalculateDistance(x1, y1, x2, y2: Double): Double;
  begin
    Result := Sqrt(Sqr(x2 - x1) + Sqr(y2 - y1));
  end;

begin
  if FPointIsOnHold then
  begin
Arrow.Height := CalculateDistance(FImage.PressedPosition.X, FImage.PressedPosition.Y, X, Y);
          Arrow.Width := Arrow.Height;

          Arrow.Position.Y := FImage.PressedPosition.Y - (Arrow.Height / 2);
          Arrow.Position.X := FImage.PressedPosition.X - (Arrow.Width);

          Arrow.RotationAngle := RadToDeg(ArcTan2(FImage.PressedPosition.Y - Y, FImage.PressedPosition.X - X));
  end;

Der ursprüngliche Pfeil, den ich anzeige, zeigt von rechts nach links und ist auf seiner vertikalen Achse zentriert. Die SVG-Größe (Höhe und Breite) ist immer identisch mit dem Radius in meinem "imaginären Kreis", der sich um meinen Ausgangspunkt erstreckt, wenn ich die Maus von der ursprünglichen Klickposition wegbewege. Die ArcTan2-Funktion in Kombination mit der RadtoDeg-Funktion gibt mir den Winkel an, in dem sich die Maus im Vergleich zur ursprünglichen Pfeilrichtung (von rechts nach links) befindet. Die Position des Pfeils wird nach jeder Größenänderung wieder auf "Mittig Rechts" gesetzt. Das RotationCenter ist im OnMouseDown-Event auf Y=0.5 und X=1 definiert.

Bis hierhin funktioniert alles wie gewünscht. Das Problem ist jedoch, dass sich die Strichstärke des Pfeils ändert, wenn ich das Objekt vergrößere. Das ergibt irgendwie Sinn :pale:. Eigentlich möchte ich, dass nur die Länge des Pfeils verlängert wird, während der Kopf und die Strichstärke gleich bleiben. Habe ich vielleicht den falschen Ansatz gewählt?

Edit:
Ich bewege mich ausschließlich im FMX Umfeld.

[Sinspin]

Du schießt noch immer mit Kanonen auf Ameisen, Spatzen wären noch immer viel zu groß für diesen Vergleich.
Ein Pfeil sind 3 oder 4 Linien. Nix mit SVG oder sonstwas. Das macht alles nur unnötig umständlich. Und Kreisfunktionen, für was?
Nimm erstmal einfach ein Image, das hat ein Canvas. Das hat eine Procedure Line(Punk1, Punkt2).
Bei Click merkst du dir Punkt1, Solange sich die Maus bewegt bekommst du Punkt2 und rufst Line(Punkt1, Punkt2) auf.
Nächster Click, die Linie ist final. Damit dazwischen nicht das ganze Bild voller Linien ist brauchst du entweder ein ansonsten duchsichtiges Overlay über deinen Bild was du bei jedem neu zeichnen einmal löscht.
Oder der Zeichenmode für deine Linie muss XOR sein und zu zeichnest die alte Linie nochmal an die gleiche Stelle bevor du die geänderte zeichnest.

[fisipjm]

Zitat:

Zitat von Sinspin (Beitrag 1528226)

Du schießt noch immer mit Kanonen auf Ameisen, Spatzen wären noch immer viel zu groß für diesen Vergleich.
Ein Pfeil sind 3 oder 4 Linien. Nix mit SVG oder sonstwas. Das macht alles nur unnötig umständlich. Und Kreisfunktionen, für was?
Nimm erstmal einfach ein Image, das hat ein Canvas. Das hat eine Procedure Line(Punk1, Punkt2).
Bei Click merkst du dir Punkt1, Solange sich die Maus bewegt bekommst du Punkt2 und rufst Line(Punkt1, Punkt2) auf.
Nächster Click, die Linie ist final. Damit dazwischen nicht das ganze Bild voller Linien ist brauchst du entweder ein ansonsten duchsichtiges Overlay über deinen Bild was du bei jedem neu zeichnen einmal löscht.
Oder der Zeichenmode für deine Linie muss XOR sein und zu zeichnest die alte Linie nochmal an die gleiche Stelle bevor du die geänderte zeichnest.

Hi Sinspin,

danke für deine Rückmeldung. Ich brauche eine allgemeingültige Lösung, im Nachgang, wenn ich diese dann hab, kommen da noch unterschiedliche geometrische Formen hinzu (Sterne, Kreise, Quadrate, Ameisen :) ).
Das ganze soll auch mobil laufen. Aus diesen Gründen bin ich auf die SVG Variante gegangen.

Gruß
PJM

[Sinspin]

Hm, Ich finde Blumen besser als Kanonen. Bekommt man auch Spatzen und Ameisen darunter versteckt. Trotzdem war ich jetzt zu Faul eine zu malen. Selbst für einen Pfeil war ich jetzt zu Faul.
Aber man sieht trotzdem dass es geht. Siehe Anhang!

[fisipjm]

Zitat:

Zitat von Sinspin (Beitrag 1528243)

Hm, Ich finde Blumen besser als Kanonen. Bekommt man auch Spatzen und Ameisen darunter versteckt. Trotzdem war ich jetzt zu Faul eine zu malen. Selbst für einen Pfeil war ich jetzt zu Faul.
Aber man sieht trotzdem dass es geht. Siehe Anhang!

Hi Sinspin,

vielen Dank, dass du ein Beispielprojekt gemacht hast. Ich werde es mir anschauen und schau mal ob ich es adaptieren kann.:thumb:

Grüße
PJM

[Jens01]

Für den nächsten Schritt kannst ja mal hier gucken.
Ich glaube, da gibt es auch Layer, die Du verschieben kannst.
https://angusj.com/image32/Docs/Examples.htm

[fisipjm]

Zitat:

Zitat von Sinspin (Beitrag 1528243)

Hm, Ich finde Blumen besser als Kanonen. Bekommt man auch Spatzen und Ameisen darunter versteckt. Trotzdem war ich jetzt zu Faul eine zu malen. Selbst für einen Pfeil war ich jetzt zu Faul.
Aber man sieht trotzdem dass es geht. Siehe Anhang!

Okay, ich habe mich mal an einem Pfeil versucht das Ergebnis passt für meine Zwecke. Danke für die Hilfe. Ich muss auch die Möglichkeit haben, Änderungen an dem Bild wieder rückgängig zu machen, das kann ich ja nur, wenn ich ein eigenes Overlay mache, wie Himitsu das z.B. schon angemerkt hat, richtig?

Hier der Code für den Pfeil:

Delphi-Quellcode:

procedure TForm1.Button1Click(Sender: TObject);
begin
  CancelDraw := not CancelDraw;
end;

procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  LfX := X;
  LfY := Y;
  Down := true;
end;

procedure TForm1.FormMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
  procedure DrawArrow(Canvas: TCanvas; X1, Y1, X2, Y2: Single; LineSize: Integer);
  var
    Angle: Double;
    X, Y: Single;
    lBrush: TStrokeBrush;
  begin
    lBrush := TStrokeBrush.Create(TBrushKind.Solid, TAlphaColors.Blue);
    try
      lBrush.Thickness := LineSize;
      lBrush.Cap := TStrokeCap.Round;

      Canvas.DrawLine(TPointF.Create(X1, Y1), TPointF.Create(X2, Y2), 100, lBrush);

      Angle := ArcTan2(Y2 - Y1, X2 - X1);

      X := X2 - (20 * Cos(Angle - Pi / 6));
      Y := Y2 - (20 * Sin(Angle - Pi / 6));
      Canvas.DrawLine(TPointF.Create(X2, Y2), TPointF.Create(X, Y), 100, lBrush);

      X := X2 - (20 * Cos(Angle + Pi / 6));
      Y := Y2 - (20 * Sin(Angle + Pi / 6));
      Canvas.DrawLine(TPointF.Create(X2, Y2), TPointF.Create(X, Y), 100, lBrush);
    finally
      lBrush.Free;
    end;
  end;

begin
  if Down then
  begin
    Self.Canvas.BeginScene;
    if CancelDraw then
      Self.Canvas.Clear(TAlphaColorRec.Darkgrey);
    DrawArrow(Self.Canvas, LfX, LfY, X, Y, 5);
    Self.Canvas.EndScene;
  end;
end;

procedure TForm1.FormMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  Down := false;
end;

[Sinspin]

Das Beispiel ist brutal simpel gehalten. Das dient ja nur dazu zu zeigen das es auch einfach geht ;-)
Was funktionieren sollte ist, ein Image zu nehmen in dem das Bild angezeigt wird und ein durchsichtiges Panel darüber zu legen in den Du zeichnen kannst.
Dann sind Image und Pfeil permanent voneinander getrennt.

[fisipjm]

Zitat:

Zitat von Sinspin (Beitrag 1528273)

Das Beispiel ist brutal simpel gehalten. Das dient ja nur dazu zu zeigen das es auch einfach geht ;-)
Was funktionieren sollte ist, ein Image zu nehmen in dem das Bild angezeigt wird und ein durchsichtiges Panel darüber zu legen in den Du zeichnen kannst.
Dann sind Image und Pfeil permanent voneinander getrennt.

Hi Sinspin,

ich glaube, diese ganze Thema Canvas/Bitmap/Image, liegt mir absoult nicht :|
Könntest du mir nochmal auf die Sprünge helfen?

Ich hab mir jetzt was zusammen geschrieben, das mir bei jedem MouseDown, MouseMove, MouseUp ein neues TImage über meinem eigentlichen TImage erzeugt, auf dem kann ich dann zeichnen. Zugriff auf jede "Ebene" hab ich über ein TArray. Ich scheitere jetzt an der Aufgabe, diese Images einfach zu einem einzigen Image zusammen zu führen und in eine Date Abzuspeichern, ich versteh gar nicht was daran so kompliziert ist :pale:

[Sinspin]

Zeig mal was du hast. Vermutlich siehst du nur gerade den Wald vor lauter Bäumen nicht.

[fisipjm]

Zitat:

Zitat von Sinspin (Beitrag 1528389)

Zeig mal was du hast. Vermutlich siehst du nur gerade den Wald vor lauter Bäumen nicht.

Das befürchte ich auch :|
Hab das Projekt mal in den Anhang geladen, das Konstrukt mit den Helper Klassen bitte einfach ignorieren:oops:, hab das nur Quick&Dirty als Proof of Concept zusammen geschmissen.

[fisipjm]

Zitat:

Zitat von Sinspin (Beitrag 1528389)

Zeig mal was du hast. Vermutlich siehst du nur gerade den Wald vor lauter Bäumen nicht.

Moin Sinspin,

ich habe das Wochenende genutzt und mich nochmal neu sortiert. Ich glaube mein Ansatz war maximal zu kompliziert. Ich hab dein Projekt nochmal angepasst und arbeite nicht mehr mit unterschiedlichen ebenen, sondern arbeite direkt auf dem Image1.Bitmap.Canvas. Habe mittlerweile auch verstanden, dass Image1.Canvas und Image1.Bitmap.Canvas nicht das selbe sind. Könntest du den Code nochmal kurz überfliegen, ob dir etwas einfällt wo du sagen würdest, mach das auf keinen Fall so. :coder2:

Merci :)

Delphi-Quellcode:

unit FMX_PaintFrm;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.UIConsts, System.Classes, System.Variants, System.Math,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls, FMX.Controls.Presentation, FMX.Objects;

type
  TForm1 = class(TForm)
    btn_save: TButton;
    Image1: TImage;
    btn_Turn: TButton;
    btn_prev: TButton;
    procedure btn_prevClick(Sender: TObject);
    procedure FormDestroy(Sender: TObject);
    procedure btn_saveClick(Sender: TObject);
    procedure btn_TurnClick(Sender: TObject);
    procedure FormShow(Sender: TObject);
    procedure Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
    procedure Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
    procedure Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
  private
    { Private declarations }
    ImageToBitmapFactorWidth: Single;
    ImageToBitmapFactorHeight: Single;
    Down: Boolean;
    ImageState: Tarray<TBitmap>;
    ImageStateStage: Integer;
    procedure AppendNewState;
    procedure DrawArrow(Canvas: TCanvas; X1, Y1, X2, Y2: Single; LineSize: Integer; aColor: TAlphaColor);
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.DrawArrow(Canvas: TCanvas; X1, Y1, X2, Y2: Single; LineSize: Integer; aColor: TAlphaColor);
var
  Angle: Double;
  X, Y: Single;
  lBrush: TStrokeBrush;
begin
  lBrush := TStrokeBrush.Create(TBrushKind.Solid, aColor);
  try
    lBrush.Thickness := LineSize;
    lBrush.Cap := TStrokeCap.Round;
    lBrush.Color := aColor;

    Canvas.DrawLine(TPointF.Create(X1, Y1), TPointF.Create(X2, Y2), 100, lBrush);

    Angle := ArcTan2(Y2 - Y1, X2 - X1);

    X := X2 - (20 * Cos(Angle - Pi / 6));
    Y := Y2 - (20 * Sin(Angle - Pi / 6));
    Canvas.DrawLine(TPointF.Create(X2, Y2), TPointF.Create(X, Y), 100, lBrush);

    X := X2 - (20 * Cos(Angle + Pi / 6));
    Y := Y2 - (20 * Sin(Angle + Pi / 6));
    Canvas.DrawLine(TPointF.Create(X2, Y2), TPointF.Create(X, Y), 100, lBrush);
  finally
    lBrush.Free;
  end;
end;

procedure TForm1.btn_prevClick(Sender: TObject);
begin
  if ImageStateStage = 0 then
    if High(ImageState) = -1 then
      exit
    else
      ImageStateStage := High(ImageState);

  Inc(ImageStateStage, -1);

  Image1.Bitmap.Canvas.BeginScene;
  try
    Image1.Bitmap.Canvas.DrawBitmap(ImageState[ImageStateStage], ImageState[ImageStateStage].BoundsF, Image1.Bitmap.BoundsF, 1.0, true);
  finally
    Image1.Bitmap.Canvas.EndScene;
  end;

end;

procedure TForm1.FormDestroy(Sender: TObject);
var
  lBitmap: TBitmap;
begin
  for lBitmap in ImageState do
    lBitmap.Free;
end;

procedure TForm1.btn_saveClick(Sender: TObject);
begin
  Image1.Bitmap.SaveToFile('C:\Users\Administrator\Desktop\BetterCallSaul.jpg');
end;

procedure TForm1.btn_TurnClick(Sender: TObject);
begin
  Image1.Bitmap.Rotate(90);
end;

procedure TForm1.FormShow(Sender: TObject);
begin
  AppendNewState;

  ImageToBitmapFactorWidth := Image1.Bitmap.Width / Image1.Width;
  ImageToBitmapFactorHeight := Image1.Bitmap.Height / Image1.Height;
end;

procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  Down := true;
end;

procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
var
  LastImage: TBitmap;
begin
  if Down then
  begin
    LastImage := ImageState[high(ImageState)];
    Image1.Bitmap.Canvas.BeginScene;
    try
      Image1.Bitmap.Canvas.DrawBitmap(LastImage, LastImage.BoundsF, Image1.Bitmap.BoundsF, 1.0, true);
      DrawArrow(Image1.Bitmap.Canvas, Image1.PressedPosition.X * ImageToBitmapFactorWidth, Image1.PressedPosition.Y * ImageToBitmapFactorHeight,
        X * ImageToBitmapFactorWidth, Y * ImageToBitmapFactorHeight, 4, TAlphaColors.Green);
    finally
      Image1.Bitmap.Canvas.EndScene;
    end;
  end;
end;

procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  Down := false;
  AppendNewState;
end;

procedure TForm1.AppendNewState;
var
  lBitmap: TBitmap;
begin
  lBitmap := TBitmap.Create(Image1.Bitmap.Width, Image1.Bitmap.Height);
  lBitmap.CopyFromBitmap(Image1.Bitmap);
  ImageState := ImageState + [lBitmap];
end;

end.

[Sinspin]

Eigentlich enthält deine Frage ja schon die Antwort. Auf keinen Fall ;-) Ich würde jetzt nicht sagen dass man das auf keinen Fall so machen sollte, es gibt für fast alles eine Anwendung.
Aber das Bild neu zu zeichnen und dann den Pfeil drauf, für jedesmal das man die Maus beweget ...das geht schon deutlich Richtung Ressourcenverschwendung.
Allerdings finde ich jetzt auf die schnelle auch keine andere Lösung. Das FMX Panel kann nicht durchsichtig. Jedenfalls nicht so wie ich es wollen würde.
Sonst würde ich den Pfeil im Panel zeichnen und erst ins Bild übernehmen wenn man die Maus loslässt.

[Olli73]

Zitat:

Zitat von Sinspin (Beitrag 1528534)

Das FMX Panel kann nicht durchsichtig. Jedenfalls nicht so wie ich es wollen würde.

Was ist an "Opacity := 0" verkehrt?

[Sinspin]

Dann zeichne doch mal drauf und lösche anschließend den Inhalt via ClearRect(), Dann kannst Du gut sehen was verkehrt. Opacity wieder setzen ist auch nicht so wie es Sinn macht.
Ich finde bisher in FMX keine Möglichkeit "XOR" zu zeichnen. Dann bräuchte man nicht vor jeder neuen Linie den ganzen Inhalt löschen, nur um die Linie weg zubekommen. Bzw, was ist die transparente Farbe? Bei ClearRect ist jedenfalls egal was ich angebe, danach ist das Bild einfach Schwarz.

[Olli73]

Also ich hatte das vorhin mal kurz getestet. Im OnMouseMove habe ich mir die Position gemerkt und ein InvalidateRect gemacht und im OnPaint dann eine Linie gezeichnet. Das lief ohne Ruckeln etc.

[Sinspin]

Zitat:

Zitat von Olli73 (Beitrag 1528540)

Also ich hatte das vorhin mal kurz getestet. Im OnMouseMove habe ich mir die Position gemerkt und ein InvalidateRect gemacht und im OnPaint dann eine Linie gezeichnet. Das lief ohne Ruckeln etc.

:thumb:
Wenn man es richtig macht, dann klappt es auch.
Danke, Olli.