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

Question

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

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

我想知道是否有一种算法可以让用户点击A区域并确定要处理哪些点,以便根据图像对比度在形状边界之后创建接近最佳的形状.

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

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

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

如果你们中的任何人知道这样的算法,那将是非常好的.

Answer 1

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

1. 使用洪水填充算法，但不是获取整个表面，而是仅获取周长。

2. 以周界为起点，单向走；当您检测到虚拟线段（当前点-初始点）与真实周长之间的累积二次误差超过阈值时，在此处放置一个点并重新开始，直到到达起点。

第一步看起来很简单，第二步就难了。