FireMonkey XE3 DrawArc and FillArc on the form and a TImage Bitmap

Posted by on in Blogs
I received an email from Marian Ionescu this morning asking me how to draw an Arc on a FireMonkey Timage Bitmap.  In FireMonkey XE2 there was a method, BitmapChanged, for a TBitmap that was refactored out in FireMonkey XE3.   To take a look, I build Delphi and C++Builder FireMonkey XE3 HD applications.  I placed a TImage and a TButton on my form.  Then I took some code from the FireMonkey XE3 help and Embarcadero Docwiki and wrote a simple program to draw and fill an arc on the Form's Canvas and also on the TImage's Bitmap.  Here is the Form declarations and the code for the Delphi and C++Builder examples (the source code projects are available on CodeCentral - see the links at the end of this blog article).

    // Delphi form declaration:

    TForm1 = class(TForm)
    Button1: TButton;
    Image1: TImage;
    procedure Button1Click(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    { Private declarations }
    { Public declarations }

    // C++ form declaration:

    class TForm2 : public TForm
    __published: // IDE-managed Components
    TImage *Image1;
    TButton *Button1;
    void __fastcall Button1Click(TObject *Sender);
    void __fastcall FormCreate(TObject *Sender);
    private: // User declarations
    TBitmap *MyBitmap;
    public: // User declarations
    __fastcall TForm2(TComponent* Owner);

    // Delphi event handling code

    procedure TForm1.Button1Click(Sender: TObject);
    Center, Radius: TPointF;
    Opacity, StartAngle, SweepAngle: Single;
    ArcColor,FillColor : TAlphaColor;
    Center.X := 50;
    Center.Y := 60;
    Radius.X := 200;
    Radius.Y := 220;
    Opacity := 0.5;
    StartAngle := 100;
    SweepAngle := -90;
    ArcColor := claGreen;
    FillColor := claYellow;

    // draw on the TImage.Bitmap


    Image1.Bitmap.Canvas.Stroke.Color := ArcColor;
    Image1.Bitmap.Canvas.Fill.Color := FillColor;

    // draw the arc
    Image1.Bitmap.Canvas.DrawArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);

    // fill the arc
    Image1.Bitmap.Canvas.FillArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);


    // draw on the form


    Canvas.Stroke.Color := ArcColor;
    Canvas.Fill.Color := FillColor;

    // draw the arc
    Canvas.DrawArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);

    // fill the arc
    Canvas.FillArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);



    procedure TForm1.FormCreate(Sender: TObject);
    // create the bitmap in the TImage
    Image1.Bitmap.Create(Round(Image1.Width), Round(Image1.Height));

    // C++ event handling code

    void __fastcall TForm2::Button1Click(TObject *Sender)
    TPointF Center;
    Center.X = 50;
    Center.Y = 60;
    TPointF Radius;
    Radius.X = 200;
    Radius.Y = 220;
    float Opacity = 0.5;
    float StartAngle = 100.0;
    float SweepAngle = -90.0;
    TAlphaColor ArcColor = claGreen;
    TAlphaColor FillColor = claYellow;

    // draw on the TImage->Bitmap


    Image1->Bitmap->Canvas->Stroke->Color = ArcColor;
    Image1->Bitmap->Canvas->Fill->Color = FillColor;

    // draw the arc
    Image1->Bitmap->Canvas->DrawArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);

    // fill the arc
    Image1->Bitmap->Canvas->FillArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);


    // draw on the form


    Canvas->Stroke->Color = ArcColor;
    Canvas->Fill->Color = FillColor;

    // draw the arc
    Canvas->DrawArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);

    // fill the arc
    Canvas->FillArc(Center, Radius, StartAngle,
    SweepAngle, Opacity);


    void __fastcall TForm2::FormCreate(TObject *Sender)
    // create the bitmap in the TImage
    TBitmap *MyBitmap = new TBitmap(Image1->Width, Image1->Height);
    Image1->Bitmap = MyBitmap;

After clicking on the TButton, you will see the following displayed on the form:

The Code for both projects is available on CodeCentral at:

Delphi project -

C++Builder project -

Gold User, Rank: 1, Points: 2466
David Intersimone (known to many as David I.) is a passionate and innovative software industry veteran-often referred to as a developer icon-who extols and educates the world on Embarcadero developer tools. He shares his visions as an active member of the industry speaking circuit and is tapped as an expert source by the media. He is a long-standing champion of architects, developers and database professionals and works to ensure that their needs are folded into Embarcadero's strategic product plans. David holds a bachelor's degree in computer science from California Polytechnic State University at San Luis Obispo, California.


  • Guest
    Gary Olson Friday, 15 February 2013

    Hi David,

    For some reason the left arc is not being drawn. I downloaded
    the code and ran as is. I noticed if you push the button twice the
    redraw intensifies the color yellow slightly.


  • Guest
    Tom Marchione Tuesday, 2 April 2013

    Thanks for the post. I was trying to build a bitmap in code the other night to display on a sphere, and it took awhile to realize that the BitmapChanged method, referenced in the docs, doesn't exist anymore in FM2. But I got it working. Very cool. Very impressed with the 3D stuff so far.

    On a separate note, I truly hope all this stuff works as well on the mobile platform, as I already have plans for a number of simple 3D apps. I'm counting on you guys!

  • Guest
    shakesear Monday, 8 April 2013

    draw on form canvas does not work for me, the left arc is not displayed.
    the reason I guess is the form get refreshed after draw on it... so .... Yes, I can assign a onPaint and draw something there, that works...

  • Guest
    Igor Thursday, 16 May 2013

    Doesn't work for me. I've downloaded code, compiled, pressed button and nothing... nothing happend. Here is screenshot of Delphi's about window:

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: