Drawing grid lines on a transparent image

[Tomi]

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][+][-]

1. procedure TForm1.gridButtonMouseUp(Sender: TObject; Button: TMouseButton;
2.   Shift: TShiftState; X, Y: Integer);
3. var bm: TBitmap;
4.   hlines,vlines: word;
5. begin
6.   if showgrid=true then
7.   begin
8.      showgrid:=false;
9.      if gridon=true then
10.      begin
11.        FreeAndNil(gridimage);
12.        gridon:=false;
13.      end;
14.   end
15.   else
16.   begin
17.     showgrid:=true;
18.     if gridon=false then
19.     begin
20.       gridimage:=TImage.Create(terrainScrBox);
21.       gridimage.Parent:=terrainScrBox;
22.       gridimage.Left:=0;
23.       gridimage.Top:=0;
24.       gridimage.width:=terrainCanvas.width; //terrainCanvas is a TImage component.
25.       gridimage.height:=terrainCanvas.Height;
26.       gridimage.Transparent:=true;
27.       bm:=TBitmap.Create;
28.       bm.width:=terrainCanvas.width;
29.       bm.height:=terrainCanvas.Height;
30.       bm.PixelFormat:=pf32Bit;
31.       bm.Transparent:=true;
32.       vlines:=tilewidth;
33.       hlines:=tileheight;
34.       bm.canvas.pen.color:=clBlue;
35.       while vlines<terrainCanvas.width do
36.       begin
37.           bm.canvas.line(vlines,0,vlines,terrainCanvas.height);
38.           inc(vlines,tilewidth);
39.       end;
40.       while hlines<terrainCanvas.height do
41.       begin
42.           bm.canvas.line(0,hlines,terrainCanvas.width,hlines);
43.           inc(hlines,tileheight);
44.       end;
45.       gridimage.picture.graphic:=bm;
46.       FreeAndNil(bm);
47.     end;
48.     gridon:=true;
49.   end;
50. 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]

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

[KodeZwerg]

Here an example:
(I have assigned in designer an image to the TImage control.)

Code: Pascal  [Select][+][-]

1. unit Unit1;
2.  
3. {$mode objfpc}{$H+}
4.  
5. interface
6.  
7. uses
8.   Classes, SysUtils, Forms, Controls, Graphics, Dialogs, ExtCtrls, StdCtrls;
9.  
10. type
11.  
12.   { TForm1 }
13.  
14.   TForm1 = class(TForm)
15.     CheckBox1: TCheckBox;
16.     Image1: TImage;
17.     Panel1: TPanel;
18.     procedure CheckBox1Change(Sender: TObject);
19.     procedure FormCreate(Sender: TObject);
20.   strict private
21.     FBMP: TBitmap;
22.   private
23.   public
24.  
25.   end;
26.  
27. var
28.   Form1: TForm1;
29.  
30. implementation
31.  
32. {$R *.lfm}
33.  
34. { TForm1 }
35.  
36. procedure TForm1.FormCreate(Sender: TObject);
37. begin
38.   FBMP := TBitmap.Create;
39.   FBMP.Assign(Image1.Picture.Bitmap);
40. end;
41.  
42. procedure TForm1.CheckBox1Change(Sender: TObject);
43. var
44.   i: Integer;
45.   GridSize: Integer;
46.   LBMP: TBitmap;
47.   X, Y: Integer;
48. begin
49.   GridSize := 50;
50.   LBMP := TBitmap.Create;
51.   try
52.     LBMP.PixelFormat := pf32bit;
53.     LBMP.Width := Image1.ClientRect.Width;
54.     LBMP.Height := Image1.ClientRect.Height;
55.     if CheckBox1.Checked then
56.       begin
57.         X := 0;
58.         Y := 0;
59.         LBMP.Assign(Image1.Picture.Bitmap);
60.         LBMP.Canvas.Brush.Color := clBlack;
61.         LBMP.Canvas.Brush.Style := bsSolid;
62.         for i := 0 to GridSize do
63.           if ((X + GridSize) < LBMP.Width) then
64.             begin
65.               Inc(X, GridSize);
66.               LBMP.Canvas.FillRect(X, LBMP.Canvas.ClipRect.Top, Succ(X), LBMP.Canvas.ClipRect.Bottom);
67.             end;
68.         for i := 0 to GridSize do
69.           if ((Y + GridSize) < LBMP.Height) then
70.             begin
71.               Inc(Y, GridSize);
72.               LBMP.Canvas.FillRect(LBMP.Canvas.ClipRect.Left, Y, LBMP.Canvas.ClipRect.Right, Succ(Y));
73.             end;
74.       end
75.     else
76.       LBMP.Assign(FBMP);
77.     Image1.Picture.Bitmap.Assign(LBMP);
78.   finally
79.     LBMP.Free;
80.   end;
81. end;
82.  
83. 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]

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

[KodeZwerg]

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]

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][+][-]

1. bm:=TBitmap.Create;
2. bm.PixelFormat:=pf32Bit;
3. bm.width:=terrainCanvas.width; //terrainCanvas is a TImage.
4. bm.height:=terrainCanvas.height;
5. bm.Assign(terrainCanvas.picture.bitmap);
6. vlines:=tilewidth;
7. hlines:=tileheight;
8. bm.canvas.pen.color:=clBlue;
9. while vlines<terrainCanvas.width do
10. begin
11.           bm.canvas.line(vlines,0,vlines,terrainCanvas.height);
12.           inc(vlines,tilewidth);
13. end;
14. while hlines<terrainCanvas.height do
15. begin
16.           bm.canvas.line(0,hlines,terrainCanvas.width,hlines);
17.           inc(hlines,tileheight);
18. end;
19. terrainCanvas.Picture.Bitmap.Assign(bm);
20. FreeAndNil(bm);

[KodeZwerg]

And why doesn't my modified code show anything?

Because you use different methods that needs different handling.

Code: Pascal  [Select][+][-]

1.               LBMP.Canvas.FillRect(X, LBMP.Canvas.ClipRect.Top, Succ(X), LBMP.Canvas.ClipRect.Bottom);

Code: Pascal  [Select][+][-]

1.           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][+][-]

1. bm.width:=terrainCanvas.width; //terrainCanvas is a TImage.
2. bm.height:=terrainCanvas.height;

both assignments not needed since right after you actual do Assign() what will set the correct dimension

Code: Pascal  [Select][+][-]

1. while vlines<terrainCanvas.width do

you refer here also wrong, it must be "bm.Width"
and so on

[wp]

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]

I tried make it on the basis of your demo, wp, but this code do nothing:

Code: Pascal  [Select][+][-]

1. procedure drawgrid(Sender: TObject);
2. (...)
3. procedure TForm1.drawgrid(Sender: TObject);
4. var vlines,hlines: word;
5. begin
6.      vlines:=tilewidth;
7.      hlines:=tileheight;
8.      gridimage.canvas.pen.color:=clBlue;
9.      while vlines<terrainCanvas.width do
10.      begin
11.           gridimage.canvas.line(vlines,0,vlines,terrainCanvas.height);
12.           inc(vlines,tilewidth);
13.      end;
14.      while hlines<terrainCanvas.height do
15.      begin
16.           gridimage.canvas.line(0,hlines,terrainCanvas.width,hlines);
17.           inc(hlines,tileheight);
18.      end;
19. end;
20. (...)
21. procedure TForm1.gridonoffbuttonMouseUp(Sender: TObject; Button: TMouseButton;
22.   Shift: TShiftState; X, Y: Integer);
23. begin
24.      gridimage:=TImage.Create(tvScrBox);
25.      gridimage.Parent:=tvScrBox;
26.      gridimage.Left:=0;
27.      gridimage.Top:=0;
28.      gridimage.width:=terrainCanvas.width;
29.      gridimage.height:=terrainCanvas.Height;
30.      //gridimage.Transparent:=true;
31.      gridimage.OnPaint:=@drawgrid;
32.      gridimage.Invalidate;
33. end;

[Josh]

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]

I 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]

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]

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]

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][+][-]

1.  
2. public
3.   .........
4.   procedure MyGridPaint(Sender: TObject);
5.  
6.  
7.  
8. procedure TForm1.MyGridPaint(Sender: TObject);
9. var x,y:Word;
10. begin
11.   if sender is Tcsempek then
12.   begin
13.     with sender as Tcsempek do
14.     begin
15.       x:=csempeszel;
16.       y:=csempemag;
17.       canvas.pen.color:=clBlue;
18.       while x<width do
19.       begin
20.         canvas.line(x,0,x,height);
21.         inc(x,csempeszel);
22.       end;
23.       while y<height do
24.       begin
25.         canvas.line(0,y,width,y);
26.         inc(y,csempemag);
27.       end;
28.     end;
29.   end;
30. end;            
31.  
32.  
33. then in the create part of button
34.  
35.      csempe[forrascsempedb].OnMouseUp:=@fcsegerkatt;
36.      csempe[forrascsempedb].Transparent:=true;
37.      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]

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][+][-]

1. procedure TForm1.gridButtonMouseUp(Sender: TObject; Button: TMouseButton;
2.   Shift: TShiftState; X, Y: Integer);
3. var bm: TBitmap;
4.   hlines,vlines: word;
5. begin
6.   if showgrid=true then
7.   begin
8.      showgrid:=false;
9.      if gridon=true then
10.      begin
11.        FreeAndNil(gridimage);
12.        gridon:=false;
13.      end;
14.   end
15.   else
16.   begin
17.     showgrid:=true;
18.     if gridon=false then
19.     begin
20.       gridimage:=TImage.Create(terrainScrBox);
21.       gridimage.Parent:=terrainScrBox;
22.       gridimage.Left:=0;
23.       gridimage.Top:=0;
24.       gridimage.width:=terrainCanvas.width; //terrainCanvas is a TImage component.
25.       gridimage.height:=terrainCanvas.Height;
26.       griddrawing(gridimage);
27.     end;
28.     gridon:=true;
29.   end;
30. end;
31.  
32. procedure TForm1.griddrawing(Sender: TObject);
33. var hlines,vlines: word;
34. begin
35.      vlines:=tilewidth;
36.      hlines:=tileheight;
37.      //with gridimage do // If these lines are commented, the grid is visible without black rectangle,
38.      //begin // but not at gridimage and I can't switch off it.
39.        canvas.pen.color:=clBlue;
40.        while vlines<terrainCanvas.width do
41.        begin
42.           canvas.line(vlines,0,vlines,terrainCanvas.height);
43.           inc(vlines,tilewidth);
44.        end;
45.        while hlines<terrainCanvas.height do
46.        begin
47.           canvas.line(0,hlines,terrainCanvas.width,hlines);
48.           inc(hlines,tileheight);
49.        end;
50.      //end;
51. end;