Question

如何在图像上形成可触摸的区域[单击位置1显示效果，并且在另一个位置2、3、4、5上显示相同效果和不同效果]

实际上，当我单击图像上的特定位置时，获得相应的x和y坐标，但没有获得图像上可触摸的区域

Answer 1

请关注此

我们必须创建一个类似于这个的映射对象

    const MAPPING = [
  {
    id: '0',
    name: 'First Area Name',
    shape: 'rectangle',
    width: 30,
    height: 40,
    x1: 80,
    y1: 500,
    prefill: 'red',
    fill: 'blue'
  },
  {
    id: '1',
    name: 'Second Area Name',
    shape: 'rectangle',
    x2: 155,
    y2: 540,
    x1: 125,
    y1: 500
  },
]

ImageMapper 的使用

 <ImageMapper
        imgHeight={500}
        imgWidth={250}
        imgSource={imageSource}
        imgMap={MAPPING}
        onPress={(item, idx, event) => this.onAnyAreaPress(item, idx, event)}
        containerStyle={styles.myCustomStyle}
        selectedAreaId="my_area_id"
      />

它根据我们传递的映射提供接触点。请阅读此文档以获取更多信息。 Library

React Native图像映射器（如何使图像上的可触摸区域）

1 个答案: