六边形网格坐标到像素坐标 [英] Hexagonal Grid Coordinates To Pixel Coordinates

问题描述

我正在使用六角形网格.我选择使用此坐标系是因为它非常优雅.

这个问题讨论了如何自己生成坐标，并且非常有用.我现在的问题是将这些坐标与实际像素坐标进行相互转换.我正在寻找一种简单的方法来找到坐标为x，y，z的六边形的中心.假设像素坐标中的(0,0)以十六进制坐标为(0,0,0)，并且每个六边形的边长为s.在我看来，x，y和z都应使我的坐标沿某个轴移动一定距离，但它们之间却以一种奇怪的方式相互关联，我无法完全绕开它.

I am working with a hexagonal grid. I have chosen to use this coordinate system because it is quite elegant.

This question talks about generating the coordinates themselves, and is quite useful. My issue now is in converting these coordinates to and from actual pixel coordinates. I am looking for a simple way to find the center of a hexagon with coordinates x,y,z. Assume (0,0) in pixel coordinates is at (0,0,0) in hex coords, and that each hexagon has an edge of length s. It seems to me like x,y, and z should each move my coordinate a certain distance along an axis, but they are interrelated in an odd way I can't quite wrap my head around it.

奖金点，如果可以走另一个方向并将像素坐标中的任何(x，y)点转换为该点所属的十六进制.

Bonus points if you can go the other direction and convert any (x,y) point in pixel coordinates to the hex that point belongs in.

推荐答案

为清楚起见，让六边形"坐标为(r,g,b)，其中r，g和b是红色，绿色和蓝色坐标.坐标(r,g,b)和(x,y)通过以下方式关联:

For clarity, let the "hexagonal" coordinates be (r,g,b) where r, g, and b are the red, green, and blue coordinates, respectively. The coordinates (r,g,b) and (x,y) are related by the following:

y = 3/2 * s * b
b = 2/3 * y / s
x = sqrt(3) * s * ( b/2 + r)
x = - sqrt(3) * s * ( b/2 + g )
r = (sqrt(3)/3 * x - y/3 ) / s
g = -(sqrt(3)/3 * x + y/3 ) / s

r + b + g = 0

派生:

• 我首先注意到六边形的任何水平行(应具有恒定的y坐标)都具有恒定的b坐标，因此y仅取决于b.每个六边形都可以分成六个等边三角形，边长为s.一排六边形的中心在下一行的上方/下方是一个半边的长度(或者，也许更容易看到，一排中心在两行的上方/下方是3个边的长度. )，因此对于b中1的每次更改，y都会更改3/2 * s，从而给出第一个公式.用y求解b给出了第二个公式.

• I first noticed that any horizontal row of hexagons (which should have a constant y-coordinate) had a constant b coordinate, so y depended only on b. Each hexagon can be broken into six equilateral triangles with sides of length s; the centers of the hexagons in one row are one and a half side-lengths above/below the centers in the next row (or, perhaps easier to see, the centers in one row are 3 side lengths above/below the centers two rows away), so for each change of 1 in b, y changes 3/2 * s, giving the first formula. Solving for b in terms of y gives the second formula.

具有给定r坐标的六边形都在与r轴垂直的线上的中心位于距原点3/2 * s的r轴上的点上(类似于上面的b的y). r轴的斜率为-sqrt(3)/3，因此垂直于该轴的直线的斜率为sqrt(3). r轴上和线上的点的坐标为(3sqrt(3)/4 * s * r, -3/4 * s * r)；因此x和y中包含r坐标r的六边形中心的线的方程为y + 3/4 * s * r = sqrt(3) * (x - 3sqrt(3)/4 * s * r).使用第一个公式替换y并求解x给出第二个公式. (这不是我实际得出的方式，但是我的得出是图形化的，要经过反复试验，这种代数方法更加简洁.)

The hexagons with a given r coordinate all have centers on a line perpendicular to the r axis at the point on the r axis that is 3/2 * s from the origin (similar to the above derivation of y in terms of b). The r axis has slope -sqrt(3)/3, so a line perpendicular to it has slope sqrt(3); the point on the r axis and on the line has coordinates (3sqrt(3)/4 * s * r, -3/4 * s * r); so an equation in x and y for the line containing the centers of the hexagons with r-coordinate r is y + 3/4 * s * r = sqrt(3) * (x - 3sqrt(3)/4 * s * r). Substituting for y using the first formula and solving for x gives the second formula. (This is not how I actually derived this one, but my derivation was graphical with lots of trial and error and this algebraic method is more concise.)

具有给定r坐标的六边形集合是具有g坐标的六边形集合的水平反射，因此对于x坐标的公式，无论用r和b，该公式的x坐标(用g代替r)将相反.这给出了第三个公式.

The set of hexagons with a given r coordinate is the horizontal reflection of the set of hexagons with that g coordinate, so whatever the formula is for the x coordinate in terms of r and b, the x coordinate for that formula with g in place of r will be the opposite. This gives the third formula.

第四和第五个公式是用第二个公式替换b并用x和y求解r或g.

The fourth and fifth formulas come from substituting the second formula for b and solving for r or g in terms of x and y.

最终公式来自观察，并由代数用较早的公式进行了验证.

The final formula came from observation, verified by algebra with the earlier formulas.

这篇关于六边形网格坐标到像素坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！