Zooming an image in Visual Basic (VB6)

We have an example project for VB 6 that shows how to zoom in and zoom out of an image using the csXImage ActiveX control. 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.

The form has two instances of csXImage and this project will show how to copy an image from one to the other.

When the Load File button is pressed the LoadDialog command is called. This is a useful command because it allows the user to select an image from disk without using the common dialogue box. If an image is successfully loaded the DrawZoomRect subroutine is called, which is really the working part of the demo.

Private Sub cmdLoad_Click()

With ImageBox2
  .LoadDialog
  If .ImageLoaded Then
    DrawZoomRect
  End If
End With

End Sub

The DrawZoomRect subroutine is used throughout the project. First it uses the scroll bar position and the zoom factor to calculate the part of the image that is visible inside the control. It then uses the BmpHandle property to copy the image from the right hand control (ImageBox2) to the left hand control (ImageBox1). This is an important technique when using csXImage to manipulate images because it allows an image to be edited or changed for display purposes while the "Master Image" is stored in another control to be restored later. KeepScrollPos is set to true so that the copy of the image is shown at the same position.

When the trial version of csXImage is used, some text is written at the top of images when they are displayed or exported. This results in the left hand control having two of these pieces of text and one of them can be quite large. They are removed in the full retail version.

A selection is made around the visible part of the image and then a brightness adjustment is made to the selected area. A rectangle is then drawn to mark the area of the image that is visible.

Private Sub DrawZoomRect()

Dim X1 As Long
Dim X2 As Long
Dim Y1 As Long
Dim Y2 As Long

With ImageBox2
  X1 = .ScrollBarHorizPos / .Zoom * 100
  Y1 = .ScrollBarVertPos / .Zoom * 100
  X2 = X1 + (.Width / 15 + (16 * .HasScrollBarVert)) * 100 / .Zoom
  Y2 = Y1 + (.Height / 15 + (16 * .HasScrollBarHoriz)) * 100 / .Zoom
End With

With ImageBox1
  .KeepScrollPos = True
  .ReleaseBMPHandle = false
  .BMPHandle = ImageBox2.BMPHandle
  .BrushStyle = bsClear
  .SelectRectangle X1, Y1, X2, Y2
  .SelectionVisible = False
  .UseSelection = True
  .Brightness 70, True, True, True
  .Rectangle X1, Y1, X2 + 1, Y2 + 1
End With

End Sub

The code to zoom in and out is quite simple. Zoom is a property which defines the zoom factor and it is measured as a percentage so that 100 is a full sized image. In this example, multiplying by 1.1 increases the zoom factor and dividing by 1.1 reduces the zoom factor. Note that this method of adjusting the zoom factor does not allow the image to be returned to full size. That would require another button to set Zoom to 100.

The OnScroll event of ImageBox2 is used to trigger a call to DrawZoomRect.

Private Sub cmdZoomIn_Click()

ImageBox2.Zoom = ImageBox2.Zoom * 1.1
DrawZoomRect

End Sub

Private Sub cmdZoomOut_Click()

ImageBox2.Zoom = ImageBox2.Zoom / 1.1
DrawZoomRect

End Sub

Private Sub ImageBox2_OnScroll()

DrawZoomRect

End Sub