7

これはここ数日私を殺してきました。冗談ではありませんが、私はこれを解決しようとして本当に強調してきました。

私は現在、アフィン変換行列を使用してHTML5で等角投影を作成しようとしています。45度回転した正方形のタイル（基本的には正方形のキャンバス上の正方形のひし形）を受け取ります。次に、x方向またはy方向にデルタがあるかどうかに応じて、軸の1つをスケーリングします。次に、フィットする係数で軸を歪めます。次に、最初の回転を-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; dr：

  • 変身しました
  • タイルがあるべき場所の座標があります（変換されていない場合）
  • 変換されたタイルの座標が、変換されていない場合の座標と同じになるように、必要なオフセットを計算するにはどうすればよいですか？

PS：オフセットの計算方法を見つけたら、下部の奇妙なダイアモンドは正しく作成できるため、今のところ無視できます。

4

1 に答える 1

4

アフィン変換行列 ([abcdef]) は、2 つの方程式を表します。

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

したがって、オフセットeとfを使用して、スケーリングとスキューの部分 (2x3 または 3x3 マトリックスに埋め込まれた 4x4 線形変換) をバイパスできます。

これは、オブジェクトの描画に使用される座標がローカルの原点を基準とするポストスクリプト プログラミングでよく使用されます。行列を連結している場合は、スケーリングとスキューの前に変換を行ってください。eとfの値は影響を受けません。

于 2013-02-16T18:29:32.023 に答える