javascript - 六边形组周围的轮廓

Question

我的六边形网格中有一组六边形，我想用边框勾勒出它们的轮廓。

到目前为止它是这样的:

期望的输出:

我已经存储了该组中每个六边形的所有 cotrner 点。我想这些点以后可以用来计算组周围的边界。

[[{"x":123.39745962155612,"y":260},{"x":101.74682452694516,"y":272.5},{"x":80.0961894323342,"y":260},{"x":80.0961894323342,"y":235},{"x":101.74682452694516,"y":222.5},{"x":123.39745962155612,"y":235}],[{"x":145.0480947161671,"y":222.5},{"x":123.39745962155614,"y":235},{"x":101.74682452694518,"y":222.5},{"x":101.74682452694518,"y":197.5},{"x":123.39745962155614,"y":185},{"x":145.0480947161671,"y":197.5}],[{"x":166.69872981077808,"y":260},{"x":145.0480947161671,"y":272.5},{"x":123.39745962155612,"y":260},{"x":123.39745962155612,"y":235},{"x":145.0480947161671,"y":222.5},{"x":166.69872981077805,"y":235}],[{"x":188.34936490538905,"y":297.5},{"x":166.69872981077808,"y":310},{"x":145.0480947161671,"y":297.5},{"x":145.0480947161671,"y":272.5},{"x":166.69872981077808,"y":260},{"x":188.34936490538902,"y":272.5}],[{"x":188.34936490538905,"y":222.5},{"x":166.69872981077808,"y":235},{"x":145.0480947161671,"y":222.5},{"x":145.0480947161671,"y":197.5},{"x":166.69872981077808,"y":185},{"x":188.34936490538902,"y":197.5}],[{"x":210,"y":260},{"x":188.34936490538902,"y":272.5},{"x":166.69872981077805,"y":260},{"x":166.69872981077805,"y":235},{"x":188.34936490538902,"y":222.5},{"x":209.99999999999997,"y":235}],[{"x":231.65063509461098,"y":297.5},{"x":210,"y":310},{"x":188.34936490538902,"y":297.5},{"x":188.34936490538902,"y":272.5},{"x":210,"y":260},{"x":231.65063509461095,"y":272.5}]]

还添加了一个直播 example看看网格到目前为止是如何工作的。

现在我正在尝试弄清楚如何确定边框的生成方式。

现在如何准确地生成边框？我应该只找到这个组的中心，然后找到距离较大的所有点，并且然后连接它们？

正如下面讨论中的某人所建议的那样，我尝试按 [X,Y] 坐标对点进行排序并删除所有重复坐标，但它变成了这场灾难:/。

或者是否有任何其他技术可以实现此目的？

Answer 1

这是一个简单的算法:

1. 对于棕色区域中的每个六 Angular 形 H，遍历 0 ≤ dir < 6 的 6 个方向中的每一个，并将 D 设置为 hex_neighbor(H, dir) .
2. 如果 D 为绿色，则在两者之间画一条边框。

警告:这不会将边界边缘连接成一条折线。

我有a live demo使用适用于任意数量区域的算法，以及绘制曲线的扩展。