六边形网格坐标到像素坐标

我正在使用六angular形网格。 我select使用这个坐标系，因为它非常优雅。

格

这个问题谈论自己生成坐标，是非常有用的。 我现在的问题是将这些坐标转换为实际的像素坐标。 我正在寻找一种简单的方法来find坐标x，y，z的六angular形的中心。 假设像素坐标（0,0）在hex坐标（0,0,0）处，并且每个六边形都有一个长度为s的边。 在我看来，像x，y和z都应该沿着一个轴线移动我的坐标一定的距离，但是它们之间是以一种奇怪的方式相互关联的，我不能把头绕在它周围。

奖励点，如果你可以去另一个方向，并将像素坐标中的任何（x，y）点转换为该点所属的hex。

为了清楚起见，设“六边形”坐标为(r,g,b) ，其中r ， g和b分别是红色 ， 绿色和蓝色坐标。 坐标(r,g,b)和(x,y)的关系如下： 

 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等边三angular形; 一排六边形的中心在下一排的中心之上/之下是一个半边长（或者可能更容易看出，一排中心是两排之外的中心之上/之下的3个边长） ），所以对于b每一个变化1 ， y变化3/2 * s ，给出第一个公式。 用y解答b给出了第二个公式。

  • 具有给定r坐标的六边形在r轴上与原点垂直的一条直线上的中心距离原点为3/2 * s （类似于以b为单位的y的上述推导）。 r轴的斜率为 – -sqrt(3)/3 ，所以垂直于它的一条直线的斜率为sqrt(3) 。 (3sqrt(3)/4 * s * r, -3/4 * s * r) 。 所以对于包含r坐标为r的六边形中心的线在x和y的方程为y + 3/4 * s * r = sqrt(3) * (x - 3sqrt(3)/4 * s * r) 。 用第一个公式replacey并求解x得到第二个公式。 （这不是我实际推导出来的，但是我的推导是用很多试验和错误进行graphics化的，而这种代数方法更简洁。）

  • 具有给定r坐标的六边形集合是具有该g坐标的六边形集合的水平reflection，因此无论公式是以r和b为单位的x坐标，该公式的g坐标代替r会是相反的。 这给出了第三个公式。

  • 第四和第五个公式是用第二个公式代替b并用x和y来解决r或g 。

  • 最后的公式来自观察，用代数与先前的公式进行validation。

Interesting Posts