Adobe Flex 3 ヘルプ

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

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

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

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

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

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

このサンプルのアプリケーションファイルを入手するには、www.adobe.com/go/learn_programmingAS3samples_flash を参照してください。DisplayObjectTransformer アプリケーションのファイルは、"Samples/DisplayObjectTransformer" フォルダにあります。アプリケーションは、次のファイルで構成されています。

ファイル

説明

DisplayObjectTransformer.mxml

または

DisplayObjectTransformer.fla

Flash(FLA)または Flex(MXML)で記述されたメインアプリケーションファイル

com/example/programmingas3/geometry/MatrixTransformer.as

マトリックス変換を適用するためのメソッドが含まれているクラス

img/

アプリケーションが使用するサンプルイメージファイルが保存されているディレクトリ

サブトピック



MatrixTransformer クラスの定義

MatrixTransformer クラスには、Matrix オブジェクトの図形変換を適用する静的メソッドが含まれます。

transform() メソッド

transform() メソッドには、次の各パラメータが含まれています。

  • sourceMatrix:メソッドによって変換される入力マトリックス
  • xScale および yScalex および y の拡大 / 縮小率
  • dx および dyx および 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;

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート