Блог

Итак, у меня есть изображение поля, в котором пользователь может отображать точки, касаясь своего экрана. Затем эти точки сохраняются в базе данных путем получения e.nativeEvent.locationX , e.nativeEvent.locationY по нажатию пользователя.

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

Как мне решить эту проблему, чтобы графики были согласованными независимо от того, какое устройство вы используете?

Любые другие возможные решения приветствуются.

Ниже показано, как я отображаю изображение / получаю значения пользователя по осям x и y, и при нажатии эти значения извлекаются функцией ObtainPosition

  <TouchableOpacity onPress={this.ObtainPosition}>
       <Image style = {{   
       width:wp('60%'),
       height:hp('100%'),
       resizeMode: 'contain'}} source={require('./pitch.png')}/> 
 </TouchableOpacity>
 

примечание — вы можете увидеть wp и hp это импорт

 import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
 

Ниже показано, как я отображаю графики пользователя (обратите внимание, что обычно это происходит на другом экране / компоненте). Эти графики извлекаются из базы данных и отображаются в виде массива объектов. Как вы можете видеть ниже, функция .map перебирает вызываемый массив PlotsArray , извлекает значения x и y и возвращает представление, которое является нашими графиками.

 <View>
                                                                    
      <Image style = {{   
         width:wp('60%'),
         height:hp('100%'),
         resizeMode: 'contain'}} source={require('./pitch.png')}/>
         {this.state.PlotsArray.map((data) => {
                return (
                      <View 
                      style={{
                               position: 'absolute',
                               left: data.x,
                               top: data.y,
                               backgroundColor:'#242424',
                               width: 10,
                               height: 10,
                               borderRadius: 50
                               }}>
                         </View> 

                               )
                         })}        
</View>
 

Я думаю, что вашей obtainPosition функции необходимо будет учитывать значения элемента изображения слева и справа (из окна / страницы) одновременно с получением фактических координат x y щелчка (если он дополнен, или пользователь прокручивается и т.д.)

Вам также нужно будет получить размер изображения при регистрации координат. Так, например, есть функция, подобная:

 (event) => {
  var {height, url, width} = event.nativeEvent.source;
}
 

вызывается в реквизите загрузки изображения. Таким образом, когда вы сохраняете координаты x, y, вы также можете записать размер изображения в данный момент времени (скажем, 200 пикселей x 200 пикселей). Позже, когда вы визуализируете клики, наложенные на изображение, вы можете оценить размер изображения на устройстве просмотра и соответствующим образом настроить координаты x y или сохранить их в процентах, а не в фиксированных пикселях.

Примерный пример того, как использование значений% сверху и слева может привести к изменению размера изображения https://jsfiddle.net/skfroxyt / (поиграйте с редактированием высоты и ширины изображения)