确定界定形状边界的点的算法——使用javascript答案

【问题标题】：Algorithm to determine the points delimiting the boundaries of a shape -- using javascript确定界定形状边界的点的算法——使用javascript
【发布时间】：2011-12-12 13:11:26
【问题描述】：

我正在开发一个 html 地图制作工具，我希望让我们的用户能够通过单击区域来快速创建形状，而不是让他们手动定义形状。

首先让我们看看我们目前正在做什么。用户想要映射区域 A。他要做的就是在每个点上多次单击以定义形状的边界。

我想知道是否有一种算法允许用户在 A 区域中单击并可以确定要处理的点，以便在形状边界之后创建接近最佳的形状 - 基于图像对比度。

我处理这个问题的第一个想法是确定从单击点向上、向左、向下、向右最远的点。将这四个点作为我们的起点。然后对于每个段，用一个新点细分它，并沿着向量法线移动新点，直到我碰到一个对比边缘。

当然，这种方法有一些限制，但这是我可以假设的

形状可以是凸面、凹面等...
对比度应该是黑白对比，但为了处理可能的变化，对比度阈值应该是可配置的。
在上面我一直在考虑的示例中，细分深度显然会受到限制，以免杀死用户机器

如果你们中有人知道这样的算法，那就太好了。

【问题讨论】：

每个节点的连接线是否已知？如果是，是否可以将它们导航到下一个节点，即使它位于一侧的一半（如第三个图像中的第二个点）？如果是这样，您可以使用“保持左”或“保持右”的路由样式来找到最里面的连接形状。
实际上目标是确定节点以创建折线。我正在编辑问题标题以使其更清晰
对不起，我假设图像是基于矢量的。事实上，它是位图吗？
我想这需要将图像转换为画布才能读取像素的颜色。也许您可以添加“画布”标签以吸引画布大师对这个问题的关注；）
首先地图是如何表示的？有什么阻止您编译服务器中所有可能的区域并将处理后的数据发送到客户端吗？

标签： javascript algorithm image-processing canvas

【解决方案1】：

这似乎是一个难题（顺便说一句，我不知道具体的算法）。我的 2 美分：

使用flood-fill 算法，但不是获取整个表面，而是仅获取周长。
以外围为起点，单向前进；当您检测到虚拟线段（当前点 - 初始点）和实际周长之间的累积二次误差超过阈值时，在此处放置一个点并重新开始，直到到达起点。

第一步似乎很容易，第二步比较难。

【讨论】：

是的，看起来确实是个难题。不过，我不确定您在第二部分中的意思。起初我觉得你在谈论从任何点走周边，在每一步之后检查新点是否在倾斜度（）方面与之前的点匹配，但在思考你的答案之后，我不确定意思您的答案中的“初始点”。您的意思是“种子点”，即您最初点击的点吗？
@samy，不是种子点，而是计算周长的起点。您必须从任何一点沿着周边走，并决定“转弯”在哪里。这种检测很棘手，一方面你必须检测角度的突然变化（想象一个多边形），但也要检测小的连续变化（想象一个圆周形状）。这两个标准的组合应该会给你带来好的结果。
好吧，我就是这么想的。坦率地说，我不会为圆周形状而烦恼。我一开始并不想涵盖所有基础，而是涵盖 90% 的案例。我会尝试为此构建一些东西。
@samy：如果您不关心连续变化，请在相对较小的片段中定位角度变化。你需要 Math.atan2
好吧，我要咬紧牙关，考虑到没有现有的算法来确定周界的点；我试图作弊并查看哈里斯角检测，但它在某些方面不符合要求。

【解决方案2】：

看看Region Growing 算法。这与上面tokland在基本情况下描述的flood-fill算法基本相同。

【讨论】：

区域增长算法非常适合构建初始区域，该区域将作为找出周长的基础，但从我读到的内容，它对于找出构成周长。

【解决方案3】：

您可以使用Edge Detection Algorithm (EDA)。

在 Javascript 中，您可以使用 Pixastic，或者自己滚动。

经过 EDA 处理后，您的图像会到达：

之后，只需从您的内部点向第一个白色像素的任何方向抛出任何线，然后沿着轮廓移动。

【讨论】：

是的，我可以跟随轮廓，但是我如何确定线中的方向变化对应于多边形中的新点而不是线中的楼梯。然后是需要管理的伪影（例如，在您的图像中，EDA 中的某些行是两个像素宽）。所以我同意你的建议，只是“遵循轮廓”部分并不是那么微不足道。至少我不明白该怎么做:)