Как я могу наложить несколько PNG и сделать каждый из них кликабельным в видимой области?

Question

Мне нужно настроить интерактивную систему изображений для динамически создаваемого контента.Изображение состоит из фонового изображения и нескольких изображений в оттенках серого.

Фоновое изображение:

Маски: , , , ,

Каждая область, определяемая маской, должна быть выделена при наведении курсора мыши, кликнуть по изображению и открыть определенную ссылку.

Как мне сделать это самым умным способом?Мне нужно, чтобы это было отзывчивым и работать с парой сотен масок.

Я еще ничего не пробовал, но я провел некоторые исследования, которые привели к двум возможным решениям:

A. Проследите маски и создайте координаты карты изображения для каждой из них, которые могут быть наложены на исходное изображение.(кажется трудным, особенно для масок с отверстиями).

B. Сложите все маски сверху, перетасуйте их и найдите белые пиксели.(кажется, интенсивно использует процессор, перетасовывая хотя бы сотни изображений).

Я надеюсь, однако, что есть третье, более простое, более оптимизированное и более элегантное решение?

Любой совет?

Я хотел бы услышать от любого, кто имеет опыт с чем-то подобным.

Answer 1

Вы должны попытаться заранее вычислить как можно больше из этого, особенно потому, что, вероятно, невозможно загрузить сотни этих изображений маски в браузере пользователя.

Ваше решение A выглядит неплохо при условии, что можно рассчитать координаты по форме пикселей.

Другая идея может заключаться в объединении изображений маски в одно изображение путем цветового кодирования фигур маски (заполнение каждой фигуры различным цветом). Цвета могут быть назначены случайным образом, если они используются только один раз. Наряду с этим предоставьте простую таблицу поиска для сопоставления цвета с формой (например, #f00 => cube, #0f0 => donut, ...). Теперь при нажатии на исходное изображение:

1. Найти пиксельную координату клика
2. Поиск цвета в изображении маски по той же координате
3. Поиск формы для цвета в справочной таблице

Answer 2

Прежде всего, даже с сотнями масок, это не должно быть медленно, потому что требуемый алгоритм имеет сложность O (n), и это не медленно.

Единственное узкое место, которое у вас будет, этопоиск пикселей, который является дорогостоящей операцией (если вы не вносите определенные изменения).

Я бы выбрал B.

Допустим, ваши координаты мыши равны x: 400, y: 300, относительнок вашему фоновому изображению, которое имеет размеры 800x600.
Вы бы перебрали все маски и проверили:
mask.getPixel (400, 300) == white?
Если это так, используйте эту маску, смешайте ееповерх исходного изображения с определенным альфа-фактором, поэтому фон становится серым.

Узкое место: mask.getPixel () Вам придется делать это n раз, если у вас есть n масок и последняя из них.Как я уже говорил, это дорогой поиск;так что вы можете оптимизировать его?
Да, вырежьте ненужные поиски, используя: ограничивающие блоки.
Но чтобы использовать ограничивающие блоки, вы должны сначала создать данные ограничивающего прямоугольника для каждой маски, что вы могли бы сделать один раз, когдаВы загружаете (без проблем).
Ограничивающий прямоугольник определяет верхний левый и нижний правый угол, которые "ограничивают" белую область плотно.Другими словами, вы должны определить минимальную и максимальную координаты X и Y, где пиксель белый.
Если координаты мыши находятся за пределами этого поля, не пытайтесь искать, так как это точно не будет в белой области.

Редактировать: Так как мне было скучно, я пошел дальше и реализовал это ...
Проверьте это .

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

У меня должно быть фоновое изображение "img.jpg" и маски "1.jpg" .. "5.jpg" в одной папке!
Работает с Firefox, Chrome говорит:canvas был испорчен данными из разных источников "... это быстрый и грязный хак, делай с ним что хочешь, если он тебе пригодится!