ジオメトリの例:マトリックス変換の表示オブジェクトへの適用

Flash Player 9 以降、Adobe AIR 1.0 以降

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

  • 表示オブジェクトの回転

  • 表示オブジェクトの拡大/縮小

  • 表示オブジェクトの平行移動(再配置)

  • 表示オブジェクトの傾斜

このアプリケーションでは、マトリックス変換のパラメーターを次のように調整するためのインターフェイスが使用できます。

ユーザーが「Transform」ボタンをクリックすると、アプリケーションにより適切な変換が適用されます。

元の表示オブジェクトと、-45°回転し、50%拡大/縮小した表示オブジェクト

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

ファイル

説明

DisplayObjectTransformer.mxml

または

DisplayObjectTransformer.fla

Flash(FLA)または Flex(MXML)のメインアプリケーションファイル。

com/example/programmingas3/geometry/MatrixTransformer.as

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

img/

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

MatrixTransformer クラスの定義

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

transform() メソッド

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

  • sourceMatrix — メソッドで変換される入力マトリックス

  • xScaleyScalexy の縮尺率

  • dxdyxy の変換ピクセル数

  • rotation — 回転度数

  • skew — 傾斜率(%)

  • skewType — 傾斜の方向、「右」または「左」

戻り値は、結果のマトリックスです。

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;