Как я могу получить доступ к отдельным точкам / разделам на одном изображении в html / javascript? - PullRequest
1 голос
/ 03 февраля 2012

Я учусь разрабатывать мобильные приложения, на начальном этапе.

Этот запрос не относится к мобильным, но больше к html / css / js. (Для

Я намеренсоздайте простую игру, в которой видна картинка, доступно несколько вариантов, и пользователь может перетащить эти параметры на изображение, например, есть изображение растения> параметры: #leaf #stem #flower #budпользователь должен перетащить правильную опцию в правильное место на изображении, чтобы получить очки, т. е. перетащить опцию #leaf на лист растения.

Теперь моя проблема - изображение, разделение этих точек, Я не могу понять, как это сделать.

Короткий запрос: как получить доступ к отдельным точкам / сечениям на одном изображении в формате html / js для вышеуказанных целей?

Запрос (более длинная версия) Я провел небольшой поиск и понял, что могу нарезать изображение и воссоздать его, используя несколько изображений, я пробовал это, это вроде работает, но у него есть много недостатков:

1) Больше изображенийges означает больше места, объединенный размер разделенных изображений был примерно в 1,5 раза больше исходного изображения (это просто разделение его на 4 изображения)

2) Для сложной картинки количество изображений, на которые нужно нарезать, великои трудно управлять в css (n00b == me), поскольку их нужно не просто разбить на простую сетку X * Y, но гораздо более сложное разбиение в зависимости от объекта на изображении. (Понятно, когда я пыталсявыполнить простую структуру ячеек img)

3) Больше изображений также означает больше запросов http (в случае, если приложение основано на WebView), что увеличит время загрузки.

Это просто показалось слишкомстычка, должен быть лучший способ.

Тогда я увидел спрайты css, мне не нужно объединять свои изображения, как спрайты, а наоборот.Просто получите доступ к частям моего ранее существующего изображения, как к отдельным объектам. Я не пробовал это (работаю над этим), и я не видел, чтобы это делалось, или, может быть, это делается, и я не вижу.

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

Если у кого-то есть какие-либо идеи, ссылки, ресурсы, а такжелюбые разъяснения, поскольку я, возможно, не изложил свою проблему так ясно, как мне хотелось бы, пожалуйста, ответьте.

С уважением, Рахул Агарвал

1 Ответ

0 голосов
/ 03 февраля 2012

Вы можете попытаться разместить прозрачные делители над основным изображением, используя абсолютную позицию и фиксированные размеры. Эти дивы будут связаны с возможными опциями, и когда пользователь пропустит опцию над каким-то конкретным дивом, вы будете знать, какие баллы дать.

Небольшая демонстрация с использованием двух div и анимированного масштабирования, чтобы показать, что позиционированные div будут масштабироваться в соответствии с их родителем:

http://jsfiddle.net/VK3A8/

фиддел с изображением: http://jsfiddle.net/8qLFc/4/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...