【问题标题】:Draw outline of combined rectangles in canvas在画布中绘制组合矩形的轮廓
【发布时间】:2012-03-16 01:24:30
【问题描述】:

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

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

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

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

谢谢!

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

【问题讨论】:

  • 任何语言偏好?
  • 因为它是浏览器中的 HTML 画布,所以我认为 JavaScript 和 jQuery 或 Underscore.js 用于实用程序。

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


【解决方案1】:

您是从“我有正方形”的角度来看待它的。

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

你真正要找的是"Convex Hull" - 这个问题已经在这里回答了:

Polygon enclosing a set of points

我实际上开始绘制您的解决方案来解决它 - 就在那时我发生了这种情况。

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

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

然后找到了另一个 S.O.问题。

虽然您确实有两个看似不同的要求:

两个像矩形一样对角线的正方形,每个正方形都有三角形 以 45 度结束 - 这可能是最不规则/最特殊的 案例......三个或四个正方形连接在一起形成一个凸形,就像一个 俄罗斯方块 (TM) 片“L”片

在上面的第一个示例中,您说您想要“凸包”。

但在上面的第二个示例(俄罗斯方块)中,您需要“凹壳”。

祝你好运。

这是我的图表:

【讨论】:

    【解决方案2】:

    我很好奇你为什么要这么做。

    无论如何,我的直觉是你要找的叫“凹壳”,但我不是专家。

    查看this question,看看是否是您想要的。

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

    【讨论】:

    • 另外,回答您的问题原因:我们希望显示在 2xn 数组中彼此相邻的同一组的正方形。如果我只是遍历不同的方块并以其他方式形成分组,也许会有一个更简单的答案?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-12-03
    • 1970-01-01
    • 2012-02-03
    • 1970-01-01
    • 2018-02-13
    • 2015-06-29
    • 1970-01-01
    相关资源
    最近更新 更多