仿射变换矩阵偏移 [英] Affine transformation matrix offset
问题描述
我目前正尝试使用仿射变换矩阵在HTML5中创建等轴投影。
我收到一个正方形的瓷砖，它旋转了45度（基本上是方形画布上的正方形菱形）。然后根据x或y方向上是否存在三角形来缩放其中一个轴。
然后我将轴偏斜一个因子以适应。然后，我通过将它旋转回-45度来取消初始旋转。
目前，我的仿射矩阵是：
//注意：在这个例子中，z中的差值约为10，
// so，xDiff通常为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（
//旋转
[COS45，SIN45，
-SIN45，COS45]，
//比例在每个轴上
[（44 + yDiff）/ 44,0，
0，（44 + xDiff）/ 44]，
//每个轴倾斜
[1，-yDiff /（44 + yDiff），
-xDiff /（44 + xDiff），1]，
//取消旋转
[NCOS45，NSIN45 ，
-NSIN45，NCOS45]
）;
然后我使用它：
//地图有自己的x& y值的方向由红色x&图中的y箭头
// pX& pY是相对于画布原点的点
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）; //绘制一个44x44的钻石
正如你所看到的，变换的矩阵是相对于变换后的x轴绘制的（我认为新x轴具有yDiff / 44的斜率）。我不确定如何绘制形状，以便转换后的结果处于正确的位置。使用 pY = x * 22 - （yDiff / 10）; 似乎更接近点，但我几乎可以通过插入随机数来猜测它。
tl; dr：
- 我执行了转换 >
- 我有一个坐标点（如果它没有被转换）
- 如何计算所需的偏移量，以便转换后的图块的坐标是如果它没有被转换，它应该是相同的？
PS：底部奇怪的钻石现在可以忽略他们可以正确创建一次，我找出如何计算偏移。
仿射变换矩阵（[abcdef]）表示这两个方程
x'= ax + cy + e
y'= bx + dy + f
S o，您可以使用偏移量 e 和 f 来绕过缩放和偏斜部分（嵌入在2x3或3x3矩阵中的4x4线性变换）。 b
$ b
这在postscript编程中使用很多，其中用于绘制对象的坐标相对于本地起源。如果您要连接矩阵，则在缩放和倾斜之前执行翻译，并且 和 f 值将保持不受干扰。 This has been killing me the last few days. Not even kidding, but I've been really stressing over this trying to solve it. I am currently trying to use affine transformation matrices to create an isometric projection in HTML5.
I receive a tile which is a square that is rotated 45 degrees (essentially a square diamond on a square canvas). I then scale one of the axis' depending on if the there is a delta in the x or y direction.
I then skew the axis by a factor to fit. Then, I negate the initial rotation by rotating it back by -45 degrees. Currently, my affine matrix is: Then I draw it using: As you can see, the transformed matrices are being drawn with respect to the transformed x-axis (I think the "new" x-axis has a slope of yDiff/44). I'm not sure how to draw the shapes so that the transformed result will be in the correct position. Using tl;dr: PS: The weird diamonds on the bottom can be ignored for now since they can correctly be created ONCE I find out how to calculate the offsets. An affine transformation matrix ([a b c d e f]) expresses the two equations So, you can use the offsets e and f to bypass the scaling and skewing parts (the 4x4 linear transform embedded in the 2x3 or 3x3 matrix). This is used a lot in postscript programming, where the coordinates used for drawing an object are relative to a local origin. If you're concatenating matrices, do the translation before scaling and skewing and the e and f values will remain unmolested. 这篇关于仿射变换矩阵偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ // 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
pY = x * 22 - (yDiff/10); seems to get the point closer, but I pretty much guessed it by plugging in random numbers.
x' = ax + cy + e
y' = bx + dy + f
