Lazarus

Programming => Graphics and Multimedia => Graphics => Topic started by: PiMike on April 22, 2019, 01:29:28 pm

Title: [Solved]How to update a transparent Timage
Post by: PiMike on April 22, 2019, 01:29:28 pm

nothing happens when I attempt to textout to a transparent image

I am using Lazarus.
I have put 2 images on a form and synchronized their positions and sizes.
I can textout to both images, and after I made the ontop image transparent I can see the combined content of both images.
I can add further text to the bottom image and see it, but I can't see text I try to add to the transparent image.
I used the following code to make the top image transparent

image2.picture.Bitmap.TransparentColor:=clWhite;
image2.transparent:=true;

I guess I need to play with the image bitmap, but I can't find a solution that is not using other software.

Can someone help me with this please?

the source of my test program is below.

**********************************************************************************************

unit Unit1;

{$mode objfpc}{$H+}

interface

uses
Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, ExtCtrls,
StdCtrls, Menus;

type

{ TForm1 }

TForm1 = class(TForm)
BtnText1A: TButton;
BtnText1B: TButton;
BtnText2A: TButton;
BtnClear1: TButton;
BtnClear2: TButton;
Image1: TImage;
Image2: TImage;
procedure BtnClear1Click(Sender: TObject);
procedure BtnClear2Click(Sender: TObject);
procedure BtnText1AClick(Sender: TObject);
procedure BtnText1BClick(Sender: TObject);
procedure BtnText2AClick(Sender: TObject);
procedure FormActivate(Sender: TObject);
private
{ private declarations }
public
{ public declarations }
end;

var
Form1: TForm1;
gx0,gy0,gx9,gy9:integer;

implementation

{$R *.lfm}

{ TForm1 }

procedure TForm1.FormActivate(Sender: TObject);
begin
gx0:=image1.left; gy0:=image1.top; gx9:=image1.width; gy9:=image1.height;
with image1.canvas do begin
brush.Color:=clwhite;
rectangle(gx0,gy0,gx9,gy9);
textout(3,20,'image1 - Initial content');
end;
with image2 do begin left:=gx0; top:=gy0; width:=gx9; height:=gy9; end;
with image2.canvas do begin
brush.Color:=clwhite;
rectangle(gx0,gy0,gx9,gy9);
textout(300,20,'image2 - Initial content');
end;
image2.picture.Bitmap.TransparentColor:=clWhite;
image2.transparent:=true;
end;

procedure TForm1.BtnText1AClick(Sender: TObject);
begin
with image1.canvas do textout(3,40,'image1 - textout1A');
end;

procedure TForm1.BtnText1BClick(Sender: TObject);
begin
with image1.canvas do textout(3,60,'image1 - textout1B');
end;

procedure TForm1.BtnClear1Click(Sender: TObject);
begin
with image1.canvas do begin
brush.Color:=clwhite;
rectangle(gx0,gy0,gx9,gy9);
end;
end;

procedure TForm1.BtnText2AClick(Sender: TObject); // this fails
begin
with image2.canvas do textout(3,40,'image2 - textout2A');
end;

procedure TForm1.BtnClear2Click(Sender: TObject);
begin
with image2.canvas do begin
brush.Color:=clwhite;
rectangle(gx0,gy0,gx9,gy9);
end;
end;

end.

************************************************************************************************

object Form1: TForm1
Left = 339
Height = 500
Top = 130
Width = 836
Caption = 'Form1'
ClientHeight = 500
ClientWidth = 836
OnActivate = FormActivate
LCLVersion = '1.6.4.0'
object Image1: TImage
Left = 0
Height = 280
Top = 0
Width = 752
end
object Image2: TImage
Left = 145
Height = 90
Top = 102
Width = 90
end
object BtnText1A: TButton
Left = 11
Height = 25
Top = 303
Width = 75
Caption = 'Text1A'
OnClick = BtnText1AClick
TabOrder = 0
end
object BtnText1B: TButton
Left = 10
Height = 25
Top = 339
Width = 75
Caption = 'Text1B'
OnClick = BtnText1BClick
TabOrder = 1
end
object BtnText2A: TButton
Left = 128
Height = 25
Top = 305
Width = 75
Caption = 'Text2A'
OnClick = BtnText2AClick
TabOrder = 2
end
object BtnClear1: TButton
Left = 11
Height = 25
Top = 374
Width = 75
Caption = 'Clear Image1'
OnClick = BtnClear1Click
TabOrder = 3
end
object BtnClear2: TButton
Left = 128
Height = 25
Top = 374
Width = 75
Caption = 'Clear Image2'
OnClick = BtnClear2Click
TabOrder = 4
end
end

Title: Re: How to update a transparent Timage
Post by: lucamar on April 22, 2019, 10:07:41 pm

For gods sake, read this: Forum: Use code tags (http://wiki.freepascal.org/Forum#Use_code_tags). Also, for a full project add a zip of the project's files (*.lpi, *.lpr, *.lfm, *.pas and, if needed, data files) rather than dumping them in the post

As for your problem: as a first approach, and just in case, make absolutely sure you set your Pen.Color to anythyng other than white. I.e. whenever you set:

Code: [Select]

    brush.Color:=clwhite;

add:

Code: [Select]

    brush.Color:=clwhite;
    Pen.Color:=clBlack; {or anything other that is no clWhite}

Also, note that if your PixelFormat is 32 bits you may have to fiddle with the color's Alpha byte regardless of what TransparentColor contains.

Title: Re: How to update a transparent Timage
Post by: PiMike on April 23, 2019, 08:01:25 am

Thanks for the prompt reply/assistance Iucama - I'll try to conform with the protocols in future.
The problem is solved.
No need to change the Alpha byte, just needed to change the transparentColor away from clWhite to clYellow and back again to clWhite.
Then all entries on both images became visible, regardless of whether or not the top image entries were done before or after the image was made transparent.

Code: Pascal [Select]

  I think I have got the tags thing.
 

I am not going to bother with the 4 file attachments this time.
I will try to flag the original post as Solved.
But as it is a mess I will delete it in a few days time.
Thanks again.

Title: Re: How to update a transparent Timage
Post by: lucamar on April 23, 2019, 02:54:46 pm

Quote from: PiMike on April 23, 2019, 08:01:25 am

But as it is a mess I will delete it in a few days time.

No, don't delete it. It may help someone else in the future.

And sorry if I did sound harsh; it was not my intention but I forgot to add a :)