图像地图的绘图点
我想向网页上的图像地图添加自动区域突出显示。我发现 mapper.js 库对于实现此目标非常有用，但是围绕区域地图创建 x,y 图非常耗时。
有没有一种快速的方法来创建不规则多边形的边界坐标，例如可以在区域地图上找到的坐标？
编辑
必须有一种方法可以做到这一点。我的 Windows PC 上有 Fireworks 8 和 Photoshop CS3，但我更熟悉 Fireworks。
如果我创建一个选取框，我可以右键单击>修改字幕>转换为路径。这创建了一条包含多个点的路径，但我不知道如何进入下一步，即提取这些点的坐标。
我尝试插入一个热点、一个多边形切片，然后导出到“html 和图像”。这两个都给了我方形热点，而不是多边形。我还尝试右键单击路径并编辑>复制路径轮廓，以及编辑>复制 HTML 代码。也不给我多边形坐标。
我只能获取切片的多边形坐标。有没有办法将路径转换为 Fireworks 8 中的切片？
I want to add automatic area highlighting to image maps on my webpage. I've found the mapper.js library to be very useful in achieving this, however creating the x,y plots around a regional map is very time consuming.
Is there a quick way to create bounding co-ordinates of a irregular polygon such as can be found on regional maps?
EDIT
There has got to be a way to do this. I have Fireworks 8 as well as photoshop CS3 on my windows PC, but I'm more familiar with Fireworks.
If I create a marquee, I can right click > Modify Marquee > Convert to Path. That creates a Path with several points, but I don't know how to get to the next step which is extracting the coords of those points.
I've tried inserting a hotspot, a polygon slice, then exporting to "html and images". Both of these give me square hotspots, not a polygon. I've also tried right click on the path and Edit > Copy Path Outlines, as well as Edit > Copy Html Code. Neither give me the polygon coords.
I can only get polygon coords for a slice. Is there perhaps a way to convert the path to a slice in Fireworks 8?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
对于 Fireworks 8：
1) 使用魔棒和鼠标创建您的选取框。选取框工具。
2) 右键单击>修改字幕>转换为路径
3) 右键单击路径并选择“插入热点”（或按 Ctrl + U）
4) 选择文件>导出
5) 在“保存类型”中选择“HTML 和图像”
For Fireworks 8 :
1) Create your marquee using the magic wand & marquee tool.
2) Right click > Modify Marquee > Convert to Path
3) Right Click on the path and select "Insert Hotspot" (or press Ctrl + U)
4) Select File > Export
5) Select "HTML and Images" for "Save as Type"
Gimp 提供一个名为 Gimp 图像映射的插件/过滤器，它有一个很好的界面来帮助创建图像映射。我认为它将提供您正在寻找的功能。选择
过滤器 ->网页->图像映射...打开对话框打开图像映射对话框后，您可以创建多边形区域来你的心的喜悦：
您可以根据需要创建和自定义区域，修改 多边形区域链接、替代文本、框架、多边形本身甚至设置 JavaScript 事件。
完成后保存即可使用您刚刚保存在 html 中的片段
Gimp offers a plugin/filter called Gimp image map that has a nice interface to help create an image map. I think it will provide the functionality that you are looking for. Select
Filters -> Web -> Image Map...to bring up the dialogOnce you have the Image Map dialog open you can create polygon areas to your heart's delight:
You are able to create and customize areas as you like modifying the link, alt text, frames, the polygon itself or even setup javascript events.
After you are done, save it and you'll be able to use the fragment that you just saved in your html
这是为那些希望从地图图像自动生成坐标的沮丧的人准备的。
在 Photoshop 中打开地图。
使用魔术棒选择图像边缘
将选取框转换为路径
将此路径导出到 illustrator
在 illustrator 中打开文件
“另存为...”SVG 文件（注意：未经过 svg 压缩）
在选项菜单中选择“链接”
点击保存
在文本编辑器中打开您的 .svg 文件，您将获得坐标。
This is for the frustrated person looking to auto generate coords from an image of a map.
Open your map in photoshop.
Use the magic wand to select the image edge
Convert the marquee to a path
Export this path to illustrator
Open the file in illustrator
'save as...' SVG file (note: NOT svgcompressed)
In the options menu select 'link'
Hit save
Open your .svg file in a text editor and you will have your coords.
这是一个简单易用的 Web 应用程序，用于创建图像地图。它将使您不必处理其他程序（DreamWeaver、PhotoShop、Gimp 等）。
http://www.image-mapper.com/
Here's a simple, easy-to-use web app for creating image maps. It'll save your having to deal with additional programs (DreamWeaver, PhotoShop, Gimp, etc.).
http://www.image-mapper.com/
似乎其他答案是关于如何手动执行此操作（根本没有回答问题）..由于这篇文章显示在该主题的 Google 结果中，我正在更新一些我发现至少给出了一个起点的信息关于如何以自动化的方式做到这一点：
我正在研究的有前途的 PHP 之一： http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646
我发现的其他资源：
http://marakana.com/blog/examples/php-image-filters.html
http://vis.lbl.gov/NERSC/Software/gsharp /help/GsharpWE/userguide/imagemaps.html
http://en.wikipedia.org/ wiki/Canny_edge_detector
基本上，寻找像“图像边缘检测器”这样的关键字和这种性质的东西似乎会带来更相关的结果，我仍在寻找一个我可以使用的结果，但我只是有点惊讶很多人似乎认为这应该手动完成，而以编程方式完成会更有效。
It seems the other answers were for how to do it manually (not answering the question at all).. since this post shows up in Google results for this topic, I am updating with some info I have found that at least gives a starting point on how to do this in an automated manner:
promising PHP one that I'm looking into: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646
Other resources I found:
http://marakana.com/blog/examples/php-image-filters.html
http://vis.lbl.gov/NERSC/Software/gsharp/help/GsharpWE/userguide/imagemaps.html
http://en.wikipedia.org/wiki/Canny_edge_detector
Basically, looking for keywords like "image edge detector" and things of this nature seem to lead to more relevant results, I am still searching for one that I can use but I'm just a bit surprised that so many people seem to think this is something that should be done manually when it would be much more effective to do programatically.
如果你更喜欢留在 Adobe 阵营，ImageReady 能够像 Gimp 一样创建图像映射。他们有有关使用它在线创建图像地图的教程 ，但页面上的 CSS 当前已损坏，除非打印该页面，否则您将无法看到该页面。然后它看起来就像这个pdf。
If you prefer to stay in Adobe's camp, ImageReady has the ability to create image maps much Like Gimp. They have a tutorial on using it to create image maps online, but the css on the page is currently broken and you won't be able to see the page unless you print it. Then it will look like this pdf.