Home
Search
 
What's New
Index
Books
Links
Q & A
Newsletter
Banners
 
Feedback
Tip Jar
 
C# Helper...
 
XML RSS Feed
Follow VBHelper on Twitter
 
 
 
MSDN Visual Basic Community
 
 
 
 
 
TitleMake a simple drawing program with a "snap to" grid and rules in Visual Basic 6
DescriptionThis example shows how to make a simple drawing program with a "snap to" grid and rules in Visual Basic 6.
Keywordsdrawing, graphics, grid, snap to, snapto, ruler, Visual Basic 6, Visual Basic Classic
CategoriesGraphics
 
When you press the mouse down on the main drawing canvas, the code starts drawing. It sets m_Drawing to True so it can remember that it is drawing. It calls SnapToGrid to snap the current point to the nearest grid point and saves that point. It invalidates the drawing area to redraw and calls ShowMousePosition to show the mouse position in the rulers usin the "drawing" color.
 
' Start drawing a line.
Private Sub picCanvas_MouseDown(ByVal sender As Object, _
    ByVal e As System.Windows.Forms.MouseEventArgs) Handles _
    picCanvas.MouseDown
    ' Only on left mouse down.
    If Button <> vbLeftButton Then Exit Sub
    m_Drawing = True

    ' Start drawing.
    m_X1 = x
    m_Y1 = y
    SnapToGrid m_X1, m_Y1
    m_X2 = m_X1
    m_Y2 = m_Y1

    picCanvas.Refresh
    ShowMousePosition m_X2, m_Y2
End Sub
 
Subroutine SnapToGrid snaps a point to the nearest grid location. It determines how many times the grid's size fits into the available canvas size, rounding to the nearest integer. It then multiplies that number by the grid size so get the nearest grid location.
 
' Snap the point to the nearest grid location.
Private Sub SnapToGrid(ByRef X As Integer, ByRef Y As _
    Integer)
Dim ix As Integer
Dim iy As Integer

    ' If grid snap is off, do nothing.
    If Not m_SnapToGrid Then Exit Sub

    ix = CInt(x / m_GridX)
    iy = CInt(y / m_GridY)
    x = ix * m_GridX
    y = iy * m_GridY
End Sub
 
Subroutine ShowMousePosition saves a point's coordinates and invalidates the two rulers to make them redraw.
 
' Show the mouse position on the rulers.
Private Sub ShowMousePosition(ByVal X As Integer, ByVal Y _
    As Integer)
    m_MouseX = x
    m_MouseY = y
    picTopRuler.Refresh
    picLeftRuler.Refresh
End Sub
 
The main canvas's MouseMove evnet handler saves the current mouse position, snaps it to the grid, shows the mouse position, and redraws the main canvas to show the new line being drawn.
 
' Continue drawing.
Private Sub picCanvas_MouseMove(ByVal sender As Object, _
    ByVal e As System.Windows.Forms.MouseEventArgs) Handles _
    picCanvas.MouseMove
    m_X2 = x
    m_Y2 = y
    SnapToGrid m_X2, m_Y2

    ' Show the mouse position on the rulers.
    ShowMousePosition m_X2, m_Y2

    ' Redraw.
    If m_Drawing Then picCanvas.Refresh
End Sub
 
The MouseUp event handler shows the mouse position in the non-drawing color. It then saves the new line segement and redraws to show it in the non-drawing color.
 
' Finish drawing.
Private Sub picCanvas_MouseUp(ByVal sender As Object, ByVal _
    e As System.Windows.Forms.MouseEventArgs) Handles _
    picCanvas.MouseUp
    If Not m_Drawing Then Exit Sub
    m_Drawing = False

    ' Show the mouse position in the non-drawing color.
    ShowMousePosition m_X2, m_Y2

    ' Save the new line.
    m_NumSegments = m_NumSegments + 1
    ReDim Preserve m_Segments(1 To m_NumSegments)
    m_Segments(m_NumSegments).x1 = m_X1
    m_Segments(m_NumSegments).y1 = m_Y1
    m_Segments(m_NumSegments).x2 = m_X2
    m_Segments(m_NumSegments).y2 = m_Y2

    picCanvas.Refresh
End Sub
 
The main canvas's Paint event handler clears the canvas. Then if m_ShowGrid is True, it draws the grid. It then draws any existing line segments and finally, if a new line is being drawn, it draws that line.
 
' Draw the lines.
Private Sub picCanvas_Paint(ByVal sender As Object, ByVal e _
    As System.Windows.Forms.PaintEventArgs) Handles _
    picCanvas.Paint
Dim x, y, i As Integer

    picCanvas.Cls

    ' Draw the grid.
    If m_ShowGrid Then
        For x = 0 To picCanvas.ScaleWidth Step m_GridX
            For y = 0 To picCanvas.ScaleHeight Step m_GridY
                picCanvas.PSet (x, y), m_ColorGrid
            Next y
        Next x
    End If

    ' Draw existing lines.
    For i = 1 To m_NumSegments
        picCanvas.Line (m_Segments(i).x1, _
            m_Segments(i).y1)-(m_Segments(i).x2, _
            m_Segments(i).y2), m_ColorOldLine
    Next i

    ' Draw the new line.
    If m_Drawing Then
        picCanvas.Line (m_X1, m_Y1)-(m_X2, m_Y2), _
            m_ColorNewLine
    End If
End Sub
 
The top ruler's Paint event handler clears the control. It then draws the tick marks using the grid's spacing and giving greater length to every 5 and 10 tick marks. Finally it draws the mouse's position in an appropriate color. The Left ruler's Paint event handler works similarly.
 
' Draw the top ruler.
Private Sub picTopRuler_Paint(ByVal sender As Object, ByVal _
    e As System.Windows.Forms.PaintEventArgs) Handles _
    picTopRuler.Paint
Dim y1 As Integer
Dim y2 As Integer
Dim y3 As Integer
Dim y4 As Integer
Dim x As Integer
Dim i As Integer

    picTopRuler.Cls

    y1 = picTopRuler.ScaleHeight
    y2 = (2 * picTopRuler.ScaleHeight) \ 3
    y3 = picTopRuler.ScaleHeight \ 3
    y4 = 0
    x = 0
    For i = 0 To picTopRuler.ScaleWidth \ m_GridX
        If i Mod 10 = 0 Then
            picTopRuler.Line (x, y1)-(x, y4), m_ColorGrid
        ElseIf i Mod 5 = 0 Then
            picTopRuler.Line (x, y1)-(x, y3), m_ColorGrid
        Else
            picTopRuler.Line (x, y1)-(x, y2), m_ColorGrid
        End If
        x = x + m_GridX
    Next i

    ' Show the mouse position.
    If m_Drawing Then
        picTopRuler.Line (m_MouseX, y1)-(m_MouseX, 0), _
            m_ColorRulerDrawing
    Else
        picTopRuler.Line (m_MouseX, y1)-(m_MouseX, 0), _
            m_ColorRulerNormal
    End If
End Sub
 
Download the example to see additional details such as how the menus let you show or hide the grid and turn grid snapping on and off.

This example is fairly basic and there are lots of other features you could add such as zooming, panning, drawing other shapes, and so forth.

 
 
Copyright © 1997-2010 Rocky Mountain Computer Consulting, Inc.   All rights reserved.
  Updated