7

在过去的几天里，这一直在杀死我。甚至不是开玩笑，但我一直在努力解决这个问题。

我目前正在尝试使用仿射变换矩阵在 HTML5 中创建等距投影。我收到一块旋转 45 度的正方形瓷砖（基本上是方形画布上的方形菱形）。然后，我根据 x 或 y 方向是否存在增量来缩放轴之一。然后我将轴倾斜一个因子以适应。然后，我通过将初始旋转向后旋转 -45 度来否定初始旋转。

目前，我的仿射矩阵是：

      // note: the difference in z is about 10 in this example,
      //       so, xDiff is usually 40
      var xDiff  = 4 * (center.z   - map[x+1][y].land.z);
      var yDiff  = 4 * (center.z   - map[x][y+1].land.z);

      var matrix = multiplyAll(
        // Rotation
        [COS45,  SIN45,
         -SIN45, COS45],

        // Scale in each respective axis
        [(44+yDiff)/44, 0,
         0, (44+xDiff)/44],

        // Skew each axis
        [1,  -yDiff/(44+yDiff),
         -xDiff/(44+xDiff), 1],

        // Negate the rotation
        [NCOS45, NSIN45,
        -NSIN45, NCOS45]
      );

然后我使用以下方法绘制它：

      // the map has its own x & y values which directions are determined by the red x & y arrows in the picture
      // pX & pY are the point relative to the canvas origin
      var pX = x * 22 - y * 22 + 22;
      var pY = y * 22 + x * 22 - 22 - (center.z * 4);
      context.setTransform(matrix[0], matrix[1],
                           matrix[2], matrix[3],

                           300, 100);

      //m_Context.drawImage(image, pX, pY);
      drawDiamond(pX, pY, true); // draws a 44x44 diamond

投影测试

变换平面

如您所见，转换后的矩阵是相对于转换后的 x 轴绘制的（我认为“新”x 轴的斜率为 yDiff/44）。我不确定如何绘制形状，以便转换后的结果位于正确的位置。使用pY = x * 22 - (yDiff/10);似乎更接近了这一点，但我通过插入随机数几乎猜到了。

tl;博士：

  • 我进行了一次转型
  • 我有一个瓷砖应该在哪里的坐标（如果它没有被转换）
  • 如何计算所需的偏移量，以便转换后的图块的坐标与未转换时应位于的位置相同？

PS：现在可以忽略底部奇怪的菱形，因为一旦我知道如何计算偏移量，它们就可以正确创建。

4

1 回答 1

4

仿射变换矩阵 ([abcdef]) 表示两个方程

x' = ax + cy + e
y' = bx + dy + f

因此，您可以使用偏移量e和f绕过缩放和倾斜部分（嵌入在 2x3 或 3x3 矩阵中的 4x4 线性变换）。

这在 postscript 编程中被大量使用，其中用于绘制对象的坐标是相对于本地原点的。如果您要连接矩阵，请在缩放和倾斜之前进行平移，并且e和f值将保持不变。

于 2013-02-16T18:29:32.023 回答