如何覆盖多个PNG，并在可见区域中单击每个PNG？

Question

我需要为动态创建的内容设置可点击的图像系统。该图像包括一个背景图像和几个灰度蒙版图像。

背景图片：

面具： ，，，，

由蒙版定义的每个区域都应在鼠标悬停时突出显示，在图像上单击并打开特定链接。

如何最聪明地做到这一点？我需要此功能以作出响应，并使用数百个口罩。

我还没有尝试过任何东西，但是我进行了一些研究，得出了两种可能的解决方案：

A。。跟踪蒙版，并为每个蒙版创建图像映射坐标，这些坐标可以覆盖原始图像。 （似乎很困难，尤其是在带孔的口罩中。）

B。。将所有蒙版置于顶部，然后对其进行随机排列并搜索白色像素。 （似乎占用大量处理器资源，但可以通过数百张图像进行混洗）。

但是我希望有第三种，更简单，更优化和更优雅的解决方案？

有什么建议吗？

我很想听听任何有类似经验的人。

Answer 1

首先，即使具有100个掩码，这也不应该太慢，因为所需的算法的复杂度为O（n），而且并不慢。

唯一的瓶颈是像素查找，这是一项昂贵的操作（除非您进行某些修改）。

我会和B一起去。

假设您的鼠标坐标是相对于背景图片（尺寸为800x600）的x：400，y：300。
您将遍历所有蒙版，然后检查：
mask.getPixel（400，300）==白色？
如果是这样，请使用该蒙版，将其与特定的alpha因子混合在原始图像上，以使背景变灰。

瓶颈是：mask.getPixel（） 如果您有n个蒙版及其最后一个蒙版，则必须执行n次。 正如我所说，这是一个昂贵的查询；这样可以优化吗？
是的，请使用边界框来消除不必要的查找。
但是要使用边界框，必须首先为每个蒙版创建边界框数据，在加载时可以执行一次（没问题）。
边界框定义了紧紧地“绑定”白色区域的左上角和右下角。换句话说，您必须确定像素为白色时的最小和最大X和Y坐标。
如果鼠标坐标不在此框内，请不要费心查找，因为它肯定不在白色区域。

编辑：由于我很无聊，所以我继续执行它...
Check it out。

//preProcessMasks() & trackMouse() is where everything happens

Gotto在同一文件夹中具有背景图像“ img.jpg”和蒙版“ 1.jpg” ..“ 5.jpg”！
chrome与firefox搭配使用时说：“画布已被跨域数据污染”……这是一个快速的肮脏技巧，只要有帮助，就可以用它做任何您想做的事！

Answer 2

您应该尝试尽可能多地进行预计算，尤其是因为在用户的浏览器中下载数百张这样的蒙版图像可能不可行。

您的解决方案A似乎是个不错的选择，只要可以从像素形状中计算出坐标即可。

另一个想法可能是通过对遮罩形状进行颜色编码（用不同的颜色填充每个形状）来将遮罩图像组合到单个图像中。只要只使用一次，就可以随机分配颜色。并为此提供一个简单的查找表，以进行颜色到形状的映射（例如#f00 => cube, #0f0 => donut, ...）。现在，当单击原始图像时：

1. 找到点击的像素坐标
2. 在相同坐标处查找蒙版图像中的颜色
3. 在查找表中查找颜色的形状