Как обнаружить разные сенсорные события на разных частях изображения

Question

Hello Community,

Я руководитель группы разработчиков. Один из моих великих разработчиков работает над сложным приложением для iOS и Android. Он все еще сталкивается с вопросом о том, как разработать одну функциональность. Вот почему я прошу здесь, чтобы я мог помочь ему.

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

У меня есть два вопроса:

1. Если у нас будет ниже изображение, которое будет сокращено больше чем к одному файлу изображения (каждая часть - отдельное изображение файл) тогда мы можем связать их в коде? Или лучше сохранить его как один файл?

2. Не могли бы вы отослать меня к какому-либо методу, классу, образцу кода или любым другим ресурсам о том, как создать аналогичную функциональность в * 1032? * и iOS?

Буду признателен, если вы сможете отослать меня и к подобным образцам кода.

Answer 1

Есть несколько способов справиться с этим: 1) разрезать изображение на части, добавить слушателя для перехвата событий и отобразить их так, чтобы они выглядели как одно связное изображение. 2) Создайте несколько многоугольников, которые зеркально отражают изображение, добавьте одного слушателя к изображению, чтобы захватить местоположение касания, и сопоставьте (x, y) с полигонами, чтобы определить, на каком объекте щелкнули.

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

Answer 2

Создайте другое растровое изображение того же размера, что и основное изображение, и раскрасьте каждую область в определенный c цвет. Вы можете использовать 256 цветов (8 бит) или 16 цветов, чтобы максимально сократить использование памяти. Давайте назовем это эталонное изображение. Сохраните список color = name в вашем коде. Когда пользователь потрогать изображение получить координаты и найти цвет код этой координате в вашем эталонном изображении. Чем найти в своем списке, какой цвет, какая часть.

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

Answer 3

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