ActionScript 3.0 のプログラミング > Flash Player API > ジオメトリの操作 > 例 : 表示オブジェクトに対するマトリックス変換の適用

例 : 表示オブジェクトに対するマトリックス変換の適用

DisplayObjectTransformer サンプルアプリケーションで、Matrix クラスを使用して表示オブジェクトを変形する次のような多くの機能を示します。

表示オブジェクトの回転
表示オブジェクトの拡大 / 縮小
表示オブジェクトの平行移動 (再配置)
表示オブジェクトの傾斜

アプリケーションには、次のようなマトリックス変換のパラメータを調整するインターフェイスがあります。

アプリケーションのユーザーインターフェイスを示すスクリーンショット。垂直方向にコントロールが配置されています。5 つのスライダ (Scale X、Scale Y、Move X、Move Y、および Rotate) に続いて、ラジオボタン (傾斜モード) とスライダ (傾斜角度) があります。

ユーザーが [Transform] ボタンを押すと、アプリケーションは適切な変換を適用します。

2 つのイメージ。バナナのイメージ写真と、そのバナナを -45 度回転して 50% 縮小したイメージ。

元の表示オブジェクトと、-45 度回転して 50% 縮小された表示オブジェクト

DisplayObjectTransformer アプリケーションのファイルは、"Samples/DisplayObjectTransformer" フォルダにあります。アプリケーションは、次のファイルで構成されています。

ファイル	説明
DisplayObjectTransformer.mxml	MXML で記述された Flex 用メインアプリケーションファイル
com/example/programmingas3/geometry/MatrixTransformer.as	マトリックス変換を適用するためのメソッドが含まれているクラス
img/	アプリケーションが使用するサンプルイメージファイルが保存されているディレクトリ

サブトピック

MatrixTransformer クラスの定義

アプリケーションからの MatrixTransformer.transform() メソッドの呼び出し

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);

それ以外の場合、次のように Matrix の c プロパティが調整され、下側が傾斜されます。

skewMatrix.c = Math.tan(angle);

次の例で示すように、2 つのマトリックスを連結することによって、結果の傾斜が既存のマトリックスに適用されます。

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;

Flex 2.01