javascript - 二维多边形边中的矩形镶嵌不重叠

Question

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

_{(来源:mavrosxristoforos.com)}

如您所见，在多边形的每条边上都有“n”个矩形，长度等于“边的长度”除以“n”，宽度等于它们的长度除以 2。矩形的数量是用户-放。 我拥有的实际数据是:多边形 Angular 坐标和矩形数。 两侧总是顺时针填充。

目前，绘制它们的伪代码如下所示:

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;
}

从代码中可以明显看出，除了多边形边坡外，它没有考虑任何其他因素，边坡是与水平轴的 Angular ，以 -π (pi) 到 +π 为单位，根据两个 Angular 坐标。 这些截图主要存在三个外观问题:

1. 在上面的屏幕截图中，在左侧，大矩形超出了多边形边。
2. 在上面的屏幕截图中，在右下角，矩形重叠(也在其他 Angular 上，但那个特定的 Angular 看起来完全不自然)。
3. 在下面的屏幕截图中，在顶 Angular ，两侧的矩形脱离了原始多边形。

作为解决方案，我认为我可以搜索当前正在绘制的线与多边形边以及之前的矩形之间的线段交点，但感觉不对，而且执行速度会很慢.

如前所述，欢迎提出任何想法。我的母语不是英语，所以请随时纠正我的英语问题。

感谢您的宝贵时间!

编辑:如果最后一个矩形变成梯形，我不会介意，只是为了完全覆盖多边形的一面。

Answer 1

由于您使用的是矩形，因此您只能覆盖直 Angular 区域。所以你必须留下一些未被覆盖的多边形区域。您必须像这样减少边的实际长度:

在这个解决方案中，您可以减少边缘的长度，只形成满足锐 Angular 的头部。以Alpha作为拐 Angular 的内 Angular ，减少量为Rectangle.Width/Tan(Alpha)。它将矩形保留在多边形内，但不会解决重叠问题。

为了防止矩形重叠，您必须留出更多区域:

为此，您必须通过 Rectangle.Width/Tan(Alpha/2) 减少两个头的边缘长度(Alpha 可能在每个 Angular 处不同) .

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

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

已知:

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))

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