仿射变换矩阵偏移量

最近几天这已经杀死我了。甚至没有开玩笑，但我一直在强调这个试图解决它。仿射变换矩阵偏移量

我目前正在尝试使用仿射变换矩阵在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

仿射变换矩阵偏移量

回答

相关问题