几何形状示例:对显示对象应用矩阵转换

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;