How to read current scale level?

[sasweb]

onPinchEnd provides a scale value as also requested in #48.

I was expecting scale to represent the current zoom factor.
For example: if an image with dimensions 400X300 is zoomed in to 800x600 scale should be 2. If the max scale is set to 5 the scale can never be more than 5. Same for the minimum scale which needs to be at least 1.

After experimenting I found out that this is not the case. I get pretty random scale values which even don't represent my actual zoom action. For example if I zoom in twice, the scale value may drop with the second zoom in. Also, the value is often below 1 and above 5 which should never happen.

So I was wondering how to read the vale and how to get the zoom factor I described.

Thank you!

[likashefqet]

@sasweb Currently, onPinchEnd gives you the scale of the specific pinch gesture, not the total, clamped scale accumulated over multiple gestures.

I could add a new property to the onPinchEnd callback to provide the cumulative, clamped scale, but it might take me a while to get around to it.

In the meantime, if you need the cumulative, clamped scale, you can achieve this by using an animated scale value. Pass this value down to the ImageZoom or Zoomable component, which will handle the cumulative scaling within the defined limits.

You can see an example of this in action here: ExpoImageZoomTab

[sasweb]

@sasweb Currently, onPinchEnd gives you the scale of the specific pinch gesture, not the total, clamped scale accumulated over multiple gestures.

I could add a new property to the onPinchEnd callback to provide the cumulative, clamped scale, but it might take me a while to get around to it.

In the meantime, if you need the cumulative, clamped scale, you can achieve this by using an animated scale value. Pass this value down to the ImageZoom or Zoomable component, which will handle the cumulative scaling within the defined limits.

You can see an example of this in action here: ExpoImageZoomTab

Thank you for the quick response.

So scale is like the delta between old scale and new scale, right?

I think I can add a local state in my component and simply update it onPinchEnd based on that logic while keeping it still uncontrolled. Component wise I guess it would be still cool to have both, the scale delta and the cumulative scale as a state.

Edit: similar for the translate x and y. Would be really helpful to have a state with the offset on the x and y axis compared to the initial state.

[likashefqet]

@sasweb For scaling, you can use something like this:

savedScale = clamp(savedScale * newScale, minScale, maxScale);

As for translation, it’s a bit more complex because there are two types involved:

• Focal translation – this comes from the pinch gesture and adjusts the image based on the scale level and focal point.
• Pan translation – this adjusts the image according to the pan gesture, which moves it around within the container.

I could look into adding this to the onInteractionEnd callback to avoid getting separate, potentially conflicting results from onPinchEnd and onPanEnd. However, as I mentioned, it might take me a while to get to it.

[sasweb]

@sasweb For scaling, you can use something like this:

savedScale = clamp(savedScale * newScale, minScale, maxScale);

As for translation, it’s a bit more complex because there are two types involved:

• Focal translation – this comes from the pinch gesture and adjusts the image based on the scale level and focal point.
• Pan translation – this adjusts the image according to the pan gesture, which moves it around within the container.

I could look into adding this to the onInteractionEnd callback to avoid getting separate, potentially conflicting results from onPinchEnd and onPanEnd. However, as I mentioned, it might take me a while to get to it.

Yes, I was also thinking about onInteractionEnd. Thank you.