使用 Alpha 反应本机可点击图像

Question

我有一张带有 alpha 通道 的 .png 格式的图像，我希望它可以点击。仅当单击真实图像（而不是 alpha 背景）时才应检测到单击。

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

我想用这些元素创建一个可点击的圆圈

感谢您的帮助，祝您圣诞快乐！！

Answer 1

您可以检测图像上的哪个位置被点击，然后图像上应该有一些元数据来检测它是否在非 alpha 范围内。

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

ImageService 将是存储每个图像的元数据和逻辑的地方。您可能需要多边形算法中的一个简单点。

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

使用 Alpha 反应本机可点击图像

React Native clickable Image with Alpha

image

react-native

click

alpha