Draw a Line Grid on an Image with Varying Rows and Columns using Point Arrays

[Boleeman]

Hi there.

I adapted the code from the Wiki to draw a grid with different rows and columns.
How could the draw grid procedure be done using Point Arrays and Lines?

Thanks to WP for fixing the rows / columns problem.

Thanks in advance.

Here is my code:

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

1. procedure TForm1.bn_drawgridClick(Sender: TObject);
2. var
3.   R, C : Integer;
4.  
5.   begin
6.  
7.       MyImage.Canvas.Pen.Color := clWhite;
8.       MyImage.Canvas.Rectangle(0, 0, MyImage.Width, MyImage.Height);
9.       MyImage.Canvas.Pen.Color := clBlack;
10.  
11.             begin
12.  
13.             R := StrToInt(ed_rows.Text);
14.             C  := StrToInt(ed_columns.Text);
15.  
16.             DrawGrid(R, C, 100, 100, MyImage.Canvas);
17.  
18.             end;
19.  
20. end;
21.  
22. procedure TForm1.DrawGrid(rows, columns, x, y: Integer; myCanvas: TCanvas);
23.  
24. begin
25.  
26.   for x := 1 to columns do
27.     for y := 1 to rows do
28.       myCanvas.Rectangle(Round((x - 1) * myCanvas.Width / columns), Round((y - 1) * myCanvas.Height / rows),
29.       Round(x * myCanvas.Width / columns), Round(y * myCanvas.Height / rows));
30.  
31. end;
32.  
33. end.  

       

[wp]

You confuse rows and columns in the x and y loops. x refers to the columns and thus has its maximum at the "Columns" parameter, and y refers to the rows and thus ends at the "Rows" parameter:

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

1.   for x := 1 to columns do
2.     for y := 1 to rows do
3.       ...

BTW, which wiki article did you use for this code?

[Boleeman]

Wow thanks WP that works.

It is the one thing I did not try.

I used the Graphics Wiki that has examples that draws Polygons and Stars. It also had a grid example just with set numbers.

Now to work out how to do the same using Point Arrays and Lines.

Thanks WP.

[Lansdowne]

BTW, which wiki article did you use for this code?

I am guessing it is this one

https://wiki.lazarus.freepascal.org/Developing_with_Graphics#Draw_to_a_TImage

[Boleeman]

Yes that is the one

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

1. procedure TForm1.BitBtn1Click(Sender: TObject);
2. var
3.   x, y: Integer;
4. begin
5.   // Draws the backgroung
6.   MyImage.Canvas.Pen.Color := clWhite;
7.   MyImage.Canvas.Rectangle(0, 0, Image.Width, Image.Height);
8.    
9.   // Draws squares
10.   MyImage.Canvas.Pen.Color := clBlack;
11.   for x := 1 to 8 do
12.     for y := 1 to 8 do
13.       MyImage.Canvas.Rectangle(Round((x - 1) * Image.Width / 8), Round((y - 1) * Image.Height / 8),
14.         Round(x * Image.Width / 8), Round(y * Image.Height / 8));
15. end;

[speter]

You might need to give some more information about what you actually need/want for your grid.

To start you thinking, I am including a project which draws a grid based on 10 random points; even if it isn't the kind of thing you are looking for, it might point you in the right direction.

cheers
S.

[Boleeman]

Thanks speter for your code sample. I have seen various examples of code that creates dynamic Point Arrays, but they have different approaches, so that has got me a bit dazzled. Needed something to learn off, to create a dynamic Point Array and then make use of it to draw a structured equal column pattern (like a table for starters).

Was wanting to change the Border Thickness and Line Types inside the Grid possibly via a couple of combo boxes, like in the picture below but using Point Arrays and Lines. I used to program in VB6 (know how to it in VB6) but in Lararus not sure. The RED bits in the picture are combo boxes (1st one has line outside border thickness, 2nd has line types for the inside lines). Similar to what can be done in Ms Word Tables, but simplified. Would be nice to just select certain lines and change their attributes but that is more complex. Still learning.

So ... Using a dynamic array

tpointslist = array[1..num_pts] of tpoint;      so  num_pts to store position of each point would be = rows x columns

Then split horizontal line into column intervals
Then split vertical lines in row intervals

with dotted lines:
join vertical lines
join horizontal lines


with solid lines:
draw rectangle with solid border and selectable thickness

Maybe?

[Boleeman]

Actually in VB6, I modified my table design maker to make various patterns, as shown below. Was wanting to play with Lazarus to see if I can achieve something similar. Got to start off with finding out how to construct a basic selectable row and column  table using Point arrays and Lines and then experiment with other variations.

[jamie]

Polygon ?

[Boleeman]

No, that pattern was made by joining up array elements that made up a line grid table, but just in a different order to create a repeating shape.

Here is a picture of just a table/line grid. This was done in VB6, but I wanted to try to do it in Lazarus!

[speter]

Have a look at the attached project. It doesn't do everything you want; but it might help you along your path...

It doesn't use any arrays (dynamic or otherwise); it only draws "normal" grids; and I replaced your "dimensions" with "proportions".

cheers
S.

[Boleeman]

Thanks speter for your 2nd code sample. Much appreciated. Noticed that you used spin edit boxes instead of Tedit control to change number values. Perhaps I will make more use of these as well in future.

I will study the code and learn from it.
I am learning lots from Lazarus forumn members and examples here, but still got more to learn (hopefully incrementally).

Been playing around with a few colour mixers as well.


Meanwhile if anyone wants to play around with my VB6 table program (drag the mouse to make your table/pattern), it is attached.