Scrolling the image by dragging the mouse

Question

I have the image that scroll when i used the horizontal and vertical scroll bars. But I want to scroll the image by dragging it like in Photoshop (using hand tool and exploring through the zoomed image). Is there any way to do in such way in Visual Basic 6.0? I have changed the default cursor of the mouse to the hand cursor. Now i just want to scroll by dragging the image.

Answer 1

Simple, you just need to handle the mouse events for the control that contains your image. I'll walk you through step-by-step using production code from an app I wrote that implements this exact same feature.

Start with the MouseDown event. Here, you'll need to check which button is down (if you want to allow dragging with only the left button, both the left and right buttons, or just the right button), change the mouse cursor to a closed or clapsed hand (indicating that a drag is in progress), and set some member variables that keep track of the starting coordinates of the cursor. Example:

Private Sub picBox_MouseDown(Button As Integer, Shift As Integer, x As Single, y As Single)
    ' When left mouse button is pressed down (initiating a drag)
    If Button = 1 Then
        ' Store the coordinates of the mouse cursor
        xpos = x
        ypos = y

        ' Change the cursor to hand grab icon
        picBox.MouseIcon = LoadPicture(App.Path & "\Resources\Cursors\grab.ico")
    End If
End Sub

Then, you'll handle the MouseMove event, where you'll do the actual dragging (moving the image inside the picture box). In the example, I chose to simply move the entire picture box control around on the container Form, rather than moving the image inside of the picture box. You might need to change the logic here, depending on the layout of your form and your specific needs. For example, you say that you have scroll bars—in that case, you'll need to adjust the position of the X and Y scroll bars here.

Private Sub picBox_MouseMove(Button As Integer, Shift As Integer, x As Single, y As Single)
    ' When left mouse button is being held down (drag)
    If Button = 1 Then
        ' Drag the picture box around the form
        picBox.Move x + (picBox.Left - xpos), y + (picBox.Top - ypos)
    End If
End Sub

And finally, you need to handle the MouseUp event, where you'll end the drag by resetting the cursor:

Private Sub picBox_MouseUp(Button As Integer, Shift As Integer, x As Single, y As Single)
    ' Stop normal dragging
    If Button = 1 Then
        ' Set the cursor back to the unclapsed hand
        picBox.MouseIcon = LoadPicture(App.Path & "\Resources\Cursors\hand.ico")
    End If
End Sub

And of course, you'll need to add those member variables to the top of your Form class that keep track of the previous position of the cursor (in x and y coordinates). Something as simple as this will do:

Private xpos As Long
Private ypos As Long

The cursors looked something like this, similar to what you'd find in Adobe Acrobat or Mac OS 9 (probably originally drawn by someone magical like Susan Kare; may not be in the public domain):