获取图像特定区域的所有多边形坐标？

I have an image were I put links and text with html image map. That works fine. I would like to have some hover effect on specific areas of the image. For example take a world map and when you hover over a country that one get highlighted. With the html image map and some css it is not a problem, that is, if you have a list of all polygon coordinates of all countries.

我有一个图像,我把链接和文本与HTML图像映射。这很好。我想对图像的特定区域有一些悬停效果。例如,拍摄世界地图,当您将鼠标悬停在一个突出显示的国家/地区时。使用html图像映射和一些css它不是问题,也就是说,如果你有一个所有国家的所有多边形坐标的列表。

So how do I get those? You cant possibly do that manually.

那我怎么得到那些?你不可能手动这样做。

I am not a photoshop expert but I imagine you would do a "magic wand" selection on an area and then somehow list the coordinates that is used to create the selection. Is there such functionality?

我不是一个Photoshop专家,但我想你会在一个区域做一个“魔杖”选择,然后以某种方式列出用于创建选择的坐标。有这样的功能吗?

I personally use Paint.Net for simple image editing and it does not have that feature that I know of.

我个人使用Paint.Net进行简单的图像编辑,它没有我所知道的那个功能。

Do you know the way to do this?

你知道这样做的方法吗?

2 个解决方案

#1

I'll tell you how to do it with JavaScript, since this is a programming Q/A site.

我会告诉你如何使用JavaScript,因为这是一个编程Q / A网站。

To get the rectangular coordinates of the selection bounds is easiest:

要获得选区边界的直角坐标是最简单的:

#target photoshop

// Save the current unit preferences (optional)
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits



// Set units to PIXELS
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS

// Use the top-most document
var doc = app.activeDocument; 

var coords = doc.selection.bounds;

// Write coords to textfile on the desktop. Thanks krasatos
var f = File( '~/Desktop/coords.txt' );
f.open( 'w' );
f.write( coords );
f.close();



// Reset to previous unit prefs (optional)
app.preferences.rulerUnits = startRulerUnits;
app.preferences.typeUnits = startTypeUnits;

This will give the rectangular bounds (think of the bounding box you see when transforming) of the selection in the current active document. It outputs in the order minX, minY, maxX, maxY. This should be enough info to translate to CSS coordinates.

这将给出当前活动文档中选区的矩形边界(考虑转换时看到的边界框)。它以minX,minY,maxX,maxY的顺序输出。这应该足以转换为CSS坐标。

To get the coordinates of individual polygon points you can make the selection into a path and output each pathPoint.anchor on the path using this script:

要获取各个多边形点的坐标,可以选择路径并使用此脚本在路径上输出每个pathPoint.anchor:

#target photoshop

// Save the current unit preferences (optional)
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits



// Set units to PIXELS
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS

// Use the top-most document
var doc = app.activeDocument; 

// Turn the selection into a work path and give it reference
doc.selection.makeWorkPath();
var wPath = doc.pathItems['Work Path'];

// This will be a string with the final output coordinates
var coords = '';

// Loop through all path points and add their anchor coordinates to the output text
for (var i=0; i<wPath.subPathItems[0].pathPoints.length; i++) {
        coords += wPath.subPathItems[0].pathPoints[i].anchor + "\n";
}


// Write coords to textfile on the desktop. Thanks krasatos
var f = File( '~/Desktop/coords.txt' );
f.open( 'w' );
f.write( coords );
f.close();


// Remove the work path
wPath.remove();




// Reset to previous unit prefs (optional)
app.preferences.rulerUnits = startRulerUnits;
app.preferences.typeUnits = startTypeUnits;

Instructions:

-open your map image

- 打开你的地图图片

-make a selection of the region using your favorite selection tool

- 使用您喜欢的选择工具选择区域

-run the script with the extendscript toolkit or by choosing File>Scripts>Browse... and select the .jsx file where the script is saved.

- 使用extendscript工具包运行脚本,或选择File> Scripts> Browse ...并选择保存脚本的.jsx文件。

2 个解决方案

#1

更多相关文章

随机推荐