Panning and Zooming Control
This module contains a component that enables you to zoom in and out of an image as well as panning around in the image. The component supports both mouse wheel scrolling and pinch zooming. You can also control the zoom level by connecting it to Buttons.
The module also contains a small example.
The sizing of the control is best controlled by putting it in a Group node with the relevant dimension setting applied, as the Panning Control will always try to fill its parent.
The Panning Control
| Data | Description |
|---|
| Zoom Level | A number that sets the current Zoom Level of the image as a scale. For example 1 means it's the natural size of the image, 0.5 means zoomed out to half the size, 2.0 means zoomed in to double the size. Note that the Max Zoom Level and Min Zoom Level will adjust the zoom level so it matches the limits. |
| Max Zoom Level | The maximum allowed zoom level. |
| Min Zoom Level | The minimum allowed zoom level. |
| Enable Pinch Zooming | If true enables pinch zooming on the image. |
| Enable Scroll Wheel Zooming | If true enables scroll wheel or track pad zooming. |
| Image | A source to an image that should be displayed by the Panning Control. |
| Enable Clip | If set to true will enable clipping on the Panning Control, meaning it will clip any parts of the zoomed image sticking out outside the control. |
| Constraint to Container | Set to true this will ensure that it's not possible to scroll or zoom to a position where there is empty space between the image and the Panning Control. |
| Signal | Description |
|---|
| Zoom In | This signal will trigger a Zoom In into the image. |
| Zoom Out | This signal will trigger a Zoom Out of the image. |
Outputs
| Data | Description |
|---|
| X pos | The x position (in image coordinates) of the top left corner of what's visible of the image in the Panning Control. If Constraint to Container is set to false this can be a negative number, if there is empty space to the left of the image. |
| Y pos | The y position (in image coordinates) of the top left corner of what's visible of the image in the Panning Control. If Constraint to Container is set to false this can be a negative number, if there is empty space to the top of the image. |
| Height | The height (in image coordinates) of the visible rectangle of the image in the Panning Control. Note that if Constraint to Container is set to false this height can be larger than the natural image height, i.e. when there is empty space to the bottom of the image. |
| Width | The width (in image coordinates) of the visible rectangle of the image in the Panning Control. Note that if Constraint to Container is set to false this width can be larger than the natural image width, i.e. when there is empty space to the right of the image. |
| Current Zoom Level | The current Zoom Level applied to the Panning Control |
| Signal | Description |
|---|
| View Updated | This signal is sent whenever a new area is visible of the image, e.g. when the user have panned or zoomed. |