Question

我正在将一个平顶六角形瓷砖网格渲染到HTML5画布上。完美安置和拣选工作。在任何时候，整个网格都应该是可见的。

为此，我计算完全包含所有六边形的最小矩形，并使用其高度和宽度来计算画布大小（letterboxed）。为了计算尺寸，我使用相同的坐标来选择和布局图块并计算：

tile_width = 2                    // 2 * distance center-corner
tile_height = 1.7320508075688772  // sqrt(3) * distance center-corner
horiz_dist = 1.5                  // 3/4 * tile_width


width = 1/4 * tile_width + number_x_tiles * horiz_dist
height = 1/2 * tile_height + number_y_tiles * tile_h
aspect = width/height

但是，显示的图块会扭曲，它们会在x方向上拉伸。我的配方有什么问题吗？测量结果是the fantastic redblob games resource描述的。

我非常确定根据宽高比应用x和y缩放的函数可以正常工作，因为正交映射看起来完全正确。

Answer 1

从您的帖子中，您似乎想要一个平顶网格。根据您链接中的信息，

tile_width = size * 2 = 2
tile_height = sqrt(3) * size = sqrt(3)/2 * tile_width = sqrt(3)
horiz_dist = (tile_width + size) / 2 = tile_width * 3/4 = 1.5

其中size = 1是六边形边缘的长度。

将number_x_tiles定义为网格中奇数列和偶数列的数量，您对网格width的计算是正确的：

width = tile_width + (number_x_tiles - 1) * horiz_dist
      = tile_width + (number_x_tiles - 1) * tile_width * 3/4
      = tile_width - tile_width * 3/4 + number_x_tiles * tile_width * 3/4
      = 1/4 * tile_width + number_x_tiles * horiz_dist

所以问题在于计算网格height。你的公式

height = 1/2 * tile_height + number_y_tiles * tile_height

当奇数列中的六边形行数与偶数列相同时，

是正确的（按照惯例，第一列是偶数列，第二列是奇数）。如果没有，那么您需要确定奇数列与偶数列中是否还有更多行的六边形。因此，逻辑应该是：

if (num_rows_in_odd_column == num_rows_in_even_column)
  height = 1/2 * tile_height + number_y_tiles * tile_height
else
  number_y_tiles  = max(num_rows_in_odd_column, num_rows_in_even_column)
  height = number_y_tiles * tile_height

希望这有帮助。

计算六边形比赛场地的纵横比

1 个答案: