几何形状示例:对显示对象应用矩阵转换
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;
|
|
|