If you want to display images in a Gambas programme, you will want to provide as large a display area as possible. If this is not possible, then using the ScrollArea control element can alleviate this shortcoming because you can then view the image in sections. You can use the Image.Stretch(..) method to conveniently integrate a zoom function for the image to be displayed.
Figure 23.4.7.1: Image display in a ScrollArea with zoom function
There are context menus for both the horizontal and vertical scroll bars of a ScrollArea, which can be particularly interesting in connection with the ScrollArea.Tablet property:
Figure 23.4.7.2: Context menu for the scroll bars of a ScrollArea
The ScrollArea (gb.qt5) component is a DrawingArea with a scroll bar. To use this control, you must define the size of the content (image size) using the .ResizeContents(..) method and draw the content in the draw event handler.
Only selected properties, methods and events of the component are presented and described in the next section.
Property | Type | Description |
---|---|---|
ScrollBar | Integer | Use the constants None (0), Horizontal (1), Vertical (2) and Both (3) to specify whether no, one or one or two scroll bars are to be displayed as required. You can also read out the number and type of scroll bars displayed. |
Tablet | Boolean | True is used to specify that tablet events are treated like corresponding mouse events (from version 3.4.0) or to determine whether this setting currently applies. |
ScrollX | Integer | Reads or sets the horizontal scroll position. |
ScrollY | Integer | Reads or sets the vertical scroll position. |
Table 23.4.7.1.1: Selected properties - ScrollArea
Method | Description |
---|---|
ResizeContents ( W As Integer, H As Integer ) | Defines the size of the content of the ScrollArea |
Scroll ( X As Integer, Y As Integer ) | Scrolls the content to the given position |
Table 23.4.7.1.2: Selected methods - ScrollArea
Events | Description |
---|---|
Scroll ( ) | The event is triggered when a scroll bar of the ScrollArea has been activated. |
Draw ( ) | The event is triggered when something needs to be redrawn. |
Table 23.4.7.1.3: Selected events - ScrollArea
The selected properties, methods and events are used in the project and a zoom function is integrated. Only images can be loaded and displayed as content.
The source code is specified in full:
[1] ' Gambas class file [2] [3] Private imgUploaded As Image [4] Private imgDisplay As Image [5] Private fImageZoom As Float [6] [7] Public Sub Form_Open() [8] [9] FMain.Center() [10] FMain.Resizable = False [11] lblImageResolution.AutoResize = True [12] lblImageResolution.Expand = False [13] lblImageResolution.Visible = False [14] pSpace.Expand = True '-- Variable interspace [15] imgUploaded = Image.Load("Images/fraktal.jpg") '-- Local start image [16] imgDisplay = imgUploaded [17] ScrollArea1.ResizeContents(imgDisplay.W, imgDisplay.H) [18] ScrollArea1.Scroll(0, ScrollArea1.H + 8) [19] [20] fImageZoom = 1 [21] [22] End [23] [24] Public Sub btnOpenImage_Click() [25] [26] Dialog.Title = "Select a picture..." [27] Dialog.Filter = ["*.png;*.jpg;*.jpeg;*.gif;*.xpm", "Image files: "] [28] If Dialog.OpenFile() Then Return [29] [30] Try imgUploaded = Image.Load(Dialog.Path) [31] If Error Then [32] Message.Error("Error when opening the image file!") [33] Return [34] Endif [35] ScrollArea1.Scroll(0, 0) [36] imgDisplay = imgUploaded [37] ScrollArea1.ResizeContents(imgDisplay.W, imgDisplay.H) [38] ScrollArea1.Refresh [39] Wait [40] [41] lblImageResolution.Visible = True [42] lblImageResolution.Text = "Image size: " & imgUploaded.W & " x " & imgUploaded.H & " Pixel" [43] [44] End [45] [46] Public Sub ScrollArea1_Draw() [47] If imgDisplay Then [48] Draw.Image(imgDisplay, - ScrollArea1.ScrollX, - ScrollArea1.ScrollY) [49] Endif [50] End [51] [52] Public Sub btnZoomUp_Click() [53] If fImageZoom < 3.01 Then [54] fImageZoom = fImageZoom + 0.05 [55] Endif [56] Display() [57] End [58] [59] Public Sub btnZoomDown_Click() [60] If fImageZoom > 0.09 Then [61] fImageZoom = fImageZoom - 0.05 [62] Endif [63] Display() [64] End [65] [66] Public Sub btnOriginal_Click() [67] fImageZoom = 1 [68] Display() [69] End [70] [71] Private Sub Display() [72] imgDisplay = imgUploaded.Stretch(Round(imgUploaded.W * fImageZoom, 0), Round(imgUploaded.H * fImageZoom, 0)) [73] lblImageResolution.Text = "Image size: " & Round(imgUploaded.W * fImageZoom, 0) & " x " & Round(imgUploaded.H * fImageZoom, 0) & " Pixel" [74] ScrollArea1.ResizeContents(imgDisplay.W, imgDisplay.H) [75] ScrollArea1.Refresh() [76] Wait [77] End
Notes: