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

时间:2011-12-14 13:22:17

标签: html css image photoshop paint

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

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

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

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

你知道这样做的方法吗?

2 个答案:

答案 0 :(得分:4)

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

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

#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;

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

要获取各个多边形点的坐标,您可以选择一个路径并使用此脚本在路径上输出每个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;

说明:

- 打开你的地图图片

- 使用您喜欢的选择工具

选择区域

- 使用extendscript工具包运行脚本,或选择文件&gt; Scripts&gt;浏览...并选择保存脚本的.jsx文件。

答案 1 :(得分:0)

ps中没有任何选项,您必须在Dreamweaver中创建坐标。