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



我有一个滚动视图,里面有一个图像。最初,图像具有与ScrollView相同的宽度和高度。

我正在尝试根据用户缩放和移动图像的方式裁剪此图像。基本上,我想知道图像的哪个部分是可见的,以便我可以相应地裁剪它。

我使用expo的ImageManipulator来裁剪它,所以我已经覆盖了那部分。但是要获得缩放/拖动后图像的哪个部分可见的尺寸是困扰我的问题。

非常感谢!

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

首先,您需要将directionalLockEnabled道具设置为falsehorizontal道具设置为true以使ScrollView水平滚动。

然后,设置maximumZoomScaleminimumZoomScale道具,使您的ScrollView可缩放。现在,每次您在ScrollView中缩放和滚动时,它都会触发onMomentumScrollEnd并使用event参数进行onScrollEndDrag,您可以从中获取ScrollView的可见部分,这通常是,

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

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

有关详细的实现示例,您可以参考 react-native-community/react-native-image-editor 存储库的此文件

相关内容

  • 没有找到相关文章

最新更新