Breadcrumbs

[smashapps]

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:





The code:

Code: Select all

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

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:

Code: Select all

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

Just change Me.* to your control.

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.

[comathi]

I like it, and your mistake looks pretty cool as well lol.

Edit: I just noticed this in your code. Is there a specific reason you're using "Do" loops in your code instead of a "For"?

You'd be eliminating a few lines of code, and I'm pretty sure it would work the same

Code: Select all

For i = 1 To amt1
            g.DrawLine(bl_pen, x1, y1, x2, y2)
            y1 += ySize
            y2 += ySize
        Next i

        'Reset before we begin next set'
        x1 = 0
        x2 = 0
        y1 = 0
        y2 = 0
        'Draw vertical lines'
        y2 = Height
        For i = 0 To amt2
            g.DrawLine(bl_pen, x1, y1, x2, y2)
            x1 += ySize
            x2 += ySize
        Next i

[smashapps]

I did this at 3am lol of course there are mistakes

EDIT: Thanks by the way #comathi, I'll update my code

[Scottie1972]

is there a way you can asign a click_function() or a property to each grid section? If so, this would work out great for a game that i am working on.

[smashapps]

Hmm I'll have to try and think of how we would do that, the grid is just drawn lines.

If I come up with something I'll let you know. I also plan on trying to be able to create tables/graphs too. Most controls you find online for it cost a tonne!

[smashapps]

I've updated the project to version 2.

and by the way no I'm not double posting, this is a bump

#Scottie1972 you can now click on each grid square.

All the code has been updated too.

[XTechVB]

First of all an advice, Stop Diming graphics objects like pens or brushes (even the guys at Microsoft agree that when it comes to graphics you should use Using instead of Dim).
Now you use a lot of unnecessary code for a simple task as drawing a grid, this is how it should be done

Code: Select all

        Using GridPen As New Pen(Color.Black, BorderSize)
            ' Draw verical lines
            Dim StartPoint As Integer = 0
            While StartPoint <= Me.Width
                g.DrawLine(GridPen, StartPoint, 0, StartPoint, Me.Height)
                StartPoint += xSize
            End While
            ' Reset the StartPoint
            StartPoint = 0
            ' Draw horizontal lines
            While StartPoint <= Me.Height
                g.DrawLine(GridPen, 0, StartPoint, Me.Width, StartPoint)
                StartPoint += ySize
            End While
        End Using

[smashapps]

thanks. I don't always know the best way to do something in VB since I've only really taught myself, if it works then I'm happy with it.

[smashapps]

Updated to version 3

Uploaded wrong code! I will fix tonight, missing the code to fill each grid square.

Returning grid square location won't work with the sub border as well, just an FYI.

[XTechVB]

Looks nice, I did something like this a while back for an icon drawing project, I used a list populated with the grid rectangles, and then when i clicked the form it will search the list for the grid rectangle that contains the mouse position and return it.