External (display) pixel boundary values for the columns. (includes top-left position of the grid)
External (display) pixel boundary values for the rows. (includes top-left position of the grid)
Get the grid's height in pixels
Internal pixel boundary values for the columns. (relative to top-left position of the grid)
Internal pixel boundary values for the rows. (relative to top-left position of the grid)
the number of columns in the grid
the number of rows in the grid
Normalised internal boundary values for the columns.
Normalised internal boundary values for the rows.
Get the grid's width in pixels
Get the left position of the grid
Get the top edge position of the grid
Get the position and size for the specified cells ignoring insets. This can be used to define rectangles that surround groups of controls.
The top-left cell number is [0, 0]
the array [x, y, w, h]
horizontal cell number
vertical cell number
number of hrizontal cells to span
number of vertical cells to span
Get the position and size for the control that fits the specified cells taking into account the insets which provide a clear border between the control and the cell boundary.
The top-left cell number is [0, 0]
the array [x, y, w, h]
horizontal cell number
vertical cell number
number of horizontal cells to span
number of vertical cells to span
Set the number and relative widths of the horizontal cells.
this grid
number or an array containing relative widths
The gap (pixels) between the cell border and the control.
this grid
horizontal inset
vertical inset
Set the number and relative heights of the vertical cells.
this grid
number or an array containing relative heights
Set the number and relative sizes of the cells in both horizontal and vertical dimensions.
this grid
number or an array containing relative widths
number or an array containing relative height
Resize the grid
this grid
new grid width
new grid height
Reposition the grid
this grid
left edge position to use
top edge position to use
Generated using TypeDoc
This class represents a rectangular grid layout of cells that can be used to specify the position and size of canvasGUI controls.
The grid layout enables the user to
The methds
cols
,rows
andcells
are used to set the number and/or the relative cell size within the grid area. Passing integers to these methods will create cells of equal widths and equal heights.To have columns of different widths or rows with different heights then the parameter must be an array of numbers, the array length represents the number of cells and the array values represent their relative sizes.
An example will make this clearer, consider the following code
grid.cols([10, 24, 16]).rows(4);
grid.size([10, 24, 16], 4);
Both lines perform the same action by specifying a grid of 3 variable width columns and 4 equal height rows. The row height in pixels will be the 0.25 x the grid area height.
To caluclate the column widths divide each array element by the sum of all the array values. Calculating and dividing by the sum (50) creates. If we do that the array elements becomes
[0.2, 0.48, 0.32]
and to find the column pixel widths, simply multiply these values by grid area width.Since
1.1.0