Grid Project Open-Source WIP (Version 4)
Posted: Sat Feb 08, 2014 4:27 pm
Hey Guys,
For years I've wanted to do this. Finally got around to attempting it. It's a grid, custom grid size and is drawn relatively fast.
while doing this I did make a few mistakes, most notably this one:
I like the outcome of my final result, if you know how I can improve my current grid drawing code, let me know, also let me know what you think
The grid:
![Image]()
The code:
Each grid size is worked out by xSize and ySize, try and keep them the same size or the grid won't generate properly, or just look funny. The amt declaration is for the amount of grids that are going to be drawn, we add 1 pixel to each set (vertical and horizontal) so that we get the border on the grid too. If you drew this on a control instead of the form you will notice you only have a top border, adding the +1 to the amount of lines we are drawing fixes this issue.
If you want to know anything else about this feel free to ask, and be sure to tell me what you think of this, thanks everyone
![Image]()
![Image]()
For years I've wanted to do this. Finally got around to attempting it. It's a grid, custom grid size and is drawn relatively fast.
while doing this I did make a few mistakes, most notably this one:
![Image](http://i57.tinypic.com/2gtbwgj.png)
I like the outcome of my final result, if you know how I can improve my current grid drawing code, let me know, also let me know what you think
![Smile :)](./images/smilies/icon_e_smile.gif)
The grid:
![Image](http://gyazo.com/bd8def39dc342dbcdf5b1456313247f2.png)
![Image](http://gyazo.com/7bf9153423b9e7883307f83dee030905.png)
The code:
Code: Select all
The reason I invalidate the form when we resize it is so that the grid is redrawn. The grid is drawn on the form itself. If you want to draw this onto a control like Panel, or PictureBox just place this code in the respective control's paint event and modify:Public Class frmGrid
'Written by SmashAps | Thomas Walton
'Version 3
#Region "DrawGrid"
Public xSize As Integer = 10
Public ySize As Integer = 10
Public useSubBorder As Boolean = True 'Change to true if you want a thicker border every 10 grid 'squares
Private Sub frmGrid_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
Dim bl_pen As New Pen(Color.DarkGray, 1)
Dim subbl_pen As New Pen(Color.DarkGray, 2)
Dim g As Graphics = e.Graphics
Dim x1 As Integer = 0
Dim y1 As Integer = 0
Dim x2 As Integer = 0
Dim y2 As Integer = 0
Dim i As Integer = 0
Dim subBorder As Integer = 0
Dim width As Integer = Me.Width
Dim height As Integer = Me.Height
Dim amt1 As Integer = Me.Height / ySize
amt1 += 1
Dim amt2 As Integer = Me.Width / xSize
amt2 += 1
'Draw horizontal lines '
x2 = width
For i = 1 To amt1
If useSubBorder = True Then
If subBorder <= 10 Then
g.DrawLine(bl_pen, x1, y1, x2, y2)
y1 += ySize
y2 += ySize
subBorder += 1
Else
g.DrawLine(subbl_pen, x1, y1, x2, y2)
y1 += ySize
y2 += ySize
subBorder = 0
End If
Else
g.DrawLine(bl_pen, x1, y1, x2, y2)
y1 += ySize
y2 += ySize
End If
Next i
'Reset before we begin next set'
x1 = 0
x2 = 0
y1 = 0
y2 = 0
i = 0
'Draw vertical lines'
y2 = height
For i = 0 To amt2
If useSubBorder = True Then
If subBorder <= 10 Then
g.DrawLine(bl_pen, x1, y1, x2, y2)
x1 += ySize
x2 += ySize
subBorder += 1
Else
g.DrawLine(subbl_pen, x1, y1, x2, y2)
x1 += ySize
x2 += ySize
subBorder = 0
End If
Else
g.DrawLine(bl_pen, x1, y1, x2, y2)
x1 += ySize
x2 += ySize
End If
Next i
g.Dispose()
End Sub
#End Region
#Region "ReDraw"
Private Sub frmGrid_SizeChanged(sender As Object, e As EventArgs) Handles MyBase.SizeChanged
Invalidate()
End Sub
#End Region
#Region "Return Square Location"
Private Sub frmGrid_MouseClick(sender As Object, e As MouseEventArgs) Handles MyBase.MouseClick
Dim pX, pY As Integer
pX = e.X
pY = e.Y
MsgBox(Str(pX / xSize) & " : " & Str(pY / ySize))
End Sub
#End Region
End Class
Code: Select all
Just change Me.* to your control.Dim width As Integer = Me.Width
Dim height As Integer = Me.Height
Dim amt1 As Integer = Me.Height / ySize
amt1 += 1
Dim amt2 As Integer = Me.Width / xSize
amt2 += 1
Each grid size is worked out by xSize and ySize, try and keep them the same size or the grid won't generate properly, or just look funny. The amt declaration is for the amount of grids that are going to be drawn, we add 1 pixel to each set (vertical and horizontal) so that we get the border on the grid too. If you drew this on a control instead of the form you will notice you only have a top border, adding the +1 to the amount of lines we are drawing fixes this issue.
If you want to know anything else about this feel free to ask, and be sure to tell me what you think of this, thanks everyone
You can now click on each grid square and return it's location
You can use the DrawSquare() function to fill each square - will only work if you keep the grid in size proportion i.e. 20x20 not 20x10
You can now add 'sub borders' to your grid.
![Image](http://i61.tinypic.com/jhatk7.png)
![Image](http://gyazo.com/573ac6eeae8d20ed78d7ea224aadfc01.png)