Lazarus

Programming => Graphics and Multimedia => Graphics => Topic started by: PeterX on October 17, 2021, 10:07:59 am

Title: Drawing on Panel
Post by: PeterX on October 17, 2021, 10:07:59 am

Drawing on Panel .. asked several times again and again, yes ..

Why not ? It's a decendent of a TWinControl.


I solved it - for a upcoming component - by overwriting procedure Paint


Any comments ?
Is this the wrong way to go ?

Title: Re: Drawing on Panel
Post by: PeterX on October 17, 2021, 11:04:51 am

.. now using bgrabitmap-11.4 from

https://github.com/bgrabitmap/bgrabitmap/releases

Title: Re: Drawing on Panel
Post by: circular on October 17, 2021, 11:38:45 am

Yes, overriding Paint is the way.  :)

I wonder about always calling the inherited Paint, in case something in the base control is done. But that's probably unnecessary.

Using CanvasBGRA is also the way.  :)

Title: Re: Drawing on Panel
Post by: Okoba on October 17, 2021, 11:49:49 am

Your way is correct. As Circular mentioned, using CanvasBGRA seems a good idea, or even Canvas2d.
One other note is that if you are trying to be more efficient or using this way for big controls, you can create and destroy the Bitmap with controls Create and destroy, and fill it with transparent pixels every time. This way is more efficient as you do not make and allocate memory for each refresh of the control.

Title: Re: Drawing on Panel
Post by: PeterX on October 17, 2021, 12:35:24 pm

Quote from: circular on October 17, 2021, 11:38:45 am

I wonder about always calling the inherited Paint, in case something in the base control is done. But that's probably unnecessary.

Yes, sometimes "hidden" things happen in the overwritten Component / procedure ..  :o

Title: Re: Drawing on Panel
Post by: PeterX on October 17, 2021, 12:43:48 pm

Quote from: Okoba on October 17, 2021, 11:49:49 am

Your way is correct. As Circular mentioned, using CanvasBGRA seems a good idea, or even Canvas2d.

I've never used BGRA, just discovered it today.
What does Canvas2D do different to CanvasBGRA ?

Quote from: Okoba on October 17, 2021, 11:49:49 am

One other note is that if you are trying to be more efficient or using this way for big controls, you can create and destroy the Bitmap with controls Create and destroy, and fill it with transparent pixels every time. This way is more efficient as you do not make and allocate memory for each refresh of the control.

Yes, I also thought "why is the bitmap always created and destroyed ?"
But I picked it up from some example code, indeed should be done more efficiently,
and Bitmap then must be resized "OnResize" of the TPanel
( .. or whatever Component I use as basis component)

What is "transparent pixels" in BGRA ?

Title: Re: Drawing on Panel
Post by: PeterX on October 17, 2021, 01:03:22 pm

The text, drawn by Canvas.TextOut() , looks better than the one drawn by BGRA ..
( the upper one is from BGRA, the lower one from Lazarus Canvas )

Probably a Font Settings issue only,
or because it's different size, but ..

No problem to finally draw the text onto the Canvas, after drawing the Bitmap  ..

Title: Re: Drawing on Panel
Post by: winni on October 17, 2021, 01:03:40 pm

Quote from: PeterX on October 17, 2021, 12:43:48 pm

What does Canvas2D do different to CanvasBGRA ?

Hi

Have a look at

https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_14 (https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_14)

Quote

What is "transparent pixels" in BGRA ?

Code: Pascal  [Select][+][-]

1. TBGRAPixel = packed record
2.     red, green, blue, alpha: byte;
3.     end;

alpha is the amount of transparency.
255 means it is opaque
0 means total transparency

Winni

Title: Re: Drawing on Panel
Post by: PeterX on October 17, 2021, 01:11:46 pm

Quote from: winni on October 17, 2021, 01:03:40 pm

Hi

Have a look at

https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_14 (https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_14)

Thanks a lot for the Link !   8)

I have to get deeper into it after I managed to create
the first working, basic, CustomComponent for my app ..

Title: Re: Drawing on Panel
Post by: circular on October 17, 2021, 03:08:15 pm

Quote from: PeterX on October 17, 2021, 01:03:22 pm

The text, drawn by Canvas.TextOut() , looks better than the one drawn by BGRA ..
( the upper one is from BGRA, the lower one from Lazarus Canvas )

The problem comes from the fact that the bitmap is not cleared with an opaque color.

You use the function Rectangle to do that, but that only draw the edges. You can use FillRectangle instead. Or just Fill to fill everything.

Title: Re: Drawing on Panel
Post by: PeterX on October 17, 2021, 07:07:24 pm

Quote from: circular on October 17, 2021, 03:08:15 pm

You use the function Rectangle to do that, but that only draw the edges. You can use FillRectangle instead. Or just Fill to fill everything.

With Brush.Color:= xxx   procedure Rectangle() also fills the Rect.


Now I tried with yellow .. and

Code: Pascal  [Select][+][-]

1.         // Draws the background
2.         GUIBitmap.CanvasBGRA.Pen.Color:= clBlack;
3.         GUIBitmap.CanvasBGRA.Brush.Color:= clYellow;  // clWhite;
4.         GUIBitmap.CanvasBGRA.Rectangle( 0, 0, Width, Height);
5.         //GUIBitmap.CanvasBGRA.FloodFill( 0, 0);
6.  

but no difference, from my point of view, for the example text with BGRA.

( Floodfill does the same, but - no question - without the black border .. )

Title: Re: Drawing on Panel
Post by: circular on October 21, 2021, 09:01:59 am

Oh yeah I got confused, I thought about the Rectangle function outside of CanvasBGRA like GUIBitmap.Rectangle, but indeed inside CanvasBGRA it can fill.

Maybe Brush.Style is not set to bsSolid and thus shape is not filled.

In your second screenshot, the result is better, font is rendered properly. So actually filling makes a difference.

As said before you can do GUIBitmap.Fill(clYellow) for example.

Now, the font appears bolder, it seems there isn't ClearType effect. I suggest you try to play with the Font.Quality property, for example setting it to fqFineClearType.

Title: Re: Drawing on Panel
Post by: PeterX on October 21, 2021, 08:59:50 pm

Quote from: circular on October 21, 2021, 09:01:59 am

.. I suggest you try to play with the Font.Quality property, for example setting it to fqFineClearType.

Instead of always redrawing the whole Bitmap in Paint()
I will draw my "background" once on Create()  ( and on resize if required .. )
and just map this static Bitmap in Paint().  This saves CPU time.

As the shown Text changes and needs to be redrawn regulary
I can draw it with the default Canvas TextOut().
The advantage for me is, the Text appearance / look
is exactly like in any other Lazarus Component.