在画布中绘制组合矩形的轮廓

时间:2012-02-26 03:36:21

标签: javascript canvas draw html5-canvas convex-hull

是否有一种很好的算法方法可以组合多个正方形(每个都有四个x / y点)来绘制画布中连接的轮廓?

我想确保工作的数字如下:

  • 两个正方形连接成矩形
  • 四个正方形连接成一个更大的正方形
  • 两个正方形的对角线像一个矩形,每端有三角形,45度 - 这可能是最不规则/特殊情况......
  • 连接三个或四个正方形以形成像Tetris(TM)片“L”片
  • 的凹形

有没有一种简单的方法来计算用于从所有方块点绘制线路径(也可能是填充图形)的外部点?

谢谢!

更新:我们想要这样做的原因是因为我们希望在2xn数组中显示彼此相邻的相同组的方块(但也可能是1xn in一些案例)。如果我只是迭代不同的方块并以其他方式形成分组,也许有一个更简单的答案?

2 个答案:

答案 0 :(得分:1)

你从“我有广场”的角度来看待它。

但你需要从“我有分数”的角度来看待它(每个方格只有4分)。

您实际需要的内容称为"Convex Hull" - 此问题已在SO上得到解答:

Polygon enclosing a set of points

我实际上开始绘制你的解决方案以解决问题 - 而这就是我遇到这种情况的时候。

我意识到当我制作图表时,这些形状的轮廓有几个有趣的属性 - 当我想“是的时候 - 有人已经这样做了 - 这必须已经存在了”。

所以我googled "construct smallest polygon enclosing other polygons"

找到另一个S.O.问题

虽然你确实有两个看似不相似的要求:

  

两个正方形的对角线像一个矩形,每个都有三角形   在45度结束 - 这可能是最不规则/特殊的   case ...加入三个或四个正方形,形成一个凸起的形状   Tetris(TM)片'L'片

在上面的第一个例子中,你说你想要“Convex Hull”。

但在上面的第二个例子(俄罗斯方块)中,你需要“凹面船体”。

祝你好运。

以下是我的图表:

enter image description here enter image description here enter image description here enter image description here

答案 1 :(得分:0)

我很好奇你为什么要那样做。

无论如何,我想找到的直觉被称为“凹壳”,但我不是专家。

查看this question并查看这是否是您想要的。

编辑:gis.stackexchange.com上的also this question