如何获取路径与图像的地图使用形状的中心坐标？(How to get the path coordin

我使用创建图像映射ImageMapster 从这里开始。

我创建了一个Photoshop图像与我从原来的照片，切出几个图像。每个图像是在一个单独的层。

现在，我需要得到每个对象的路径坐标，我不希望每一个角落，将鼠标悬停在手动记下每一个坐标。

是否有一个自动化的方式来获得这条道路？

也许有一些应用程序或Web服务那里我可以把我的形象和获取路径的回报？

我曾尝试分别出口每一层，然后将它们导入到Illustrator和矢量化的形状（它保持在原来的位置的形状），但我无法弄清楚如何获得的坐标路径文本。我可以将其导出为SVG，但是这是没有必要的CSS图像地图一样简单的代码。

Answer 1:

啊! 谷歌搜索后， image-map ，多感谢斯文的想法（他得到了我的+1），我发现这里对堆栈溢出这个线程。

因此，这里是我的过程。

准备在Photoshop图像与透明背景的独立层中的每个对象（这将很容易让你当你做跟踪）。
保存您的Photoshop文件。
打开Illustrator中使用文件...打开 （在CS4和CS5的作品）的Photoshop文件，并确保允许导入Photoshop的图层作为单独的对象的选项。打开该文件后，一定要确保不走动任何对象-你需要他们在相同的位置 ，因为他们在Photoshop文件，所以当渲染到图像映射他们可以叠加对方。
使用Live Trace使用自定义设置。与阈值全部达到（255）使用黑白模式。这将产生形状的黑色剪影。（您也可以使用“忽略白”）。按下Trace按钮。如果你有很多层，你可以保存这个新的跟踪模式为预设-我打电话给我，剪影。现在，我只需点击一个层上，并从跟踪按钮下拉菜单中选择剪影。
展开形状，并确保它仅由一个单一的扁平状：
- 你可以使用BLOB刷插画变黑了任何不需要的白色区域
- 没有团体
- 没有复合形状 （或者它不会工作） -这意味着你不能创建切口。
- 你可以告诉当你点击它们的形状是正确的 - 你应该能够看到的路径本身不涉及“其他”形状（也许斑点画笔添加） - 只是一个单一的路径。一个简单的方法是这样的：
  - select形状
  - ungroup如果有必要
  - release compound path
  - unite （形状模式合并所有形状为一个）
- 不要crop图像-你希望你的形状是在图像的区域相同的位置在原始Photoshop图像。
- 不要所有的形状结合在一起，无论是。
- 形状都应该个别整体形状，所有在其原始位置，每一个单独的层。
现在，打开Illustrator的Attributes panel ，并确保“显示选项”。
选择你的形状，然后在“属性”面板中，从切换“影像地图”组合框None到Polygon 。请务必添加URL（也不要紧，你放什么，你可以改变它 - 我只是把“＃”和形状的名字，所以我可以告诉它属于在图像映射代码是哪一个）
这样做对每个对象。
现在，在File菜单，进入“另存为Web和设备”。这里跳过所有的设置，只是把“保存”。
在“另存为”（在窗口的标题是“保存优化为”）对话框中，使用“保存类型”，然后选择HTML Only(*.html)如果你只是想要的代码，或HTML and Images ，如果你想要的sillouhuette，太（它们将出现一个名为“图片”文件夹中） - 和记下您的保存位置。
现在去打开HTML文件中的记事本！
瞧！所有的形状将呈现给你作为一个预制的image-map -点的路径，甚至HTML代码。这是个什么样子，当你的记事本刚创建的HTML文件打开，如：在该演示中，我选择了一个特别复杂的形象 - 一个你绝不会想手工地估计，也必须做两次！

不要忘了某个地方的实际图像文件在你的网站上的图片文件夹中。您可以保存PSD文件供以后并添加更多的“东西”，如果你想，然后重复这个过程。

我能够创建图像映射这种方式为我的Photoshop图片在短短一个简短的几分钟。你这样做，一旦它之后，它就会为下一次更容易。

Answer 2:

这已被窃听了我这么久，我没有Illustrator中能够使用的BGM提出的解决方案，我创建了自己的Photoshop插件。

你可以在这里得到它： https://creative.adobe.com/addons/products/2389

这一切你的路点的坐标写入到一个文本文件中。应适用于CS6及以上。

我用它的方式是创建一个选框，点击右键 - >使工作路径，通过我的插件重新命名我的道路，[重复]，然后就出口COORDS。

如果任何人的兴趣在它后面的脚本，你可以看看这里http://pastebin.com/8ugcAV3j

如果你做任何改进，请在这里发表他们让其他人可以使用它们。

希望这可以帮助别人。

编辑：添加链接到源脚本（只是在评论之前）

Answer 3:

我用这个来找到一个形状的轮廓的坐标，使图像热点在Dreamweaver中的链接。如果您有什么考虑别人，那么你就必须要忽略一些。这个工程的单层上，所以你可能会想“第一平整复制”做一个，但我不明白为什么它不会一个多层次的图像上工作。

使用魔杖，突出显示要区域。这将是不同的图像不同。右击并创下建立工作路径。使用由试验和错误找到一个合适的tollerance。我只是用最敏感的。这样做对所有的图像创建每个独立路径的各个领域。点击修改，然后出口路径，Illustrator和保存文件说理的地方。在Word中打开保存的文件。忽略卫生纸的顶部和使用替代删除所有字母。不要担心该段文字。需要注意的是所有的工作路径中的在一个空行因此必须复制分离的相同的文件出口和分别粘贴到用于每个热点。

插入图像后。开始制作在Dreamweaver中的地图与一对夫妇坐标的则只需在与每个地图区域，要生产的Illustrator文件的信息替换这些。

Answer 4:

添加我的更新答案，我必须找到，因为Adobe已经消除HTML输出在许多情况下，我的工作主要是用Photoshop（CS4），这是一个完美的解决方案：

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

2）在Photoshop中打开图像，然后选择用魔杖形式

3）点击右键，选择“建立工作路径”（较小的像素，更准确）

4）进入File - > Scripts - > Browse ... ，并从第一步选择脚本

而已！！这个脚本会打开你的文本编辑与坐标...

Answer 5:

像这样的东西可能是有用的;

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

图像复制到位置，然后情节。

Answer 6:

创建图像映射是非常简单的。首先，我们需要看看代码的语法让我们创建我们希望它在我们的页面的右侧位置一个div.If，我们可以通过书写才开始

<div align="right">

在那之后，我们的进口，我们是要去的地图图像。

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

现在，我们必须定义地图structure.First让我们假设你想要一个图像的矩形部分像一个超链接。

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

现在我们关闭股利。

</div>

如果形状为圆形，我们使用语法形状=圆COORDS =“X，Y，半径”

如果形状是多边形的，我们使用**形状=聚COORDS = “A，B，C，d，E，F，GH”

现在到了最重要的一部分：如何找到图像映射COORDS。非常simple.Go到http://www.image-maps.com浏览图像文件，单击“开始映射图像”，然后就继续，然后在下一个页面上，点击右侧的“导入旧映射代码” 。那么你得到的COORDS。

在此之后，你可以使用Firebug根据您的要求来改变COORDS，因为图像映射仅超链接的整体形象，所以用萤火虫来改变COORDS并根据您的要求进行调整。

玩得开心。

文章来源: How to get the path coordinates of a shape for use with image-maps?