计算六边形运动场的纵横比

Question

我正在将平顶六边形瓷砖网格渲染到 HTML5 canvas 上。放置和拾取工作完美无缺。在任何时候，整个网格都应该是可见的。

为此，我计算了完全包含所有六边形的最小矩形，并使用其高度和宽度来计算 canvas 大小（信箱）。为了计算尺寸，我使用与选择和布置瓷砖相同的坐标并计算：

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

从您的 post 来看，您似乎想要一个平顶网格。根据您 link、

的信息

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 为网格中 odd 列和 even 列的数量，您对网格的计算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

当 odd 列中的六边形行数与 even 列中的六边形行数相同时，

是正确的（按照惯例，第一列是 even 列，第二列是 odd）。如果不是，则需要确定 odd 列中的六边形行数是否多于 even 列中的六边形行数。因此，逻辑应该是：

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

希望对您有所帮助。

计算六边形运动场的纵横比

Calculate aspect ratio of a hexagonal playing field

math

hexagonal-tiles