Drawing grid lines on a transparent image
lazarus / 39-Graphics

----------------------------------------------------------------------
Tomi · 2024-04-24 14:15

Hello!

I would like draw some lines for a grid in my program onto a TImage,
but my code always shows a black background under the grid.
As I did so far on the based on my modest knowledge and searching on
the internet, I draw a TImage on a ScrollBox and make an other TImage
on this and a bitmap onto this with the grid lines.
Here is my code:

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.gridButtonMouseUp(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);var bm: TBitmap;  hlines,vlines:
word;begin  if showgrid=true then  begin     showgrid:=false;     if
gridon=true then     begin       FreeAndNil(gridimage);     
 gridon:=false;     end;  end  else  begin    showgrid:=true;    if
gridon=false then    begin     
gridimage:=TImage.Create(terrainScrBox);     
gridimage.Parent:=terrainScrBox;      gridimage.Left:=0;     
gridimage.Top:=0;      gridimage.width:=terrainCanvas.width;
//terrainCanvas is a TImage component.     
gridimage.height:=terrainCanvas.Height;     
gridimage.Transparent:=true;      bm:=TBitmap.Create;     
bm.width:=terrainCanvas.width;      bm.height:=terrainCanvas.Height; 
   bm.PixelFormat:=pf32Bit;      bm.Transparent:=true;     
vlines:=tilewidth;      hlines:=tileheight;     
bm.canvas.pen.color:=clBlue;      while vlines<terrainCanvas.width do 
    begin         
bm.canvas.line(vlines,0,vlines,terrainCanvas.height);         
inc(vlines,tilewidth);      end;      while
hlines<terrainCanvas.height do      begin         
bm.canvas.line(0,hlines,terrainCanvas.width,hlines);         
inc(hlines,tileheight);      end;      gridimage.picture.graphic:=bm; 
    FreeAndNil(bm);    end;    gridon:=true;  end;end;
How can I make a transparent image with draw on it to show only its
draw onto an other image? Is it possible?

----------------------------------------------------------------------
KodeZwerg · 2024-04-24 14:30

When needed, why not draw the lines to original image on the fly?

----------------------------------------------------------------------
KodeZwerg · 2024-04-24 15:42

Here an example:
(I have assigned in designer an image to the TImage control.)
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 unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs, ExtCtrls, StdCtrls; type   { TForm1 }  
TForm1 = class(TForm)    CheckBox1: TCheckBox;    Image1: TImage;   
Panel1: TPanel;    procedure CheckBox1Change(Sender: TObject);   
procedure FormCreate(Sender: TObject);  strict private    FBMP:
TBitmap;  private  public   end; var  Form1:
TForm1; implementation {$R *.lfm} { TForm1 } procedure
TForm1.FormCreate(Sender: TObject);begin  FBMP := TBitmap.Create; 
FBMP.Assign(Image1.Picture.Bitmap);end; procedure
TForm1.CheckBox1Change(Sender: TObject);var  i: Integer;  GridSize:
Integer;  LBMP: TBitmap;  X, Y: Integer;begin  GridSize := 50;  LBMP
:= TBitmap.Create;  try    LBMP.PixelFormat := pf32bit;    LBMP.Width
:= Image1.ClientRect.Width;    LBMP.Height :=
Image1.ClientRect.Height;    if CheckBox1.Checked then      begin    
  X := 0;        Y := 0;        LBMP.Assign(Image1.Picture.Bitmap);  
    LBMP.Canvas.Brush.Color := clBlack;        LBMP.Canvas.Brush.Style
:= bsSolid;        for i := 0 to GridSize do          if ((X +
GridSize) < LBMP.Width) then            begin              Inc(X,
GridSize);              LBMP.Canvas.FillRect(X,
LBMP.Canvas.ClipRect.Top, Succ(X), LBMP.Canvas.ClipRect.Bottom);     
     end;        for i := 0 to GridSize do          if ((Y + GridSize)
< LBMP.Height) then            begin              Inc(Y, GridSize);  
          LBMP.Canvas.FillRect(LBMP.Canvas.ClipRect.Left, Y,
LBMP.Canvas.ClipRect.Right, Succ(Y));            end;      end   
else      LBMP.Assign(FBMP);    Image1.Picture.Bitmap.Assign(LBMP); 
finally    LBMP.Free;  end;end; end.If you can follow my code, FBMP
keeps the original unmodified version of your image, the checkbox
control if there are gridlines drawn over or if it replace current
with original.

----------------------------------------------------------------------
Tomi · 2024-04-26 14:35

Thanks, KodeZwerg; I will try to do it based on your code. I thought
exactly like what is in your attached picture.

----------------------------------------------------------------------
KodeZwerg · 2024-04-26 16:35

Sure thing!
Ps: In my version I did used a panel, set its color to black, and put
a TImage in, since my source image was transparent and somehow the
chosen black was not displayed as black. Yeah sometime I need to cheat
a little
The variable GridSize is to set the number of pixels, if you want two
different sizes to get a rectangle instead of a cube just write me
If you need a demo project, prepare one in your design and let somehow
an option for me to switch grid visible status.

----------------------------------------------------------------------
Tomi · 2024-04-27 13:04

I understand your example code, KodeZwerg, but what if I would like
save the source image into a file without the grid lines?
And why doesn't my modified code show anything?
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 bm:=TBitmap
.Create;bm.PixelFormat:=pf32Bit;bm.width:=terrainCanvas.width;
//terrainCanvas is a TImage.bm.height:=terrainCanvas.height;bm.Assign(
terrainCanvas.picture.bitmap);vlines:=tilewidth;hlines:=tileheight;bm.
canvas.pen.color:=clBlue;while vlines<terrainCanvas.width dobegin    
    bm.canvas.line(vlines,0,vlines,terrainCanvas.height);         
inc(vlines,tilewidth);end;while hlines<terrainCanvas.height dobegin  
      bm.canvas.line(0,hlines,terrainCanvas.width,hlines);          in
c(hlines,tileheight);end;terrainCanvas.Picture.Bitmap.Assign(bm);FreeA
ndNil(bm);

----------------------------------------------------------------------
KodeZwerg · 2024-04-27 13:14

Quote from: Tomi on April 27, 2024, 03:04:00 pmAnd why doesn't my
modified code show anything?Because you use different methods that
needs different handling.
Quote from: KodeZwerg on April 24, 2024, 05:42:19 pmCode: Pascal
 [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i           
  LBMP.Canvas.FillRect(X, LBMP.Canvas.ClipRect.Top, Succ(X),
LBMP.Canvas.ClipRect.Bottom);Quote from: Tomi on April 27, 2024,
03:04:00 pmCode: Pascal  [Select][+][-]window.onload = function(){var
x1 = document.getElementById("main_content_section"); if (x1) { var x
= document.getElementsByClassName("geshi");for (var i = 0; i         
bm.canvas.line(vlines,0,vlines,terrainCanvas.height);As far as I
remember, "Line" needs a prior "Move".

//edit
and another problem in your code is, you do refer to TImage within
paint methods, thats a no-go, refer only to your bitmap dimensions
since the size of a TImage is in many cases not the size of the Image
that it hold.
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
bm.width:=terrainCanvas.width; //terrainCanvas is a
TImage.bm.height:=terrainCanvas.height;both assignments not needed
since right after you actual do Assign() what will set the correct
dimension
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 while
vlines<terrainCanvas.width doyou refer here also wrong, it must be
"bm.Width"
and so on

----------------------------------------------------------------------
wp · 2024-04-27 13:39

The attached demo uses the OnPaint event to draw the grid lines onto
the Canvas of the TImage. As a rule of thumb: Try to execute drawing
commands only during the paint cycle, ie. in the Paint method or the
OnPaint event (or methods called from these). TImage has a buffer
bitmap which kind of relaxes this rule, but still I would not swear
that it always works as desired if painting occurs outside OnPaint. On
other controls, such as TForm, TPanel or TPaintbox, it is a MUST to
execute drawing commands only in OnPaint.

My code draws to the Canvas of the TImage. This is NOT the canvas of
the bitmap! As a consequence it leaves the original image untouched.
So, the order of actions in the Paint cycle is: Draw the original
image on the TImage.Canvas, fire the OnPaint event where my code draws
the grid (if the checkbox is checked), again on the TImage.Canvas.

----------------------------------------------------------------------
Tomi · 2024-04-28 12:36

I tried make it on the basis of your demo, wp, but this code do
nothing:
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
drawgrid(Sender: TObject);(...)procedure TForm1.drawgrid(Sender:
TObject);var vlines,hlines: word;begin     vlines:=tilewidth;   
 hlines:=tileheight;     gridimage.canvas.pen.color:=clBlue;     while
vlines<terrainCanvas.width do     begin         
gridimage.canvas.line(vlines,0,vlines,terrainCanvas.height);         
inc(vlines,tilewidth);     end;     while hlines<terrainCanvas.height
do     begin         
gridimage.canvas.line(0,hlines,terrainCanvas.width,hlines);         
inc(hlines,tileheight);     end;end;(...)procedure
TForm1.gridonoffbuttonMouseUp(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);begin   
 gridimage:=TImage.Create(tvScrBox);     gridimage.Parent:=tvScrBox; 
  gridimage.Left:=0;     gridimage.Top:=0;   
 gridimage.width:=terrainCanvas.width;   
 gridimage.height:=terrainCanvas.Height;   
 //gridimage.Transparent:=true;     gridimage.OnPaint:=@drawgrid;   
 gridimage.Invalidate;end;

----------------------------------------------------------------------
Josh · 2024-04-28 15:16

Project attached that may give you some help.

It allows you to change the gridcolor, grid line styles, and size of
grid, if you lock the grid then width and height are synched.

nb An image must be loaded before anything works.

Check the events of the timage and other components

----------------------------------------------------------------------
wp · 2024-04-28 17:51

Quote from: Tomi on April 28, 2024, 02:36:17 pmI tried make it on the
basis of your demo, wp, but this code do nothing:
Yes, but this is different. While I was drawing on the canvas of the
image (your "Terraincanvas") you are creating a new image and draw on
that one. The problem here is how to create a transparent image by
code. Took me some time until I found out, and only by contradicting
my previous advice not to draw outside the OnPaint event... TImage is
not a simple class, and it is hard to predict what is happening
without digging into its implementation code.

A simpler way is to provide the buffer for the grid image manually, by
using a TBitmap. The bitmap can be made transparent by filling with a
predefined, unused color and setting this as the "transparent color";
after setting the bitmap's Transparent property to true only the
pixels having a different color are drawn. This drawing now occurs
again in the OnPaint event, but now on the canvas of the base image
("Terraincanvas").

Using this "color transparency", however, is a bit outdated today
since it produces sharp transitions between transparent and opaque
regions. This is ok for drawing horizontal and vertical lines, but for
more general images it is preferrable to use "alpha-channel
transparency" for which the bitmap must have 32-bits-per-color, and
the additional 8 bits (compared to 24bpp) are used for transparency
(or better: opaqueness) values. Unfortunately standard LCL graphics
commands cannot use this because TColor reserves that 4th byte for
system information. However, there are TLazIntfImage and TLazCanvas in
the IntfGraphics unit which do support the alpha channel and can be
used to draw on a transparent background. And there are simple
commands to convert between TLazIntfImage and TBitmap so that a
LazIntfImage can drawn easily on an LCL canvas.

The attached demos show all three techniques.

----------------------------------------------------------------------
Tomi · 2024-04-29 14:32

Wow, thanks for everybody; these are very useful demos for me! But
unfortunately that black background still showed under the grid as you
can see in my attached program.

----------------------------------------------------------------------
wp · 2024-04-29 15:28

It would be helpful if you'd translate your applications to English
with English captions and English identifiers. I really don't want to
spend my time sending all this to Google translate to find out what
this application is supposed to do in detail.

----------------------------------------------------------------------
Josh · 2024-04-29 20:09

Just guessing as I cant understand meaning of
identifiers,procedures,functions not your fault.

If a grid is required on left image(s) i cannot see a draw for grid.

if you add

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  public 
.........  procedure MyGridPaint(Sender: TObject);   procedure
TForm1.MyGridPaint(Sender: TObject);var x,y:Word;begin  if sender is
Tcsempek then  begin    with sender as Tcsempek do    begin     
x:=csempeszel;      y:=csempemag;      canvas.pen.color:=clBlue;     
while x<width do      begin        canvas.line(x,0,x,height);       
inc(x,csempeszel);      end;      while y<height do      begin       
canvas.line(0,y,width,y);        inc(y,csempemag);      end;    end; 
end;end;               then in the create part of button    
 csempe[forrascsempedb].OnMouseUp:=@fcsegerkatt;   
 csempe[forrascsempedb].Transparent:=true;   
 csempe[forrascsempedb].OnPaint:=@myGridPaint;  // add this    
I could not test much, was getting access problems and heaptrc issues
when compiling in debug mode, so suspect some things are not freed, or
your breaking out of something before you tidy up created objects.

thats about as far as I can go. Sorry

----------------------------------------------------------------------
Tomi · 2024-05-02 13:30

OK and sorry for language confusion. Meanwhile I tried this and that
in my code and finally I managed to draw only the grid - but at wrong
coordinates.
So, if I commented out that three lines, the grid is visible, but at
the left upper coordinate of the screen and besides I can't hide it
with button pressing.
If that three lines are not commented, the grid is visible in the
right place, but with black background rectangle.
BTW, the terrainCanvas component is a child object of the
terrainScrBox, if that matters.
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.gridButtonMouseUp(Sender: TObject; Button: TMouseButton; 
Shift: TShiftState; X, Y: Integer);var bm: TBitmap;  hlines,vlines:
word;begin  if showgrid=true then  begin     showgrid:=false;     if
gridon=true then     begin       FreeAndNil(gridimage);     
 gridon:=false;     end;  end  else  begin    showgrid:=true;    if
gridon=false then    begin     
gridimage:=TImage.Create(terrainScrBox);     
gridimage.Parent:=terrainScrBox;      gridimage.Left:=0;     
gridimage.Top:=0;      gridimage.width:=terrainCanvas.width;
//terrainCanvas is a TImage component.     
gridimage.height:=terrainCanvas.Height;      griddrawing(gridimage); 
 end;    gridon:=true;  end;end; procedure TForm1.griddrawing(Sender:
TObject);var hlines,vlines: word;begin     vlines:=tilewidth;   
 hlines:=tileheight;     //with gridimage do // If these lines are
commented, the grid is visible without black rectangle,     //begin //
but not at gridimage and I can't switch off it.     
 canvas.pen.color:=clBlue;       while vlines<terrainCanvas.width do 
    begin          canvas.line(vlines,0,vlines,terrainCanvas.height); 
        inc(vlines,tilewidth);       end;       while
hlines<terrainCanvas.height do       begin         
canvas.line(0,hlines,terrainCanvas.width,hlines);         
inc(hlines,tileheight);        end;     //end;end;

----------------------------------------------------------------------
Josh · 2024-05-02 14:30

removing the 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 with gridimage doany draw routines will be on the form.

----------------------------------------------------------------------
Josh · 2024-05-02 14:49

Project that loads images in scrollbox, showhide grid and editing
no saving its just a design demo.