用 Alpha 反应原生可点击图像答案

【问题标题】：React Native clickable Image with Alpha用 Alpha 反应原生可点击图像
【发布时间】：2016-12-23 12:58:21
【问题描述】：

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

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

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

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

【问题讨论】：

可以选择裁剪图像吗？可以发图吗？
这是必需的 - 由可点击的图像按钮组成的罗塞塔

标签： image react-native click alpha

【解决方案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

【讨论】：