Pfeil auf einem Image platzieren

[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

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

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

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