Получение видимой области изображения в React Native ScrollView - PullRequest
Новая
       19

Получение видимой области изображения в React Native ScrollView

0 голосов
/ 01 февраля 2019

У меня есть scrollView с одним изображением.Изначально изображение имеет ту же ширину и высоту, что и ScrollView.

Я пытаюсь обрезать это изображение, основываясь на том, как пользователь увеличил и переместил изображение.По сути, я хочу знать, какая часть изображения видима, чтобы я мог соответствующим образом обрезать его.

Я использую ImageManipulator от expo, чтобы обрезать его, поэтому я покрыл эту часть.Но получить размеры той части изображения, которая видна после масштабирования / перетаскивания, - вот что меня беспокоит.

Очень признателен!

1 Ответ

0 голосов
/ 08 марта 2019

Логика заключается в том, чтобы сначала заполнить компонент Image размером ScrollView.Таким образом, размер изображения будет равен размеру ScrollView.

Сначала вам нужно установить directionalLockEnabled prop на false и horizontal prop на 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.

. Для подробного примера реализации, вы можете обратиться к этому файлу из реагироватьnative-community / Reaction-native-image-редактор хранилище

...