Table of Contents
17.18 ImageView
The ImageView (gb.form) component implements an image viewer.
Figure 17.18.1: Image display in an ImageView.
- If the image is larger than the display area in the ImageView, scroll bars are automatically displayed. You can move both scroll bars with the mouse. Only the vertical scroll bar reacts to the movements of the mouse wheel when the mouse is over the display area of an ImageView. Context menus exist for both the horizontal and vertical scroll bars of an ImageView.
- If the UseMouse property is set to True (default), you can move the image in the ImageView by holding down the left mouse button to change the image section - provided that scroll bars are visible.
- If the grid property has the value True and the zoom factor (data type Float) has an integer value greater than 2, then you will see a fine grid over the image or the image section:
Figure 17.18.1: Image section with grid shown ( zoom factor = 10 )
17.18.1 Properties
The following table describes selected properties of an ImageView:
| Property | Type | Description |
|---|---|---|
| Image | Image | Sets the image displayed in the ImageView or returns this image. |
| Grid | Boolean | For the value True, a grid is displayed or returned for an integer zoom level greater than 2. |
| UseMouse | Boolean | For the value True the ImageView reacts to mouse events or returns the value. |
| Zoom | Float | Sets the zoom factor or returns the zoom factor. For example, the value 2 corresponds to twice the display size of the original image. |
Table 17.18.1.1: Properties of the ImageView component
17.18.2 Methods
| Method | Description |
|---|---|
| EnsureVisible ( X As Integer, Y As Integer, W As Integer, H As Integer ) | Ensures that a specified area of the display area is visible. |
| ImageToView ( ImagePoint As Point ) As Point | Converts an image point from image coordinates to ImageView coordinates. |
| ViewToImage ( ViewPoint As Point ) As Point | Converts a point from ImageView coordinates to image coordinates. |
| Update ( [ Image As Image ] ) | Replaces the displayed image in the ImageView with an image passed as an optional argument. The zoom factor is not reset during the update. |
| ZoomFit ( ) | Adjusts the image to the size of the ImageView by setting the zoom level internally. |
Table 17.18.2.1: Overview of selected methods of the class ImageView
17.18.3 Project 1
In project 1, you are presented with a simple image viewer → Figure 17.18.1. An image in grey tones is displayed as the start image. Via a dialogue (MultiSelect) you can select one picture or several pictures (picture list) in a directory.
- You can change the zoom factor in the interval from 0.1 to 10 with a step size of 0.1 or 10% with the slider.
- With a toggle button next to it, you determine whether a grid is displayed or not for an integer value for the zoom factor greater than 2.
- With a click on another button, the image is displayed completely in the ImageView (ZoomFit method).
- With the button labelled 1 you can display the image in its original size. In both cases, the current zoom factor is synchronised with the zoom for the slider.
- Use the two navigation buttons < and > to navigate through the images in the image list. The file name of the current image is displayed in the button box. Each newly displayed image is always shown in its original size.
17.18.4 Project 2
In the second project you can learn about the close relationship between the two components ImageView and ScrollArea:
Figure 17.18.4.1: ScrollArea and ImageView