How can I constrain a "on drag"-image pan to the borders of the image?

Michael Reuter shared this question 22 months ago
Answered

I would like to pan a image in a dynamic panel. I'm using the "on drag"-method described in the tutorials (https://www.justinmind.com/support/how-to-simulate-a-zoom-and-pan-effect-on-an-image/).


However I would like to constrain the images movement to the size of the image. I don't want the background to show when the image is moved to far. Any ideas?


Best regards Michael

Comments (3)

photo
1

Hi Michael,


Apologies for the late reply. We're working on creating an example for this, but it's taking some time as it's more complex to create than it may initlaly seem.


Best,

Danielle

photo
1

Hi Danielle,


ok, thank you. That will be very welcome.


Best regards Michael

photo
1

Dear Michael,

The easiest way to constraint the image movement is to make the dynamic panel much bigger and then, on the move action, check the “constraint to parent” checkbox. The tricky thing is how to make the dynamic panel big enough to let the whole image to be seen but not big enough so the background is visible.

The dimensions must be:

width=image with * 2 - visible area width (only if image is wider than visible area)

height=image height * 2 - visible area height (only if image is higher than visible area)

And, in order to centre the dynamic panel:

left=(dynamic panel width – visible area width) / 2

top=(dynamic panel height – visible area height) /2

Then try to centre the image inside the dynamic panel and check the “constraint to parent” checkbox on the move action.

See attached prototype. Hope this helps.

Best,

Sonia Durán