FireMonkey PenMode equivalent - DrawLine

Question

I am playing around with FireMonkey simply to test out a couple of things. One of which is implement "very simple" drawing on a canvas. eg Line, Rectangle etc...

First question is, is there an equivalent of the graphex demo supplied for VCL for FireMonkey?

Otherwise, for the purposes of the exercise, I'm trying to replicate that demo in FireMonkey and just now, the line drawing. I can get the line drawing working in so much as when I move the mouse around the line draws where expected. Unfortunately I can't get it to automatically erase the old line that was drawn at the previous point where the mouse was. This seems to be taken care of by the TPenMode property of the TPen property which is - so much as I can tell - a TStroke property in FireMonkey. ie setting the property to pmXor while drawing (moving the mouse) and then setting it to pmCopy when complete.

How would I do something similar with FireMonkey?

Here's the routine that's called during a MouseMove event of a TImage:

  FDrawSurface.Bitmap.Canvas.BeginScene;
  try
    case FShapeToDraw of
      doLine:
      begin
        FDrawSurface.Bitmap.Canvas.DrawLine(PointF(TopLeft.X, TopLeft.Y), PointF(BottomRight.X, BottomRight.Y), 100);
      end;

    end;
  finally
    FDrawSurface.Bitmap.Canvas.EndScene;
    FDrawSurface.Bitmap.BitmapChanged;
  end;

FDrawSurface is a TImage. TopLeft is a TPoint which contains the X and Y of where the mouse was as capture in an OnMouseDown event of the TImaeg and BottomRight is the current X and Y coords from the OnMouseMove event.

So every time I move a mouse, I get "addtional" lines on my image.

Thanks

Answer 1

AFAIK, there's no mode like this with FMX... Moreover, what you draw on the canvas is not really saved (if you know how to directly save it, explain me in a comment): if you move your form outside your desktop, and bring it back, the canvas is cleaned...

So, to implement the graphex demo, you have to code it with others technics..

For example, use a TBitmap to store your real "image" and only use the canvas for the "preview"...

unit main;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Dialogs, FMX.Objects;

type
  TfrmMain = class(TForm)
    recBoard: TRectangle;
    btnCopy: TButton;
    Image1: TImage;
    procedure recBoardMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
    procedure recBoardMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
    procedure recBoardMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
    procedure recBoardMouseInOut(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure btnCopyClick(Sender: TObject);
    procedure FormDestroy(Sender: TObject);
  private
    { Private declarations }
    bmp: TBitmap;
    pFrom, pTo: TPointF;
  public
    { Public declarations }
  end;

var
  frmMain: TfrmMain;

implementation

{$R *.fmx}

procedure TfrmMain.btnCopyClick(Sender: TObject);
begin
  Image1.Bitmap.Assign(bmp);
end;

procedure TfrmMain.FormCreate(Sender: TObject);
begin
  pFrom := PointF(-1, -1);
  bmp := TBitmap.Create(Round(recBoard.Width), Round(recBoard.Height));
end;

procedure TfrmMain.FormDestroy(Sender: TObject);
begin
  bmp.Free;
end;

procedure TfrmMain.recBoardMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  if Button = TMouseButton.mbLeft then
  begin
    pFrom := PointF(X, Y);
    pTo   := PointF(X, Y);
  end;
end;

procedure TfrmMain.recBoardMouseInOut(Sender: TObject);
begin
  pFrom := PointF(-1, -1);
end;

procedure TfrmMain.recBoardMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
begin
  if ((pFrom.X <> -1) and (pFrom.X <> -1)) then
  with recBoard.Canvas do
  begin
    BeginScene;
    if ssLeft in Shift then
    begin
      FillRect(RectF(0, 0, bmp.Width, bmp.Height), 0, 0, [], 255);
      DrawBitmap(bmp, RectF(0, 0, bmp.Width, bmp.Height), RectF(0, 0, bmp.Width, bmp.Height), 255);
      Stroke.Color := claBlue;
      pTo := PointF(X, Y);
      DrawEllipse(RectF(pFrom.X, pFrom.Y, pTo.X, pTo.Y), 255);
    end;
    EndScene;
  end;
  Self.Caption := Format('(%0.0f;%0.0f)', [X, Y]);
end;

procedure TfrmMain.recBoardMouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  with bmp.Canvas do
  begin
    BeginScene;
    DrawEllipse(RectF(pFrom.X, pFrom.Y, pTo.X, pTo.Y), 255);
    EndScene;
  end;
  pFrom := PointF(-1, -1);
end;


















end.

Answer 2

What I ended up doing - based on insight from Whiler above, was storing the bitmap's state at the start of the "draw routine" (ie on mouse down), then on MouseMove, before I render the new Line (in this example), I restore the state and then draw the new line...

procedure TFMXDrawSurface.DrawSurfaceMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  FOrigin := PointF(X, Y);
  FMovePt := PointF(X, Y);
  FPrevPt := PointF(X, Y);
  FDrawing := True;
  FTempDrawbitmap.Assign(FDrawSurface.Bitmap);
end;

procedure TFMXDrawSurface.DrawSurfaceMouseMove(Sender: TObject; Shift: TShiftState; X, Y: Single);
begin
  if FDrawing then
  begin
    DrawShape(FOrigin, FMovePt);
    FMovePt := PointF(X, Y);
    DrawShape(FOrigin, FMovePt);
    FPrevPt := PointF(X, Y);
  end;
end;

procedure TFMXDrawSurface.DrawShape(TopLeft, BottomRight: TPointF);
var
  R: TRectF;
begin
  FDrawSurface.Bitmap.Canvas.BeginScene;
  try

    case FShapeToDraw of
      doLine:
      begin
        // restore canvas to initial state so we don't keep old movement data around
        R.TopLeft := PointF(0.0, 0.0);
        R.BottomRight := PointF(FDrawSurface.Width, FDrawSurface.Height);
        FDrawSurface.Bitmap.Canvas.DrawBitmap(FTempDrawBitmap, R, R, 100);
        FDrawSurface.Bitmap.Canvas.RestoreState(FDrawState);
        FDrawSurface.Bitmap.Canvas.DrawLine(PointF(TopLeft.X, TopLeft.Y), PointF(BottomRight.X, BottomRight.Y), 100);
      end;
    end;
  finally
    FDrawSurface.Bitmap.Canvas.EndScene;
    FDrawSurface.Bitmap.BitmapChanged;
  end;

end;

It works, but I don't know if it's the "right" way or not...