アルファでネイティブのクリック可能な画像に反応します

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