Writting text on transparent image from ImageList
lazarus / 39-Graphics

----------------------------------------------------------------------
krzynio · 2019-05-21 10:47

What I wanted to do is to copy an image from image list to bitmap b2,
next write text on this b2 bitmap, then paste it to bitmap of the
image.
Image must be transparent.
When I copy bitmap from TImageList to bitmap b2 and copy it to bitmap
b the result is correct.
But when I copy image from the ImageList to bitmap b2 then write some
text on it and next copy b2 to b1 then in place of written text a
transparent rectangle is displayed. I save the image of b2 into the
file and I see that text on b2 is correct. The bug seems to be in Draw
function which copies the image from b2 into b or maybe I something in
wrong way.

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        
Image.Transparent := True;        b := Image.Picture.Bitmap;       
b.PixelFormat := pf32bit;        b.Transparent := True;       
b.TransparentColor := clFuchsia;        b.TransparentMode := tmFixed; 
      b.Canvas.CopyMode := cmSrcCopy;        b.Canvas.Brush.Style :=
bsSolid;        b.Canvas.Brush.Color := b.TransparentColor;       
b.Canvas.FillRect(0,0,w,h);         b2 := TBitmap.Create;       
b2.PixelFormat := pf32bit;        dm.il64x50.GetBitmap(1, b2);       
b2.Canvas.Font.Size := 8;        b2.Canvas.Brush.Color := clFuchsia; 
     b2.Canvas.Brush.Style := bsSolid;        b2.Canvas.Font.Style :=
[];        b2.Canvas.Font.Color := clBlack;       
b2.Canvas.TextOut(10,40, 'XXXXXXX');       
b2.SaveToFile('d:\xx.bmp'); // here transparent text is visible      
 b.Canvas.Draw(0,(w-64) div 2, b2); // here the text is not visible,
just empty rectangle is visible in place of the text        b2.Free; 
Lazarus 2.1 (svn) on Windows 10 1809 64-bit

----------------------------------------------------------------------
Mr.Madguy · 2019-05-23 10:00

Have you tried this?
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
b2.Canvas.Font.Color := clBlack or $ff000000; But anyway. As I
remember pure Canvas doesn't fully support transparency. I was asked
in some thread, if it was possible to modify semi-transparent icon.
And, as I remember, exporting it to DIB, modifying it and then
importing it back - was the only working solution.

Another reason: Canvas doesn't support semi-transparency at all. It
uses 1bpp mask bitmap in order to emulate transparency. And this
bitmap is generated, only when Transparent or TransparentColor are
modified. So, if you modify bitmap after this, transparency can stay
unmodified. But I'm not sure about it. I'll need to look into code in
order to confirm it.

----------------------------------------------------------------------
krzynio · 2019-05-23 10:11

Thank you. I tried a minute ago. Doesn't work.
I can write when I replace
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
dm.il64x50.GetBitmap(0, b3);with
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
b3.LoadFromFile('comp.bmp');but after this action I'm loosing
transparency.

----------------------------------------------------------------------
flowCRANE · 2019-05-23 14:24

@krzynio: the PixelFormat property does not allow you to manipulate
the depth of the bitmap.

Try with the TFPMemoryImage, TFPImageCanvas and TFPWriterBMP classes.
An example of using these classes can be found in my thread.
Admittedly, it concerns painting a bitmap and exporting it to a 4-bit
form, but it's always a beginning. More informations you can find in
this article.

----------------------------------------------------------------------
lainz · 2019-05-25 01:31

Use bgrabitmap, it works fine and is easy to use.

----------------------------------------------------------------------
krzynio · 2019-05-28 11:25

Thank you!

BGRABitmap works really fine. The only inconvenience is that the text
is written with anti-alias and it has a little outline in color
similar to transparent color thus. Can I turn off witting with anti-
alias on BGRABitmap?
Adding 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
b2.CanvasBGRA.AntialiasingMode :=
amOff;b2.CanvasBGRA.Font.Antialiasing := False;    seems to be not
working. Text remains smooth.

----------------------------------------------------------------------
circular · 2019-05-28 22:36

Antialiasing property ensures fine antialiasing, but the system font
renderer often does some antialiasing anyway.

One could try and remove antialiasing, though that would not be very
beautiful. Also you can have an actual transparent background with
BGRABitmap.

If your original image has fuchsia to represent the transparent color,
you can do
Code: [Select]    Bitmap.Replace(CSSFuchsia, BGRAPixelTransparent);and
then draw the text with antialiasing on top of it.

----------------------------------------------------------------------
krzynio · 2019-05-29 05:40

Thank you works like a charm!
Here is my code for the others.
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
tOb[i].im.Transparent := True;b :=
tOb[i].im.Picture.Bitmap;b.PixelFormat := pf32bit;b.TransparentColor
:= clFuchsia;b.Transparent := True;b.TransparentMode :=
tmFixed;b.Canvas.CopyMode := cmSrcCopy;b.Canvas.Brush.Style :=
bsSolid;b.Canvas.Brush.Color := b.TransparentColor;b.Canvas.FillRect(0
,0,w,h);//dm.il64x50.GetBitmap(1, b2);b2 :=
TBGRABitmap.Create('comp80x64.bmp');b2.ReplaceColor(CSSFuchsia,
BGRAPixelTransparent); // turn off anti-aliasing for
fontsb2.CanvasBGRA.Font.Height := -10;fh :=
b2.Height-(b2.CanvasBGRA.TextHeight('Fj')-2);b2.CanvasBGRA.Font.Style
:= [fsBold];b2.CanvasBGRA.Font.Color :=
clBlack;b2.CanvasBGRA.Brush.Style :=
bsClear;b2.CanvasBGRA.TextOut(CenterX(0, w, tOb[i].NAZMASZ,
b2.Canvas), fh, tOb[i].NAZMASZ);b.Canvas.Draw(0,0,b2.Bitmap);b2.Free;