Skip to main content

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

Inputs

DataDescription
Zoom LevelA 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 LevelThe maximum allowed zoom level.
Min Zoom LevelThe minimum allowed zoom level.
Enable Pinch ZoomingIf true enables pinch zooming on the image.
Enable Scroll Wheel ZoomingIf true enables scroll wheel or track pad zooming.
ImageA source to an image that should be displayed by the Panning Control.
Enable ClipIf 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 ContainerSet 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.
SignalDescription
Zoom InThis signal will trigger a Zoom In into the image.
Zoom OutThis signal will trigger a Zoom Out of the image.

Outputs

DataDescription
X posThe 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 posThe 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.
HeightThe 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.
WidthThe 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 LevelThe current Zoom Level applied to the Panning Control
SignalDescription
View UpdatedThis signal is sent whenever a new area is visible of the image, e.g. when the user have panned or zoomed.