| Title | Make a simple drawing program with a "snap to" grid and rules in Visual Basic 6 |
|---|
| Description | This example shows how to make a simple drawing program with a "snap to" grid and rules in Visual Basic 6. |
|---|
| Keywords | drawing, graphics, grid, snap to, snapto, ruler, Visual Basic 6, Visual Basic Classic |
|---|
| Categories | Graphics |
|---|
|
|
|
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.
|
| |
|
| |
