仿射变换矩阵偏移
这在过去的几天里一直在杀我。 甚至没有开玩笑，但我一直在强调这个试图解决它。
我目前正在尝试使用仿射变换矩阵在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：底部奇怪的钻石现在可以忽略，因为它们可以正确创建，一旦我找到如何计算偏移量。
仿射变换矩阵（[abcdef]）表示这两个方程
x' = ax + cy + e
y' = bx + dy + f
因此，您可以使用偏移量e和f来绕过缩放和偏斜部分（嵌入在2x3或3x3矩阵中的4x4线性变换）。
这在postscript编程中使用很多，其中用于绘制对象的坐标相对于本地原点。 如果串联矩阵，则在缩放和偏移之前进行平移，并且e和f值将保持不受干扰。
链接地址: http://www.djcxy.com/p/69307.html