[SOLVED] Transparent TBGRABitmap copied/assigned to TImage loses transparency

[r.lukasiak]

Hi everyone!

I need a semi-transparent dynamically generated image, I create it on TBGRABitmap but when I assign it to TImage, the Image has a black background.
Googling led me to this post https://forum.lazarus.freepascal.org/index.php/topic,55300.msg411319.html#msg411319. According to the author, the solution worked but in my case it didn't. I tested it on QT5 (Linux) and Windows, in both cases exactly the same result.

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

1. var
2.   bubble: Timage;
3.   bmp: TBGRABitmap;
4.   TBit: TBitmap;
5.   cc: integer;
6. begin
7.   cc:=ChatsTab.ControlCount;
8.   bubble:=Timage.Create(Self);
9.   bubble.Parent:=ChatsTab;
10.   bubble.Width:=ChatTab.ClientWidth div 2;
11.   bubble.Height:=60;
12.   bubble.Left:=(ChatsTab.ClientWidth-bubble.Width) div 2;
13.   bubble.top:=10+cc*60;
14.   bubble.Picture.Bitmap.MaskHandle:=0;              
15.   bubble.Picture.Bitmap.Transparent := True;
16.   bubble.Picture.Bitmap.TransparentColor := $000000;
17.  
18.   TBit := TBitmap.Create;
19.   TBit.PixelFormat := pf24bit;
20.   TBit.Width := bubble.Width;
21.   TBit.Height := bubble.Height;
22.  
23.   bmp:=TBGRABitmap.Create(bubble.Width,bubble.Height,BGRA(0,0,0,0));
24.   bmp.draw(TBit.Canvas, 0,0,true);
25.   bmp.RoundRect(10,10,bubble.Width-10,bubble.Height-10,15,15,$00FF9900,BGRA(128,128,128,255),dmDrawWithTransparency,8192);
26.  
27.   bubble.picture.Assign(bmp);
28.  

Any clue?

As a matter of fact I don't need specifically TImage, I need any way to display what I create on TBGRABitmap. Maybe someone can recommend any other component?

thanks in advance!

[circular]

Hi!

To be sure to have transparency, I suggest to use TBGRAGraphicControl of BGRAControls. In the redraw event, draw the content as you like using the Bitmap: TBGRABitmap parameter.

It also takes into account Retina scaling on MacOS (with BitmapAutoscale property).

[r.lukasiak]

thank you very much for you answer.
I'd tried TBGRAGraphicControl but I can't get it to work, I don't know what I'm doing wrong. Anyway it requires painting OnRedraw which would complicate my code a little bit.
I've just found TBDRoundedImage, it works as needed, I just needed to switch rounding off.I just create it dynamically, draw what I need using TBGRABitmap and assign it to TBDRoundedImage as I tried with TImage.

thanks!

[circular]

I understand you're used to draw outside of the OnPaint event. Though in this case, I don't really see why this would be complicated. You can store some info on how to draw things in variables for example. Maybe you can find some help on how to do that.

But of course you're free to find the way it suits you.

[r.lukasiak]

well, I'm used to drawing in OnDraw but in my current case it'd be more difficult, every Image depends on some external data and they are created dynamically
And I didn't actually figure out how to draw on TBGRAGraphicControl, I tried a couple of days ago and then again today (after you mentioned it) but I didn't succeed. Maybe some sample code or some instructions? I'd really appreciate it.

thx

[circular]

One approach would be to create a TBGRABitmap at the beginning (when the form is created for example). Then each time you need to draw, you draw in this bitmap. And in the OnRedraw event of TBGRAGraphicControl copy the bitmap.

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

1. procedure TForm1.FormCreate(Sender: TObject);
2. begin
3.   myBuffer := TBGRABitmap.Create(BGRAGraphicControl1.Width, BGRAGraphicControl1.Height);
4. end;
5.  
6. procedure TForm1.FormDestroy(Sender: TObject);
7. begin
8.   myBuffer.Free;
9. end;
10.  
11. procedure TForm1.BGRAGraphicControl1Redraw(Sender: TObject; Bitmap: TBGRABitmap);
12. begin
13.   Bitmap.PutImage(0, 0, myBuffer, dmSet);
14. end;
15.  
16. procedure TForm1.BGRAGraphicControl1MouseDown(Sender: TObject;
17.   Button: TMouseButton; Shift: TShiftState; X, Y: Integer);
18. begin
19.   myBuffer.FillEllipseAntialias(X, Y, 6, 6, clWindowText);
20.   BGRAGraphicControl1.DiscardBitmap;
21. end;

myBuffer is a variable declared in the class(TForm).

If the BGRAGraphicControl1 size changes, you need to determine how to change the size of myBuffer or if you want to stretch it when you draw it.

[r.lukasiak]

thank you very much! it works perfectly. I will use this approach, the RoundedImage is, for some reason, generating garbage when I use .TextOut function (I will create a separate post on it, it seems to be a bug).

once again, thanks for the example!

[circular]

You're welcome. 

Sure, feel free to make a post if there is another issue or question.