Drawing a Rubber Band line in VB.NET

We have an example project for VB.NET that shows how to use the csXImage ActiveX control to draw a line at the position of the mouse cursor. It uses the technique known as "Rubber Banding" where the line is drawn temporarily and can be moved with the mouse until the button is released. Download the project code.

The demo uses the trial version of csXImage, which must must be registered on the development computer and the licence file must be in the same folder as the .ocx control. Running our installer will have performed the registration and unpacking of files.

Some global variables are used to record the start and end of the line and Boolean variables are needed to indicate whether the line is being drawn as the mouse moves.

Private DrawLineStart As Boolean
Private DrawingLine As Boolean

Private X1 As Integer
Private Y1 As Integer
Private X2 As Integer
Private Y2 As Integer

When the form is loaded a blank image is drawn in the control to use in the demo, and the PenMode property is set to pmNotXor. This setting for the pen is what allows the line to be drawn and rubbed out again because it draws a line by inverting the pixels, rather than drawing a line of a specific colour.

Private Sub fMain_Load(ByVal sender As System.Object, ByVal e
    As System.EventArgs) Handles MyBase.Load

  AxImageBox1.NewImage(360, 280)

  ' This PenMode means that a line can be erased by re-drawing on top of it
  AxImageBox1.PenMode = csXImageTrial.TxPenMode.pmNotXor

End Sub

The button that starts the line drawing process sets the DrawLineStart Boolean variable to true. The button is then disabled until the line is finished.

Private Sub cmdDrawLine_Click(ByVal sender As System.Object, ByVal e
    As System.EventArgs) Handles cmdDrawLine.Click

  ' This flag indicates to the OnMouseDown event that drawing will start
  DrawLineStart = True

  ' Disable this button
  cmdDrawLine.Enabled = False

End Sub

The OnMouseDown event will be triggered regardless of whether the Draw Line button has been clicked so the value of the DrawLineStart variable must be checked first. If a line is being drawn the coordinates are recorded. OnMouseDown provides the mouse coordinates as parameters. The DrawingLine Boolean variable is set to be true for use by the OnMouseMove event.

Private Sub AxImageBox1_OnMouseDown(ByVal sender As System.Object, ByVal e
    As AxcsXImageTrial.IImageBoxEvents_OnMouseDownEvent)
    Handles AxImageBox1.OnMouseDown

  If DrawLineStart Then

    ' Record the start coordinates of the line
    X1 = e.x
    Y1 = e.y
    X2 = e.x
    Y2 = e.y

    ' Reset the start flag
    DrawLineStart = False

    ' This flag indicates to the OnMouseMove event that drawing is in progress.
    DrawingLine = True

  End If

End Sub

OnMouseMove will be triggered whenever the mouse moves but action only needs to be taken when a line is being drawn. That is the purpose of the Boolean variables DrawingLine and DrawLineStart. When drawing is in progress the mouse cursor is changed to a cross hair.

When DrawLine is true the old line must be erased by drawing over it using the pmNotXor setting for PenMode. The start and previous end point coordinates have been stored previously. After deleting the old line the new end point coordinates are set and a new line is drawn.

Private Sub AxImageBox1_OnMouseMove(ByVal sender As System.Object, ByVal e
    As AxcsXImageTrial.IImageBoxEvents_OnMouseMoveEvent) Handles
    AxImageBox1.OnMouseMove

  If DrawingLine Or DrawLineStart Then

    ' Use the crosshair cursor when drawing
    Me.Cursor = Cursors.Cross

  End If

  If DrawingLine Then

    ' Erase the previous line
    ' (note the PenMode setting in fMain_Load)
    AxImageBox1.DrawLine(X1, Y1, X2, Y2)

    ' Set the new line end coordinates and draw a new line
    X2 = e.x
    Y2 = e.y
    AxImageBox1.DrawLine(X1, Y1, X2, Y2)

  End If

End Sub

Finally, the drawing is stopped when the mouse button is released. The cursor is changed back to the default and the Draw Line button is enabled.

Private Sub AxImageBox1_OnMouseUp(ByVal sender As System.Object, ByVal e
    As AxcsXImageTrial.IImageBoxEvents_OnMouseUpEvent)
    Handles AxImageBox1.OnMouseUp

  ' Stop drawing and re-enable the Draw button
  DrawingLine = False
  cmdDrawLine.Enabled = True
  Me.Cursor = Cursors.Default

End Sub