React native 在图像上打印点并在React Native中的不同屏幕大小上渲染

所以我有一个区域的图像，用户可以通过触摸屏幕来绘制点。然后，通过获取用户按键上的

e.nativeEvent.locationX

，

e.nativeEvent.locationY

，将这些点存储在数据库中

因此，当我在平板电脑上绘制点，并使用我的电脑查看现场图像上的绘图位置时，它的显示不正确。我假设这是由于不同的屏幕大小，图像的大小取决于设备的屏幕大小

如何解决此问题，以便无论使用何种设备，绘图都保持一致

我们非常感谢任何其他可能的解决方案

下面是我如何显示图像/获取用户的x轴和y轴值，按下时，这些值由函数

actainposition

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

下面是我如何显示用户的绘图（注意这通常在不同的屏幕/组件上）。这些图从数据库中检索并显示在对象数组中。如下图所示，.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>

{this.state.PlotsArray.map（（数据）=>{
返回(
)
})}        

我认为您的

获取位置

功能需要考虑图像元素的左右值（从窗口/页面），同时获取点击的实际x y坐标（如果其被填充，或用户被滚动等）

在记录坐标时，还需要获得图像的大小。例如，我们有一个类似于：

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

在图像的onLoad prop中调用。这样，当您存储x，y坐标时，您还可以记录当时图像的大小（例如200px x 200px）。稍后，当渲染覆盖在图像上的单击时，可以在“查看”设备上评估图像的大小，并相应地调整x y坐标，或者将其存储为百分比而不是固定像素

---

这里有一个粗略的例子，说明如何使用左上角的%值来调整图像的大小（可以编辑图像的高度和宽度）

但是您建议如何调整查看设备上的x和y坐标？我觉得找出这个可能会解决我的问题。我想你应该把它存储为百分比。因此，无论何时设置，您都需要计算出相对于图像的x，y坐标，然后将其作为当时图像高度和宽度的左上角百分比。稍后，即使图像是500px x 500px，你也会有y坐标，比如说20%（0.2），x坐标是30%（0.3），你可以在图像上设置一个标记，基于500*0.2=Top:100px和500*0.3=Left:150px等。希望你能用一些代码来演示，比如我的相关代码？如果不是的话，这绝对没问题，你让我对我的问题有了更好的理解。嗨，我在最初的回答中添加了一个非常快速的例子。如果将图像宽度和高度编辑为900px宽或900px高等，则打印点通常位于中间房屋的顶部。因此，在你的应用程序中，只要你的containing

view

是图像的宽度（我使用display:inline block在这里用普通HTML实现），然后使用绝对定位和左上角的%通常可以实现你需要的。尤其是当您不希望图像在不同的设备上有那么大的变化时。希望有帮助！

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