基于傅里叶变换的JavaScript外摆线绘图，如何获取有序的图像轮廓坐标？

首先理清楚核心卡点：之前用ImageMagick逐行扫描得到的黑色像素集合，本质是没有顺序关联的离散点云，不管靠欧氏距离做多少次最近邻排序，只要图形存在轮廓转弯、断点、闭合环的位置，必然会出现跨区域跳点的问题，没必要在纯点云排序的思路上死磕，下面把你梳理的三个方向拆成可以直接上手实现的具体步骤：

1. 位图轮廓提取的实现（对应你提的方向1） #

你原本想的"靠相邻点最小欧氏距离拼连续路径"，不用自己写遍历排序逻辑，直接套成熟的Moore邻域轮廓追踪算法就行，全程纯JS就能跑通，不需要依赖外部工具：

• 把待提取的图片绘制到离屏Canvas上，读取像素数据做二值化处理：把轮廓像素标记为黑色，背景标记为白色，提前过滤掉零散分布的小黑噪点
• 从画布左上角逐行扫描，找到第一个黑色像素作为轮廓追踪的起点
• 从起点开始按顺时针方向遍历当前点的8个邻域像素，找到下一个连通的黑色像素作为当前追踪点
• 重复上一步直到轨迹回到最初的起点，全程记录经过的所有像素坐标，得到的就是完全沿轮廓走向排列的点集
• 最终输出的结构完全匹配你需要的[{x:123, y:1}, {x:174, y:18}, ...]格式，不需要额外转换
• 踩坑提示：追踪前的二值化步骤可以对原图做一次轻微的形态学腐蚀，把轮廓边缘的毛边去掉，不然追踪过程很容易断连或者绕进毛刺里。

2. SVG路径点提取的实现（对应你提的方向2） #

这个方案的落地难度比你预想的低很多，根本不需要手动解析SVG的XML结构：

• 拿到带单条闭合路径的SVG文件，直接把文件里的<path>节点插入到当前页面DOM中，设置为display: none隐藏即可
• 不用自己解析path的d属性里的贝塞尔曲线、直线坐标串，直接调用浏览器原生的getPointAtLength()方法：从路径长度为0的位置开始，按固定步长逐点取坐标，直到遍历完整个路径的总长度
• 收集所有取到的点组成数组，就是完全按路径走向排布的连续坐标，完全不存在乱序问题
• 步长设置参考：按图形总周长的1/200左右取值就合适，步长太小会导致傅里叶变换的计算量暴涨，步长太大的话画出来的外摆线会有明显锯齿。

3. 手动描摹的效率优化（对应你提的方向3） #

你觉得手动描摹效率低，本质是缺少辅助，其实可以做个极简工具把效率提上来：

• 搭个基础画布，把参考图设置30%透明度铺在画布最底层当参照
• 监听鼠标左键的按下状态，按住时实时记录当前鼠标在画布上的坐标，松开时暂停记录
• 描摹的时候不用追求一笔画完，分段记录的点最后按描摹顺序拼接就行，哪怕有少量顺序误差，对外摆线的最终绘制效果影响极小
• 整个工具写下来也就20行JS，比自己写复杂的轮廓追踪逻辑更快，非常适合简单图形的快速提取。

最高效的落地捷径 #

你现在做的傅里叶外摆线绘图是非常成熟的实现方向，之前已经有大量开发者做过和你完全一致的坐标提取流程，上面提到的轮廓追踪、SVG取点的核心逻辑都是公开的基础代码，直接把对应模块的实现抠过来集成就行，不需要从零写所有逻辑。

内容的提问来源于stack exchange，提问作者Ello