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?

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 . 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 von 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.

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 von 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!

Hi Sinspin,

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

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