Pinch zoom with focus panning

[FizixTiramu]

We've created an Instagram style image edit/uploader, most features are working well but we are struggling to figure out pinch to zoom with focus panning.

This is part of a much larger application, so I'll explain the overall flow.

Basic flow:

1. The user selects an image from their phone.
2. A square or portrait view is added as a cropping guide
3. The image is added to the view in an ImageView and is scaled and centered to the cropping guide
4. User can pan image via touch on both axis, and we have smooth snapping if the image exceeds bounds
5. User can zoom image in and out via pinch, currently we hold the image to the centre of the cropping guide

This generally works fine, but isn't elegant. What we want is a flow closer to instagram where the image will pan during zoom to the pinch focus. We're reading the pinch focusX and foxusY, and if we display those co-ords on screen as a square it matches where the user is pinching.

What we're struggling to figure out is how to pan the image to the focusX/Y during zoom so that the focus point centres in the bounds guide.

Does anyone know how to utilise focusX and focusY in this manner? Or able to point us in the right direction?

[m1ga]

Side note: you could use external modules for cropping: https://github.com/m1ga/ti.imagecrop

Idea:
I'm not sure if you can use those values without some workarounds. Some native examples talk about matrix post scale/translate values you would need to add. So maybe a Titanium workaround would be trying to place the image inside another view and scale that outer view. You just have to find a way to move both items so the image is at the position the users wants it to be and the outer view always is centered and when you scale it it scales from the center and the image scales from the "focus" point.

Untested and just a theory :) I would look at some web examples, maybe you'll find a way to do it there and can adapt it to Ti views.

[FizixTiramu]

Side note: you could use external modules for cropping: https://github.com/m1ga/ti.imagecrop

Idea: I'm not sure if you can use those values without some workarounds. Some native examples talk about matrix post scale/translate values you would need to add. So maybe a Titanium workaround would be trying to place the image inside another view and scale that outer view. You just have to find a way to move both items so the image is at the position the users wants it to be and the outer view always is centered and when you scale it it scales from the center and the image scales from the "focus" point.

Untested and just a theory :) I would look at some web examples, maybe you'll find a way to do it there and can adapt it to Ti views.

Thanks,

We've got cropping working and I've looked at that module. What you're describing sounds like the direction we need to go in, I'm finding examples online are mixed atm. But I'll keep looking less anyone has any specific advice.