I have several overlapping images, with some areas transparent in each of them so the images underneath may be seen. I want the user to be able to select an image by touch. If one image is on top of another, they need to be able to select the below image by touching it through a transparent area of the top image, as they can see it through that area.
我有几个重叠的图像,其中每个都有一些透明的区域,所以下面的图像可以看到。我希望用户能够通过触摸选择图像。如果一个图像在另一个图像的顶部,他们需要能够通过触摸顶部图像的透明区域来选择下面的图像,因为他们可以通过该区域看到它。
I see there are native solutions in iOS that allow touch to fall through based on the alpha property of the pixel. Is there any similar approach in React Native that will allow a touch to detect the first non-transparent pixel and identify the image that the pixel is from?
我看到iOS中有一些本地的解决方案,可以根据像素的Alpha属性来允许触摸失败。在Reaction Native中有没有类似的方法,允许触摸检测第一个非透明像素并识别该像素来自的图像?
更多回答
优秀答案推荐
For future reference I managed to solve it in this way:
Utilised this library to return a pixel colour for an image and X, Y coordinates https://github.com/alicansa/react-native-get-pixel
为了便于将来参考,我设法用这种方式解决了这个问题:利用这个库返回图像的像素颜色和X,Y坐标https://github.com/alicansa/react-native-get-pixel
Calculated based on the X,Y coordinate of the touch the corresponding X,Y coordinate of each of the overlapping images.
基于触摸的X、Y坐标计算每个重叠图像的对应X、Y坐标。
Used image masks where the non-transparent parts of the image had a solid colour, and ran the pixel colour check on each image mask in order of top to bottom to see which returned a non [0,0,0] value. (This is because transparent areas return [0,0,0] in the above library, it does not appear to have an alpha check.)
使用了图像的非透明部分具有纯色的图像蒙版,并按从上到下的顺序对每个图像蒙版运行像素颜色检查,以查看哪个图像蒙版返回了非[0,0,0]值。(这是因为透明区域在上面的库中返回[0,0,0],它似乎没有Alpha检查。)
The image masks have to be in the drawable folder on the Android folder structure, as described in the library. As I was using a solid colour where the images are non-transparent, it meant I could use a smaller resolution image mark for these checks which sped up how long it takes, as this is an asynchronous check.
图像蒙版必须位于Android文件夹结构的可绘制文件夹中,如库中所述。因为我使用的是纯色,图像是非透明的,这意味着我可以使用较小的分辨率图像标记来进行这些检查,这加快了检查所需的时间,因为这是一个异步检查。
更多回答
我是一名优秀的程序员,十分优秀!