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

标签 html css image photoshop paint

<分区>

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

那么我如何获得这些呢?您不可能手动执行此操作。

我不是 Photoshop 专家,但我想您会在一个区域上进行“魔术棒”选区,然后以某种方式列出用于创建选区的坐标。有没有这样的功能?

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

你知道怎么做吗?

最佳答案

我将告诉您如何使用 JavaScript 完成此操作,因为这是一个编程问答网站。

获取选择范围的直 Angular 坐标最简单:

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

说明:

-打开你的 map 图片

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

-使用 extendscript 工具包或通过选择"file">“脚本”>“浏览...”运行脚本,然后选择保存脚本的 .jsx 文件。

关于html - 获取图像特定区域的所有多边形坐标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8505207/

相关文章:

javascript - jQuery,统计<ul>中动态添加的<li>的数量

css - 更改 CSS 变换旋转轴?

wordpress - 使用 Bootstrap 的类别部分

image - Google AJAX API - 我如何获得超过 4 个结果?

html - 将内容容器设置为 100% 的主体而不是父级

javascript - 结合点击和双击 ionic 事件

jquery - 两列文字,如何让它在所有分辨率下都填满页面底部?

css - 菜单列表 float 在 Firefox 和 Safari 中无法正确显示

Java - 将 JTextArea 中的字符串转换为图像

image - 如何使用 ActionScript 拖动图像以使其在屏幕上平滑移动?