search

openspacelabs / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
212 stars 58 forks source link

Maybe wrong offset values when zoomLevel different than 1.0 #31

Closed zebaroni closed 2 years ago

zebaroni commented 2 years ago

Hey guys, so im trying to create a screen where the user can "highlight" parts of an image . To do that, the user can move the highlight "mark" with a PanResponder, and i save the relative position of this mark to the image (ZoomableView)...

All is good when im saving this position with a zoomLevel of 1.0 in the ZoomableView, but things start to get a bit weird when i try to increase the zoomLevel value.

For example:

I have an image with 100% of the screen width (lets say 375) and a zoomLevel of 1.0. If i drag this image out of the screen (bindToBorders: false) i get an OffsetX of 375. Great, working properly.

If i try to do that with a zoomLevel different than 1.0, i get a value different than 375. My first thought is that this random value is scaled based on the new zoomLevel, but i already tried to multiply and divide it by the zoomLevel and i didnt get the original offset value (375).

Is that an expected behavior?

thomasttvo commented 2 years ago

This is expected. It's because of this code in ReactNativeZoomableView

 {
  transform: [
    { scale: this.zoomAnim },
    ...this.panAnim.getTranslateTransform(),
  ],
},

As you can see the offset is appended after the scale, so all the offsets need to be calculated based on the scale. This is not ideal, and we're gonna revert this order in the next major release.