javascript - 在 Canvas 中绘制组合矩形的轮廓

标签 javascript canvas draw html5-canvas convex-hull

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

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

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

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

谢谢!

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

最佳答案

您正在从“我有正方形”的 Angular 来看待它。

但是你需要从“我有分”的 Angular 来看(每个方格就是4分)。

您真正要查找的是 "Convex Hull" - 问题已经在这里得到回答:

Polygon enclosing a set of points

实际上,我开始绘制您的解决方案图表以着手解决它 - 就在那时我想到了这一点。

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

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

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

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

two squares that are diagonal like a rectangle with triangles at each end at 45 degrees - this is probably the most irregular/special case... three or four squares joined to make a convex shape like a Tetris(TM) piece 'L' piece

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

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

祝你好运。

这是我的图表:

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

关于javascript - 在 Canvas 中绘制组合矩形的轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9450326/

相关文章:

javascript - 指令/组件名称 'ng ' 无效。名称不应包含前导或尾随空格

html - 左侧离开 parent 的 child

c++ - 如何在 Qt 中的框架上绘图?

R 图箭头类型和大小

javascript - 从 x 轴过渡 :Bar Chart

javascript - 使用 Node.jS 驱动程序在 MongoDB 中迭代多个集合并比较结果

javascript - 有没有可靠的方法可以在 Highcharts 上自动生成 1 个月的价格变动间隔?

image - Canvas - 图像调整大小并复制到另一个

javascript - 是否指定了 HTML5 lineJoin 的极端情况

image - 去画图像蒙版