几何形状示例:对显示对象应用矩阵转换
Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本
DisplayObjectTransformer 范例应用程序说明许多使用 Matrix 类来变换显示对象的功能,包括:
旋转显示对象
缩放显示对象
平移(重新定位)显示对象
倾斜显示对象
该应用程序提供了接口,以调整矩阵转换的参数,如下所示:
当用户单击“变形”按钮时,应用程序将应用适当的变形。
 原始显示对象和旋转了 -45° 并缩放 50% 的显示对象 若要获取此范例的应用程序文件,请参阅 www.adobe.com/go/learn_programmingAS3samples_flash_cn。可以在 Samples/DisplayObjectTransformer 中找到 DisplayObjectTransformer 应用程序文件。该应用程序包含以下文件:
文件
|
说明
|
DisplayObjectTransformer.mxml
或
DisplayObjectTransformer.fla
|
Flash (FLA) 或 Flex (MXML) 中的主应用程序文件
|
com/example/programmingas3/geometry/MatrixTransformer.as
|
一个类,包含用于应用矩阵转换的方法。
|
img/
|
一个目录,包含应用程序使用的范例图像文件。
|
定义 MatrixTransformer 类
MatrixTransformer 类包含应用 Matrix 对象的几何变形的静态方法。
transform() 方法transform() 方法包含以下属性的参数:
sourceMatrix — 此方法转换的输入矩阵
xScale 和 yScale — x 和 y 缩放系数
dx 和 dy — x 和 y 平移量(以像素为单位)
rotation — 旋转量(以度为单位)
skew — 倾斜系数(以百分比表示)
skewType — 倾斜的方向,"right" 或 "left"
返回值为生成的矩阵。
transform() 方法调用下列类的静态方法:
skew()
scale()
translate()
rotate()
每种方法都返回应用了转换的源矩阵。
skew() 方法skew() 方法通过调整矩阵的 b 和 c 属性来倾斜矩阵。可选参数 unit 确定用于定义倾斜角度的单位,如果必要,该方法会将 angle 值转换为弧度:
if (unit == "degrees")
{
angle = Math.PI * 2 * angle / 360;
}
if (unit == "gradients")
{
angle = Math.PI * 2 * angle / 100;
}
创建并调整 skewMatrix Matrix 对象以应用倾斜转换。最初,它是恒等矩阵,如下所示:
var skewMatrix:Matrix = new Matrix();
skewSide 参数确定倾斜应用到的边。如果该参数设置为 "right",则以下代码设置矩阵的 b 属性:
skewMatrix.b = Math.tan(angle);
否则,将通过调整矩阵的 c 属性来倾斜底边,如下所示:
skewMatrix.c = Math.tan(angle);
然后,通过将两个矩阵连接起来以将所产生的倾斜应用到现有矩阵,如下面的示例所示:
sourceMatrix.concat(skewMatrix);
return sourceMatrix;
scale() 方法下面的示例显示 scale() 方法首先会调整缩放系数(如果提供的缩放系数为百分比),然后使用矩阵对象的 scale() 方法:
if (percent)
{
xScale = xScale / 100;
yScale = yScale / 100;
}
sourceMatrix.scale(xScale, yScale);
return sourceMatrix;
translate() 方法translate() 方法只需通过调用矩阵对象的 translate() 方法即可应用 dx 和 dy 平移系数,如下所示:
sourceMatrix.translate(dx, dy);
return sourceMatrix;
rotate() 方法rotate() 方法将输入的旋转系数转换为弧度(如果提供的是角度或渐变),然后调用矩阵对象的 rotate() 方法:
if (unit == "degrees")
{
angle = Math.PI * 2 * angle / 360;
}
if (unit == "gradients")
{
angle = Math.PI * 2 * angle / 100;
}
sourceMatrix.rotate(angle);
return sourceMatrix;
从应用程序中调用 MatrixTransformer.transform() 方法
应用程序提供了一个用户界面,以便从用户处获得转换参数。然后将这些值与显示对象的 transform 属性的 matrix 属性一起传递给 Matrix.transform() 方法,如下所示:
tempMatrix = MatrixTransformer.transform(tempMatrix,
xScaleSlider.value,
yScaleSlider.value,
dxSlider.value,
dySlider.value,
rotationSlider.value,
skewSlider.value,
skewSide );
应用程序随后将返回值应用到显示对象的 transform 属性的 matrix 属性,从而触发转换:
img.content.transform.matrix = tempMatrix;
|
|
|