如何覆盖多个PNG，并在可见区域中单击每个PNG？ [英] How can I overlay multiple PNGs and have each of them clickable in their visible area?

问题描述

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

I need to set up a clickable image system for dynamically created content. The image consists of a background image, and several grey-scale mask images.

背景图像：

掩码：
，，，，

Masks: , , , ,

由遮罩定义的每个区域都应在鼠标悬停时突出显示，可单击在图片上，然后打开某个链接。

Each area, defined by a mask, should be highlighted on mouse over, clickable on the image, and open a certain link.

我该如何最聪明地做到这一点？我需要这是响应性的，并使用数百个口罩。

How do I do this the smartest way? I need this to be responsive, and work with a couple of hundred masks.

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

I haven't tried anything yet, but I've done some research, which have resulted in two possible solutions:

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

A. Trace the masks, and create imagemap coordinates for each, which can be overlayed the original image. (seems difficult, especially with masks that have holes).

B。将所有口罩放在顶部，然后将其打乱并搜索白色像素。 （似乎是处理器密集型的，尽管可以处理数百张图像）。

B. Layer all masks on top, and shuffle through them and search for white pixels. (seems processor intensive, shuffling though hundres of images).

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

I hope however, that there is a third, simpler, more optimized and more elegant solution?

有什么建议吗？

我很想听听有任何经验的人的来信

I'd love to hear from anyone who have any experience with something similar.

推荐答案

首先，即使具有100个蒙版，这也不应太慢，因为所需的算法具有复杂性

First of all, even with 100s of masks, this should not be slow, because the required algorithm has a complexity of O(n) and that is not slow.

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

The only bottleneck you will have is the pixel lookup, which is an expensive operation (unless you do certain modifications).

我会选择B。

假设您的鼠标坐标是x：400，y：300，相对于尺寸为800x600的背景图像。

您将遍历所有蒙版，然后检查：

mask.getPixel（400，300）==白色？

如果是这样，请使用该蒙版，将其与原始图像混合并使用特定的Alpha

Lets say your mouse coordinates are x:400, y:300, relative to your background image which has the dimensions 800x600.
You would iterate over all masks, and check:
mask.getPixel(400, 300) == white?
If so, use that mask, blend it over the original image with a specific alpha factor so the background get grayed out.

瓶颈是：mask.getPixel（）
如果您有n个蒙版，并且它的最后一个。
正如我所说的，这是一个昂贵的查询；

是的，可以使用以下方法来消除不必要的查找：边界框。

但是要使用边界框，必须首先为每个边界框创建边界框数据。

边框定义了紧紧地绑定白色区域的左上角和右下角。换句话说，您必须确定最小和最大X&像素为白色的Y坐标。

如果鼠标坐标在此框之外，请不要打扰，因为它肯定不在白色区域。

The bottleneck is: mask.getPixel() You would have to do that n times if you have n masks and its the last one. As I stated, its an expensive lookup; so can you optimise it?
Yes, cut out unnecessary look-ups by using: bounding boxes.
But to use bounding boxes, you must first create the bounding box data for each mask, which you could do once when you load (no problem).
The bounding box defines the upper left and bottom right corner that "bounds" the white area snugly. In other words, you must determine min and max X & Y coordinate where the pixel is white.
If the mouse coordinates are outside of this box, do not bother making a lookup, as it will certainly not be in the white area.

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

查看。

Since I was bored, I went ahead and implemented it...
Check it out.

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

Gotto具有背景图像 img.jpg和蒙版 1.jpg .. 5.jpg在同一文件夹中！

与Firefox配合使用，Chrome表示画布已被跨源数据污染 ...这是一个快速的肮脏技巧，用它做任何您想做的事，如果它对您有用！

Gotto have the background image "img.jpg" and the masks "1.jpg" .. "5.jpg" in the same folder!
Works with firefox, chrome says "The canvas has been tainted by cross-origin data"... its a quick n dirty hack, do whatever you want with it, if its of any use to you!

这篇关于如何覆盖多个PNG，并在可见区域中单击每个PNG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！