ImageMan ActiveX
Panning and Scrolling Images

Using the Scale Properties: ScaleLeft , ScaleTop you can completely control the placement of an image inside the ImageMan control. When ScaleLeft and ScaleTop are set to 0 you are looking at the top left portion of an image if it is bigger than the control. By modifying these values you can programmatically control the portion of the image your user views. The following code would focus the view port on the bottom right hand portion of the image.

 

(Note: This is not supported with Vector Images. Remember AutoSCale=0)

With ImageControl1

.ScaleLeft = .ImageWidth - .ScaleWidth

.ScaleTop = .ImageHeight - .ScaleHeight

.Refresh

End With

 

To pan or scroll the image horizontally you adjust the ScaleLeft property. The following code smoothly pans the image up from the bottom of the screen vertically by using the ScaleTop property.

 

With ImageControl1

Do While .ScaleTop < (.ImageHeight - .ScaleHeight)

.ScaleTop = .ScaleTop + 1

.Refresh

DoEvents

Loop

End With

 

To implement the ability to easily "grab" the image and drag it across the screen: the MouseDown event captures the original X and Y coordinates as well as setting a Boolean flag, the MouseMove event moves the image and refreshes the screen, and the MouseUp event resets the Boolean flag to its original state.

 

' Used for dragging Image

Dim bMouseDown As Boolean

Dim OldX As Single

Dim OldY As Single

. . .

Private Sub ImageControl1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

If Button = 1 Then ' Left Mouse Button

OldX = X

OldY = Y

bMouseDown = True

End If

End Sub

 

Private Sub ImageControl1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

If bMouseDown Then

ImageControl1.ScaleLeft = ImageControl1.ScaleLeft + (OldX - X)

ImageControl1.ScaleTop = ImageControl1.ScaleTop + (OldY - Y)

ImageControl1.Refresh

End If

End Sub

 

Private Sub ImageControl1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

bMouseDown = False

End Sub

 

By allowing your users to "grab" any portion of the image it makes it much easier for them to see all of an image without having to move over to the scrollbar tab. The above code could be improved in a couple of ways. One, by adding a custom icon of a hand or some other "original" indicator to help your user know what to expect. Two, by limiting the scroll extent to the size of the image. The following code once again implements the Image Drag that we just visited in the code above. This time, however, it keeps the image form being dragged outside of the viewable area.

 

Private Sub ImageControl1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)

Dim NewX As Single

Dim NewY As Single

If bMouseDown Then

With ImageControl1

NewX = .ScaleLeft + (OldX - X)

NewY = .ScaleTop + (OldY - Y)

If NewX < 0 Then

NewX = 0

ElseIf NewX > .ImageWidth - .ScaleWidth Then

NewX = .ImageWidth - .ScaleWidth

End If

If NewY < 0 Then

NewY = 0

ElseIf NewY > .ImageHeight - .ScaleHeight Then

NewY = .ImageHeight - .ScaleHeight

End If

.ScaleLeft = NewX

.ScaleTop = NewY

.Refresh

End With

End If

End Sub

 

Remember that by using the ScaleHeight andScaleWidth you can also control the size of the image displayed. The four seemingly innocuous Scale Properties lead to a whole wealth of display options.

 

 


© 2014 Data Techniques, Inc. All rights reserved.

Submit feedback on this topic