[SOLVED] Transparent TBGRABitmap copied/assigned to TImage loses
transparency
lazarus / 39-Graphics

----------------------------------------------------------------------
r.lukasiak · 2022-06-03 03:52

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/inde
x.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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i var 
bubble: Timage;  bmp: TBGRABitmap;  TBit: TBitmap;  cc: integer;begin 
cc:=ChatsTab.ControlCount;  bubble:=Timage.Create(Self); 
bubble.Parent:=ChatsTab;  bubble.Width:=ChatTab.ClientWidth div 2; 
bubble.Height:=60;  bubble.Left:=(ChatsTab.ClientWidth-bubble.Width)
div 2;  bubble.top:=10+cc*60;  bubble.Picture.Bitmap.MaskHandle:=0;  
             bubble.Picture.Bitmap.Transparent := True; 
bubble.Picture.Bitmap.TransparentColor := $000000;   TBit :=
TBitmap.Create;  TBit.PixelFormat := pf24bit;  TBit.Width :=
bubble.Width;  TBit.Height := bubble.Height;  
bmp:=TBGRABitmap.Create(bubble.Width,bubble.Height,BGRA(0,0,0,0)); 
bmp.draw(TBit.Canvas, 0,0,true);  bmp.RoundRect(10,10,bubble.Width-
10,bubble.Height-
10,15,15,$00FF9900,BGRA(128,128,128,255),dmDrawWithTransparency,8192);
 bubble.picture.Assign(bmp); 
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 · 2022-06-03 05:31

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 · 2022-06-03 16:20

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 · 2022-06-03 16:46

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 · 2022-06-03 20:10

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 · 2022-06-04 06:18

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.FormCreate(Sender: TObject);begin  myBuffer :=
TBGRABitmap.Create(BGRAGraphicControl1.Width,
BGRAGraphicControl1.Height);end; procedure TForm1.FormDestroy(Sender:
TObject);begin  myBuffer.Free;end; procedure
TForm1.BGRAGraphicControl1Redraw(Sender: TObject; Bitmap:
TBGRABitmap);begin  Bitmap.PutImage(0, 0, myBuffer,
dmSet);end; procedure TForm1.BGRAGraphicControl1MouseDown(Sender:
TObject;  Button: TMouseButton; Shift: TShiftState; X, Y:
Integer);begin  myBuffer.FillEllipseAntialias(X, Y, 6, 6,
clWindowText);  BGRAGraphicControl1.DiscardBitmap;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 · 2022-06-06 21:48

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 · 2022-06-06 21:49

You're welcome. 

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