如何将Photoshop选区转换为x,y序列格式的多边形点坐标
Photoshop选区导出为SVG polygon格式坐标的可行实现方法
需求说明:在Photoshop中选中目标区域后,导出为SVG <polygon> 标签points属性要求的连续x,y格式坐标,可直接用以下几种方法实现:
- 方法1:原生功能导出路径提取(无需额外插件/脚本)
操作步骤:- 完成选区绘制后,打开「路径」面板,点击面板底部的「从选区生成工作路径」按钮,可根据精度需求调整转换容差,数值越小锚点越密集、轮廓还原度越高,常规场景选1-2像素即可。
- 依次点击顶部菜单「文件>导出>路径到Illustrator」,将生成的路径文件保存到本地,用任意纯文本编辑器打开该文件。
- 在文件中定位到路径坐标段,直边多边形选区可直接提取所有锚点的x、y值,按顺序拼接即可;如果是曲线选区,删掉贝塞尔控制柄的冗余坐标,只保留轮廓锚点坐标就符合格式要求。
- 方法2:运行自定义JSX脚本一键导出(效率最高)
不需要手动整理坐标,运行脚本就能直接输出可复制的标准格式内容:- 打开系统自带的记事本,粘贴以下代码,将文件保存为
导出选区坐标.jsx:
if (app.documents.length > 0 && app.activeDocument.selection) { var sel = app.activeDocument.selection; var pointList = []; for (var i = 0; i < sel.anchorCount; i++) { var anchor = sel.anchor(i); pointList.push(Math.round(anchor[0]) + "," + Math.round(anchor[1])); } prompt("SVG polygon points 坐标如下,直接复制即可:", pointList.join(",")); } else { alert("请先在当前打开的文档中创建选区再运行脚本"); }- 回到PS绘制好目标选区,点击顶部菜单「文件>脚本>浏览」,选中刚才保存的JSX文件运行,会直接弹出整理好的坐标串,复制就能粘贴到SVG代码里用。
*提示:直边多边形选区用这个脚本输出的结果完全无误差;带曲线/羽化的选区,可以先对选区做1-2像素的平滑处理,避免锚点过密。
- 打开系统自带的记事本,粘贴以下代码,将文件保存为
- 方法3:快速蒙版手动拾取坐标(适合小范围简单选区)
不需要任何额外操作,零准备成本:- 画好选区后按快捷键Q进入快速蒙版模式,选区边界会显示为清晰的红色遮罩轮廓。
- 打开「信息」面板,选择钢笔工具/直接选择工具,沿着选区轮廓逐点点击需要记录的位置,信息面板会实时显示当前点的x、y像素坐标,逐点记录后按顺序拼接成要求的格式即可。
参考示例图:
内容的提问来源于stack exchange,提问作者Cain
相关产品推荐
相关产品推荐

