我有一个滚动视图,里面有一个图像。最初,图像具有与ScrollView相同的宽度和高度。
我正在尝试根据用户缩放和移动图像的方式裁剪此图像。基本上,我想知道图像的哪个部分是可见的,以便我可以相应地裁剪它。
我使用expo的ImageManipulator来裁剪它,所以我已经覆盖了那部分。但是要获得缩放/拖动后图像的哪个部分可见的尺寸是困扰我的问题。
非常感谢!
这里的逻辑是首先填充ScrollView
大小内的Image
组件。这样,图像的大小将等于ScrollView
的大小。
首先,您需要将directionalLockEnabled
道具设置为false
,horizontal
道具设置为true
以使ScrollView
水平滚动。
然后,设置maximumZoomScale
并minimumZoomScale
道具,使您的ScrollView
可缩放。现在,每次您在ScrollView
中缩放和滚动时,它都会触发onMomentumScrollEnd
并使用event
参数进行onScrollEndDrag
,您可以从中获取ScrollView
的可见部分,这通常是,
-
event.nativeEvent.contentOffset
-
event.nativeEvent.contentSize
-
event.nativeEvent.layoutMeasurement
由于您的Image
组件大小与ScrollView
组件的大小相同,因此它将为您提供图像在ScrollView
中的确切可见区域。
有关详细的实现示例,您可以参考 react-native-community/react-native-image-editor 存储库的此文件