理解matrix.transition(); AS3

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

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

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

该翻译()方法简单地抵消了,你是要画一些在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像素的矩形.由于绘图方法中没有涉及变换(我们没有提供变换矩阵),位图的左上角是形状坐标系的(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 转换矩阵或读取线性代数感到好奇!