2

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

截屏
（来源：mavrosxristoforos.com）

如您所见，每个多边形边上有“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. 在下面的屏幕截图中，在上角，两边的矩形都脱离了原始多边形。

作为一种解决方案，我认为我可以搜索当前绘制的线和多边形边以及前一个矩形之间的线段交点，但这感觉不对，而且执行起来会很慢。

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

感谢您的时间！

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

4

1 回答 1

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，我想你可以处理三角函数计算来找到矩形的起点和终点。

于 2013-02-24T19:30:38.913 回答