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

Ответ 1

Ах! После googling image-map, благодаря Свену за эту идею (он получил мой +1), я нашел эту тему здесь, в Stack Overflow.

Итак, вот мой процесс.

• Подготовьте изображение в Photoshop с каждым объектом на отдельном слое с прозрачным фоном (это облегчит вам работу с трассировкой).
• Сохраните файл с фотошопом.
• Откройте файл Photoshop в Illustrator с помощью File... Open (работает в CS4 и CS5) и убедитесь, что вы можете импортировать слои Photoshop в виде отдельных объектов. После того, как вы откроете файл, убедитесь, что НЕ перемещать какие-либо объекты вокруг - вам нужно, чтобы они находились в том же месте, что и в файле фотошопа, чтобы они могли накладываться друг на друга при отображении в карту изображений.
• Используйте Live Trace с пользовательскими настройками. Используйте черно-белый режим с пороговым значением (255). Это создаст черный силуэт формы. (Вы также можете использовать "игнорировать белый" ). Нажмите кнопку Trace. Если у вас много слоев, вы можете сохранить этот новый шаблон трассировки в качестве пресета - я позвонил своему, Силуэт. Теперь я просто нажимаю на слой и выбираю Silhouette из раскрывающегося меню кнопок трассировки.
• Разверните форму и убедитесь, что она состоит только из одной плоской формы:
  • вы можете использовать кисть blob в иллюстраторе, чтобы очернить все нежелательные белые области.
  • нет групп
  • нет составных фигур (или это не сработает), что означает, что вы не можете создавать вырезы.
  • Вы можете сказать, что фигуры правы, когда вы нажимаете на них - вы должны иметь возможность видеть сам путь без каких-либо других форм (возможно, добавления кистей blob) - всего лишь один путь. Простым способом является следующее:
    • select форма
    • ungroup при необходимости
    • release compound path
    • unite (режим формы объединяет все фигуры в один)
  • Не crop ваше изображение - вы хотите, чтобы ваша фигура находилась в том же месте в области изображения, что и в исходном изображении фотошопа.
  • Не объединяйте все фигуры вместе.
  • Формы должны быть индивидуальными целыми формами, все в их исходных местах, каждый на отдельном слое.
• Теперь откройте Illustrator Attributes panel и убедитесь, что "показать параметры".
• Выберите свою фигуру и на панели "Атрибуты" переключите поле со списком "Карта изображений" с None на Polygon. Обязательно добавьте URL-адрес (неважно, что вы положили, вы можете изменить его позже - я просто поставлю "#" и имя формы, чтобы я мог определить, к какому из них принадлежит код карты изображения)
• Сделайте это для каждого из объектов.
• Теперь в меню File перейдите к "Сохранить для Интернета и устройств". Пропустите все настройки здесь и просто нажмите "Сохранить".
• В "Сохранить как" (название окна "Сохранить оптимизировано как" ), используйте "Сохранить как тип:" и выберите HTML Only(*.html), если вы просто хотите код, или HTML and Images, если вы тоже хотите силлоуетту (они появятся в папке под названием "изображения" ) - и обратите внимание на ваше местоположение сохранения.
• Теперь откройте этот html файл в блокноте!
• Voila! Все фигуры будут отображаться для вас как готовый маршрут image-map - point и даже html-код. Вот как это выглядит, когда вы открываете в блокноте только что созданный html файл: Для этой демонстрации я выбрал особенно сложный образ - тот, который вы никогда не захотите оценивать вручную, и не нужно делать дважды!

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

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

Ответ 2

Это прослушивало меня так долго, и у меня нет Illustrator, чтобы иметь возможность использовать решение, предложенное BGM, что я создал свой собственный Photoshop-аддон.

Вы можете получить его здесь: https://creative.adobe.com/addons/products/2389

Он записывает все координаты точек вашего пути в текстовый файл. Должен работать для CS6 и выше.

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

Если кто-то заинтересован в сценариях, стоящих за ним, вы можете посмотреть здесь: http://pastebin.com/8ugcAV3j

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

Надеюсь, это поможет кому-то.

EDIT: добавлена ​​ссылка на источник script (только в комментариях раньше)

Ответ 3

Я использовал это, чтобы найти координаты контура фигуры, чтобы сделать горячие точки изображения для ссылок в Dreamweaver. Если у вас есть что-то еще в виду, тогда вам придется игнорировать некоторые из них. Это работает на одном уровне, поэтому вы можете сначала создать "сплющенную копию", но я не понимаю, почему она не будет работать на многоуровневом изображении.

Используйте палочку, чтобы выделить область, которую вы хотите. Это будет отличаться для разных изображений. Щелкните правой кнопкой мыши и нажмите "Сделать рабочий путь". Используйте подходящую информацию, которая определяется методом проб и ошибок. Я просто использую самые чувствительные. Сделайте это для всех областей во всех ваших изображениях, создавая отдельные пути для каждого из них. Нажмите "Редактировать", затем экспортируйте пути в иллюстратор и сохраните файл в разумном месте. Откройте сохраненный файл в слове. Игнорируйте заднюю часть верхней части и замените ее, чтобы удалить ВСЕ ПИСЬМА. Не беспокойтесь о символах абзаца. Обратите внимание: все рабочие пути экспортируются в один и тот же файл, разделенные пустой строкой, поэтому их необходимо скопировать и вставить отдельно для каждой точки доступа.

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

Ответ 4

Я добавляю свой обновленный ответ, который мне нужно найти, поскольку adobe удалил вывод HTML во многих случаях, я работаю в основном с фотошопом (CS4), и это идеальное решение:

1) скачать следующий файл: https://github.com/andyhawkes/ps-paths-to-imagemap

2) откройте свое изображение в фотошопе и выберите форму с волшебной палочкой

3) щелкните правой кнопкой мыши и выберите "сделать рабочий путь" (чем меньше px, тем точнее)

4) перейдите к File → Scripts → Browse ... и выберите script с первого шага

что это!! этот script откроет ваш текстовый редактор с координатами...

Ответ 5

Что-то вроде этого может быть полезно;

http://code.google.com/p/imagemap/

Скопируйте изображение в нужное место, затем зарисуйте.

Ответ 6

создание карты изображения очень просто. Сначала нам нужно посмотреть на синтаксис кода Позвольте создать div. Если мы хотим поместить его в правую сторону нашей страницы, мы можем начать с написания

<div align="right">

После этого мы импортируем изображение, которое мы собираемся отобразить.

<img src="" alt="" width="" height="" usemap="#nameofmap" />

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

<map name="nameofmap">
<area href="wherever I wanna take that.com" alt="" title="" 
shape=rect coords="A,B,C,D"></map>

Теперь мы закрываем div.

</div>

Если форма круглая, мы используем синтаксис shape = круговые координаты = "x, y, radius"

Если форма полигональная, мы используем ** shape = poly coords = "a, b, c, d, e, f, gh"

Теперь идет большая часть: как найти координаты карты изображения. Очень просто. До   http://www.image-maps.com Просмотрите свой файл изображения, нажмите "Начать картографирование изображения", затем вы продолжите, а затем на следующей странице нажмите "Импорт старого картографического кода" справа. Затем вы получите координаты.

После этого вы можете использовать FIREBUG для изменения коордов в соответствии с вашими спецификациями, потому что изображения-карты только гиперссылки всего изображения, поэтому используйте firebug, чтобы изменить координаты и настроить в соответствии с вашими требованиями.

Удачи.