仿射變換矩陣偏移量

最近幾天這已經殺死我了。甚至沒有開玩笑，但我一直在強調這個試圖解決它。仿射變換矩陣偏移量

我目前正在嘗試使用仿射變換矩陣在HTML5中創建等軸投影。我收到一個正方形的瓷磚，它旋轉了45度（基本上是方形畫布上的正方形菱形）。然後根據x或y方向上是否存在三角形來縮放其中一個軸。然後，我將軸傾斜一個因子以適應。然後，我通過將它旋轉回-45度來否定初始旋轉。

目前，我的仿射矩陣是：

 // 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

Projection test

Transformed plane

正如你所看到的，變換矩陣是：

 // 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] 
    );

然後，我用繪製正在對變換進行繪製ed x軸（我認爲「新」x軸有yDiff/44的斜率）。我不確定如何繪製形狀，以便轉換後的結果處於正確的位置。使用pY = x * 22 - (yDiff/10);似乎更接近點，但我幾乎通過插入隨機數字來猜測它。

TL;博士：

我進行改造
我有一個座標，其中瓷磚應該是（如果沒有被轉化）
如何我計算所需的偏移所以如果轉換後的圖塊沒有被轉換，那麼轉換後的圖塊的座標與它應該在的位置相同。

PS：底部奇怪的鑽石現在可以忽略，因爲他們可以correctly be created一次我找出如何計算偏移量。

來源

2013-02-14 Kevin Evans

我不明白你需要什麼。大多數情況下你有線性變換沒有偏移量。爲了找到變換後的座標系中的位置，你不能使用你已經有的好網格嗎？ – 2013-02-16 08:54:40

@luserdroog網格僅通過使用未轉換的圖塊創建，因此您可以使用一個很好的公式來查找位置。 – 2013-02-16 09:09:32

+1對於很酷的圖形 – QED 2013-02-16 09:14:25

仿射變換矩陣（[abcdef]）中表達所述兩個方程

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

所以，可以使用偏移Ë和˚F繞過縮放和歪斜份（4×4線性變換嵌入在2x3或3x3矩陣中）。

這在postscript編程中使用很多，其中用於繪製對象的座標相對於本地原點。如果串聯矩陣，則在縮放和偏移之前進行翻譯，並且將保持值不變。

來源

2013-02-16 18:29:32

我必須等待9小時，然後我給你你的賞金:( – 2013-02-16 18:44:35

沒問題，很高興能幫到你。 – 2013-02-16 18:53:17

方程應該是'x'= ax + cy + e'，'y'= bx + dy + f' ，因爲矩陣是 | ace | | bdf | | 0 0 1 | – cleong 2017-06-17 04:13:47

仿射變換矩陣偏移量

回答

相關問題