I'm trying to create a simple image viewer where a user can double-tap an ImageSprite to zoom in, and then drag it around with one finger to see different parts of the zoomed image.
What works: The double-tap to zoom logic works perfectly. I am scaling the ImageSprite's Width and Height by 1.5x and recalculating the X/Y coordinates to keep it centered on the Canvas.
The issue: Once the image is zoomed in, the ImageSprite.Dragged event doesn't seem to work at all. The image just stays stuck in the lower right corner and won't pan.
What I've tried so far:
Using the ImageSprite.Dragged event to calculate the movement using currentX - prevX and currentY - prevY.
Using the call ImageSprite.MoveTo block to update X and Y simultaneously.
Checking the Designer view to ensure Screen1.Scrollable is strictly set to False.
I've attached a screenshot of my current blocks. Am I missing something about how the Canvas or ImageSprite handles touch/drag events after the sprite's dimensions have been modified?
Any insights or suggestions would be greatly appreciated. Thank you!
It is because there is nowhere for the imageSprite to go, it cannot move outside the bounds of the canvas. There are ways around this. Place the canvas inside a vertical arrangement. Give the canvas dimensions that are bigger than the dimensions of the vertical arrangement (no bigger than 4000 pixels). Use your method to resize and position the image sprite, then you should be able to move it around.
I am working this up for you, along with another method for double tap.
Thanks TIM. The previous one was a checkpoint project; this is my main project.
I tried applying the suggestions you gave in my app, but I am still not getting the expected result. The zoom works, but the Canvas becomes larger than the image separately. Because of that, the lower button bar becomes invisible.
Also, when the image is zoomed and I try to drag it with one finger, it moves, but when it reaches near the border it suddenly goes back to its original place.
So currently I am facing three problems:
Zoom works but the Canvas and image behave separately.
The bottom button bar disappears when zoomed.
Dragging with one finger is not smooth; near the border the image snaps back.
I would appreciate any guidance on how to properly implement pinch/double-tap zoom with smooth dragging inside the Canvas without affecting the bottom control bar.
Clocks 2 and 3 are firing at initialise, you do not stop Clock3 anywhere
Your sizing requests are not in the correct order or timings, your poor vertical arrangement, canvas and imagesprite do not know what size to be, and you also switch to landscape which further complicates the sizing.
You may need to set the vertical arrangement and canvas to a fixed size (or derived pixel size) instead of fill parent to be gin with.
You should set the origin of the imageSprite to 0.5 / 0.5, then it will set its position based upon its centre point instead of top left.
You have the sizing set to fixed and the theme to classic, not sure it you really want this.
