确定形状边界的点的算法 - 使用javascript

Question

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

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

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

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

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

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

如果你们中的任何一个人知道这样的算法，那真的很棒。

Answer 1

查看Region Growing算法。这基本上与tokland在基本情况下描述的泛洪填充算法相同。

Answer 2

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

1. 使用flood-fill算法，但不要获取整个表面，只获取周长。

2. 从外围开始，以一种方式进入;当你发现虚拟段（当前点 - 初始点）和真实周界之间累积的二次误差超过阈值时，在那里放一个点并重新开始直到你到达起点。

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

Answer 3

您可以使用Edge Detection Algorithm（EDA）。

在Javascript中，您可以使用Pixastic，也可以自己动手。

经EDA处理后，您的图片会显示：

之后，只需将任何方向的任何一条线从内部点投射到第一个白色像素，然后按照轮廓进行操作。