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

Question

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

我试图裁剪基于用户如何已经缩放和移动图像此图像。基本上，我想知道是什么图像的一部分是可见的，这样我就可以相应地裁剪。

我正在使用expo的ImageManipulator对其进行裁剪，因此我已经覆盖了那部分。但要获得图像中的哪个部分的尺寸是经过放大/阻力是什么缠着我可见。

非常感谢！

Answer 1

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

首先，您需要将directionalLockEnabled属性设置为false，将horizontal属性设置为true，以使ScrollView水平滚动。

然后，设置maximumZoomScale和minimumZoomScale道具，使您的ScrollView可缩放。现在，每次放大和滚动ScrollView时，它都会使用onMomentumScrollEnd参数触发onScrollEndDrag和event，从中可以获取{{1 }}，通常是

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

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

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