【问题标题】: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

【讨论】:

    猜你喜欢
    • 2017-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-19
    • 2020-12-12
    • 2018-02-27
    • 2018-05-04
    • 2016-06-22
    相关资源
    最近更新 更多