如何获取形状的路径坐标以便在图像映射中使用？

Question

如何获取形状的路径坐标以便在图像映射中使用？

photoshopimagemapadobe-illustratorimagemapster

20

我正在使用ImageMapster创建一个图片地图。

我用Photoshop从原始照片中剪切出几个图片并分别放在不同的图层上。

现在，我需要获取每个对象的路径坐标，但不想手动悬停在每个角落并逐一记录每个坐标。

是否有自动获取这些路径的方法？

也许有一些应用程序或网络服务可以发送我的图像并返回路径？

我已经尝试将每个图层单独导出，然后将它们导入到Illustrator中并将形状向量化（保留了原始位置的形状），但我无法将坐标路径转换为文本。我可以将其导出为SVG，但那不是CSS图片地图所需的简单代码。

- bgmCoder

6个回答

7

这个问题困扰我很久了，而且我没有Illustrator来使用BGM提出的解决方案，所以我创建了自己的Photoshop插件。你可以在这里下载：https://creative.adobe.com/addons/products/2389。它将所有路径点的坐标写入文本文件中。适用于CS6及以上版本。我使用的方法是创建一个选区，右键单击->制作工作路径，重新命名我的路径，[重复]，然后通过我的插件导出坐标。如果有人对它背后的脚本感兴趣，可以在这里查看： http://pastebin.com/8ugcAV3j。如果您进行任何改进，请在这里发布，以便其他人也可以使用它们。希望这能帮助到某些人。编辑：添加源脚本链接（之前只在注释中）。

- Michael Konečný

3

我不知道如何为 CS5 制作“插件”，因为 Adobe Configurator 不允许此操作，但我可以提供其使用的 JavaScript。请将此链接http://pastebin.com/8ugcAV3j 另存为 pathToCoords.jsx，然后在 Ps 中运行它（在 CS6 中，它在“文件”→“脚本”→“浏览...”下）。如果在 CS5 中可以使用，请告诉我，或者如果您发现一种方法可以“书签”该脚本，以便无需每次都浏览它。 - Michael Konečný

+1 这真的帮了我很多，因为我没有Illustrator。非常感谢 :) - Sara S.

1

你应该将JS添加到答案中，这样可以看到其背后的逻辑，非常有趣 :) - Yann Chabot

@MichaelKonečný 刚刚发现这个，很棒，但是看起来你的脚本文件没有标记一个点是普通顶点还是贝塞尔控制点，这使得使用结果坐标非常困难。 - Mike 'Pomax' Kamermans

听起来不错，但是它没有得到维护，所以无法与当前版本的PS一起使用。 - jesus g_force Harris

显示剩余2条评论

3

我用这个方法来找到形状轮廓的坐标，以便在Dreamweaver中创建图像热点链接。如果你有其他想法，那么你就需要忽略其中的一些内容。这个方法适用于单层图像，所以你可能需要先制作一个“压缩副本”，但我不认为它不能在多层图像上使用。

使用魔棒工具突出显示你想要的区域。对于不同的图像，这个过程会有所不同。右键点击并选择“制作工作路径”。使用适当的容差进行尝试和错误。我只使用最敏感的容差。对于所有图像中的所有区域都要这样做，并为每个区域创建单独的路径。点击编辑，然后将路径导出到Illustrator中，并将文件保存在合适的位置。在Word中打开保存的文件。忽略顶部的废话，并使用替换功能删除所有字母。不要担心段落字符。请注意，所有工作路径都被导出到同一个文件中，由空行分隔，因此必须分别复制和粘贴以用于每个热点。

在插入图像后，在Dreamweaver中开始制作地图，并使用Illustrator文件中的信息替换其中的一些坐标以生成每个地图区域。

- Mitchypoo

2

我添加了我的更新答案，因为Adobe在许多情况下已经取消了HTML输出。我主要使用Photoshop（CS4），这是一个完美的解决方案：

1）下载以下文件：https://github.com/andyhawkes/ps-paths-to-imagemap

2）在Photoshop中打开您的图像并使用魔术棒选择形状

3）右键单击并选择“制作工作路径”（像素越少，越精确）

4）转到文件 -> 脚本 -> 浏览...，然后从第一步中选择脚本

就是这样！此脚本将在您的文本编辑器中打开坐标...

- webMan

0

这样的东西可能会很有用；

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

将您的图像复制到指定位置，然后绘制。

- PodTech.io

-2

创建图像映射非常简单。首先，我们需要查看代码的语法。让我们创建一个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=circle coords="x,y,radius"

如果形状是多边形，我们使用以下语法：shape=poly coords="a,b,c,d,e,f,gh"

现在来到了重要的部分：如何找到图像地图坐标。非常简单。前往http://www.image-maps.com，浏览您的图像文件，点击“开始映射您的图像”，然后按照提示进行操作，在下一页上，点击右侧的“导入旧的映射代码”，然后您就可以获得坐标。

之后，您可以使用FIREBUG根据您的规格更改坐标，因为图像地图只会超链接整个图像，所以请使用firebug更改坐标并根据您的要求进行调整。

祝您玩得愉快。

- user2630696

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bgmCoder · Accepted Answer

啊！在谷歌上搜索了image-map，非常感谢Sven提供的想法（他得到了我的+1），我在这里的Stack Overflow帖子中找到了答案。

所以这是我的过程。

在Photoshop中准备图像，每个对象都在单独的图层上，并带有透明背景（这将使您在跟踪时更加容易）。
保存您的Photoshop文件。
使用文件...打开（适用于CS4和CS5），在Illustrator中打开Photoshop文件，并确保允许将Photoshop的图层作为单独对象导入的选项。打开文件后，确保不要移动任何对象 - 您需要它们在与它们在Photoshop文件中完全相同的位置，以便在渲染到图像映射时可以重叠。
使用自定义设置的Live Trace。使用黑白模式，阈值全部上升（255）。这将产生形状的黑色剪影。（您也可以使用“忽略白色”）。按下Trace按钮。如果您有许多图层，则可以将此新跟踪模式保存为预设 - 我称其为Silhouette。现在，我只需单击一个图层，然后从跟踪按钮的下拉菜单中选择Silhouette。
展开形状并确保它仅由单个平面形状组成：
- 您可以在Illustrator中使用blob brush来涂黑任何不需要的白色区域
- 没有群组
- 没有复合形状（否则它将无法工作） - 这意味着您不能创建切口。
- 当您单击它们时，您可以看到路径本身而没有“其他”形状（可能是blob brush添加的）-只有一个路径。一种简单的方法是：
  - 选择形状
  - 如有必要，取消组合
  - 释放复合路径
  - 合并（形状模式将所有形状合并为一个）
- 不要裁剪图像 - 您希望形状与原始Photoshop图像中的图像区域处于相同位置。
- 也不要将所有形状连接在一起。
- 这些形状应该都是单独的整体形状，每个形状都在其原始位置上，每个形状都在单独的图层上。
现在，打开Illustrator的Attributes panel，并确保“show options”选项已打开。
选择您的形状，在“Attributes”面板中，将“Image Map”组合框从None切换到Polygon。确保添加URL（无论您放什么都没有关系；您稍后可以更改它 - 我只是将“#”和形状名称放在一起，以便我可以告诉哪个属于哪个图像映射代码）
对每个对象执行此操作。
现在，在文件菜单中，转到“保存为Web和设备”。跳过这里的所有设置，只需按“保存”即可。
在“另存为”（窗口的标题为“优化另存为”）对话框中，使用“另存为类型：
请不要忘记将实际图像文件放置在您网站的图像文件夹中。您可以将psd文件保存以备后用，并在需要时添加更多“内容”，然后重复此过程。
我能够在几分钟内为我的Photoshop图片创建图像映射。完成一次后，下一次会更容易。