알파와 기본 클릭 할 수있는 이미지 반응

Question

나는 알파 채널이있는 .png 형식의 이미지가 있으며 클릭 할 수 있기를 바랍니다. 실제 이미지 (알파 배경이 아닌)가 클릭 된 경우에만 클릭이 감지되어야합니다.

<TouchableHighlight onPress={this.imgClick}> 
     <Image 
      source={this.img1} 
     /> 
</TouchableHighlight> 

그리고 난 이러한 요소

의 클릭 가능한 원을 만들려는 도와 주셔서 감사합니다 그리고 난 당신에게 메리 X - 마스을 기원합니다!

Answer 1

이미지에서 클릭 한 위치를 감지 할 수 있으며 이미지에 메타 데이터가 있어야 비 알파 경계에 있음을 감지 할 수 있습니다.

imgClick = ({nativeEvent: {locationX, locationY}}) => { 
    if (ImageService.inBounds(image, locationX, locationY)) { 
     // do your event handling here 
    } 
} 

ImageService는 메타 데이터 및 로직이 각 이미지에 저장되는 위치입니다. 폴리곤 알고리즘에서 간단한 점이 필요할 것입니다.

https://en.wikipedia.org/wiki/Point_in_polygon