Pfeil auf einem Image platzieren

[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

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