在React Native ScrollView中获取Image的可见区域

Question

我有一个带有单个图像的scrollView。最初，Image与ScrollView具有相同的宽度和高度。

我试图根据用户如何缩放和移动图像来裁剪此图像。基本上，我想知道图像的哪个部分是可见的，这样我就可以相应地裁剪它。

我正在使用expo的ImageManipulator来裁剪它，所以我已经覆盖了那部分。但是为了获得缩放/拖动之后图像的哪个部分可见的尺寸是什么让我烦恼。

非常感激！

Answer 1

这里的逻辑是首先填充Image大小内的ScrollView组件。这样，图像的大小将等于ScrollView的大小。

首先，你需要将directionalLockEnabled道具设置为false，将horizontal道具设置为true，以使ScrollView水平滚动。

然后，设置maximumZoomScale和minimumZoomScale道具，使你的ScrollView可缩放。现在，每次你缩放和滚动你的ScrollView它将使用onMomentumScrollEnd参数激发onScrollEndDrag和event，你可以从中获得你的ScrollView的可见部分，通常，

1. event.nativeEvent.contentOffset
2. event.nativeEvent.contentSize
3. event.nativeEvent.layoutMeasurement

由于您的Image组件大小与ScrollView组件的大小相同，它将为您提供ScrollView中图像的确切可见区域。

有关详细实现示例，您可以参考this file存储库的react-native-community/react-native-image-editor