2D多边形边的矩形镶嵌，不重叠

Question

我正在使用带有HTML5画布的Javascript为个人项目实现类似地图的界面，而我主要是在寻找关于如何使用等长矩形每侧正确镶嵌所有2D多边形边的想法。在进一步解释之前，这里是现有界面的两个实际屏幕截图：

Screenshot http://mavrosxristoforos.com/images/screenshot.jpg

如您所见，每个多边形边上都有“n”个矩形，长度等于“边长”除以“n”，宽度长度除以2.矩形的数量是用户 - 组。 我的实际数据是：多边形角坐标和矩形数。 侧面总是顺时针方向填充。

目前，关于它们如何绘制的伪代码如下所示：

RECT_LENGTH = polygon_side_length / count_of_rectangles;
i = first_corner_of_the_polygon_side;
for ( j = 0; j < count_of_rectangles; j++) {
    move pen to i;
    point1 = i + RECT_LENGTH * right_angle_on_polygon_side_slope;
    line to point1;
    point2 = point1 - RECT_LENGTH * polygon_side_slope;
    line to point2;
    i += RECT_LENGTH * polygon_side_slope;
    line to i;
}

从代码中可以明显看出，它没有考虑除多边形边坡以外的任何东西，这是与水平轴的角度，以-π（pi）到+π测量，由两个角坐标。 这些屏幕截图中主要有三个外观问题：

1. 在左上方的屏幕截图中，大矩形从多边形侧出来。
2. 在上方的屏幕截图中，右下方的矩形重叠（也在其他角落，但特定的一个看起来完全不自然）。
3. 在下方屏幕截图中，在顶角，两侧的矩形都脱离原始多边形。

作为一个解决方案，我认为我可以搜索当前正在绘制的线与多边形边以及前一个矩形之间的线段交叉点，但这感觉不对，并且它会执行得很慢

如前所述，任何想法都是受欢迎的。我不是母语为英语的人，所以请随时用我的英语纠正我。

感谢您的时间！

编辑：如果最后一个矩形变成梯形，我不介意，只是完全覆盖多边形。

Answer 1

由于您使用的是矩形，因此您可以覆盖直角区域。所以你必须留下一些多边形区域。您必须减少边缘的实际长度，如下所示：

在此解决方案中，您可以减少边缘的长度，只需形成符合锐角的头部。如果Alpha为角的内角，则减少量为Rectangle.Width / Tan(Alpha)。它将矩形保持在多边形内，但不会解决重叠问题。

为防止矩形重叠，您必须留下更多未覆盖的区域：

要做到这一点，你必须在Rectangle.Width / Tan(Alpha / 2)之前减少两个头的边缘长度（Alpha每个角落可能不同）。

但由于矩形的宽度未知，所有这些都无济于事。事实上，矩形的宽度是由边缘本身的长度计算的，我们用它来计算边缘的长度!!

所以我们这里有一个数学问题：

已知：

L1: actual length of edge
N: number of divisions
Alpha & Beta: half of inner angle of head corners

未知

L2: reduced length of edge
W: width of rectangles

我们可以形成两个方程式：

(1): L2 = 2 * N * W
(2): L2 = L1 - (W / Tan(Alpha) - (W / Tan(Beta)

通过解决它们，我们可以找到W：

W = L1 / (2 * N + Cot(Alpha) + Cot(Beta))

所有这些在凸多边形中都是正确的。如果边缘的任一头角是凹的，则可以用Pi / 2替换它们的内角，以防止从那些角落减少。 请重新检查一切！考虑到你可爱的UI，我想你可以处理三角计算以找到矩形的起点和终点。