[Solved]How to update a transparent Timage
lazarus / 39-Graphics

----------------------------------------------------------------------
PiMike · 2019-04-22 11:29

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

----------------------------------------------------------------------
lucamar · 2019-04-22 20:07

For gods sake, read this: 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.

----------------------------------------------------------------------
PiMike · 2019-04-23 06:01

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][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i   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.

----------------------------------------------------------------------
lucamar · 2019-04-23 12:54

Quote from: PiMike on April 23, 2019, 08:01:25 amBut 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