Question

我正在尝试了解Matrix类中的方法转换。我用它来复制bitMapData的片段。但我需要更好地了解转换的作用。

我有一张瓷砖，上面有3张图片。所有30x30像素。总位图的宽度为90pxs。

第一个瓷砖是绿色，第二个是棕色，第三个是黄色。如果我使用转换的矩阵移动超过30pxs，而不是变成棕色，我变黄，如果我移动超过60px，我变成棕色。

如果我移动-30像素，则顺序正确。我对发生的事感到困惑。

tileNum -= (tileNumber * tWidth);
theMatrix = new Matrix();
theMatrix.translate(tileNum,0);
this.graphics.beginBitmapFill(tileImage,theMatrix);
this.graphics.drawRect(0, 0,tWidth ,tHeight );
this.graphics.endFill();

有人可以告诉我转换是如何工作的，或者是一些显示它们如何工作的资源。我最终想知道在每个瓷砖之间来回切换的好方法。

Answer 1

首先，不要将翻译与过渡混淆。后者是“改变”的通用英语单词，而几何中的翻译和一般数学是“移动”或“偏移”某些东西。

变换矩阵定义了如何通过视觉方式变换（即缩放，旋转和平移）对象。通过将变换矩阵应用于对象，该对象的所有像素根据存储在矩阵内的值被旋转，移动和缩放/插值。如果您不想考虑矩阵数学，只需将矩阵视为一个黑盒子，其中包含一系列旋转，缩放和转换命令。

translate（）方法只是偏移了您要在X和Y维度中绘制多个像素的位图。如果使用默认（“标识”）矩阵（不包含平移），则对象/位图的左上角将位于（0,0）位置，称为原点或注册点。

考虑以下矩阵：

var mtx : Matrix = new Matrix; // No translation, no scale, no rotation
mtx.translate(100, 0); // translated 100px on X axis

如果将上述矩阵与BitmapData.draw（）或Graphics.beginBitmapFill（）一起使用，则意味着原始位图的左上角应位于目标坐标中的（x = 100; y = 0）处系统。坚持使用Graphics图例，首先考虑绘制一个没有矩阵变换的矩形。

var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap);
shape.graphics.drawRect(0, 0, 200, 200);

这将绘制一个200x200像素的矩形。由于绘图方法中没有涉及变换（我们没有提供变换矩阵），位图的左上角是 shape 坐标的（x = 0; y = 0）系统，即与矩形的左上角对齐。

让我们看一下使用矩阵的类似例子。

var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap, mtx);
shape.graphics.drawRect(0, 0, 200, 200);

这再次绘制一个200px宽和200px高的矩形。但是这个矩形里面的 myBitmap 的左上角是什么？答案是形状坐标系的（x = 100，y = 0）。这是因为矩阵定义了这样的翻译。

但是（x = 100; y = 0）左边会是什么？使用上面的代码，答案是位图重复以填充整个矩形，因此您将看到位于最左侧左侧的位图的最右侧，就好像位置旁边有另一个位图实例它。如果要禁用重复图像，请将 beginBitmapFill（）的第三个属性设置为 false ：

shape.graphics.beginBitmpFill(myBitmap, mtx, false);

让我们看一下可能有助于您理解的最后一个例子。请记住，平移矩阵定义图像左上角的位置，在形状的坐标系中。考虑到这一点，请考虑以下代码，使用与以前相同的矩阵。

var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap, mtx);
shape.graphics.drawRect(100, 0, 100, 100);

请注意，这将在X轴上绘制矩形100px。并非巧合，这与我们在矩阵中定义的转换相同，因此也就是位图左上角的位置。因此，即使启用了重复，我们也不会在矩形的左侧看到重复的图像，因为我们只是在位图开始的位置开始绘制。

因此，我认为，底线是您可以将变换矩阵视为一系列变换命令，您可以在绘制时应用于图像。这将在绘制图像时对其进行偏移，缩放和旋转。

如果您对矩阵的内部工作，Google 转换矩阵感兴趣，或者阅读线性代数！

理解matrix.transition（）; AS3

1 个答案: