表示オブジェクトの例：SpriteArranger

SpriteArranger アプリケーションを使用して、画面上の「キャンバス」に、各種表示オブジェクトを追加することができます。

DrawingCanvas クラスは、ユーザーが画面上のシェイプを追加できる描画領域、すなわち表示オブジェクトコンテナのタイプを定義します。 これらの画面上のシェイプは、GeometricSprite クラスのいずれかのサブクラスのインスタンスです。

public class DrawingCanvas extends UIComponent

public class DrawingCanvas extends Sprite

this.bounds = new Rectangle(0, 0, w, h); 
initCanvas(fillColor, lineColor);

this.lineColor = lineColor; 
this.fillColor = fillColor; 
this.width = 500; 
this.height = 200;

this.graphics.clear();         
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
this.graphics.drawRect(bounds.left - 1,  
                        bounds.top - 1,  
                        bounds.width + 2, 
                        bounds.height + 2); 
this.graphics.endFill();

public class GeometricSprite extends Sprite

this.size = size; 
this.lineColor = lColor; 
this.fillColor = fColor;

ユーザーが「シェイプの追加」ボタンをクリックすると、アプリケーションは DrawingCanvas クラスの addShape() メソッドを呼び出します。アプリケーションは、次の例に示すように、新しい GeometricSprite のインスタンス化するために、いずれかの GeometricSprite サブクラスの適切なコンストラクター関数を呼び出します。

public function addShape(shapeName:String, len:Number):void 
{ 
    var newShape:GeometricSprite; 
    switch (shapeName) 
    { 
        case "Triangle": 
            newShape = new TriangleSprite(len); 
            break; 
 
        case "Square": 
            newShape = new SquareSprite(len); 
            break; 
 
        case "Circle": 
            newShape = new CircleSprite(len); 
            break; 
    } 
    newShape.alpha = 0.8; 
    this.addChild(newShape); 
}

各コンストラクターメソッドは drawShape() メソッドを呼び出し、このメソッドは、Sprite クラスから継承したクラスの graphics プロパティを使用して適切なベクターグラフィックを描画します。例えば、CircleSprite クラスの drawShape() メソッドには、次のコードが含まれています。

this.graphics.clear(); 
this.graphics.lineStyle(1.0, this.lineColor, 1.0); 
this.graphics.beginFill(this.fillColor, 1.0); 
var radius:Number = this.size / 2; 
this.graphics.drawCircle(radius, radius, radius);

addShape() 関数の最後から 2 番目の行は、DisplayObject クラスから継承した表示オブジェクトの alpha プロパティを設定します。これにより、キャンバスに追加される表示オブジェクトはわずかに透明になり、ユーザーはその背後にあるオブジェクトを見ることができます。

addChild() メソッドの最後の行は、既に表示リストに載っている新しい表示オブジェクトを DrawingCanvas クラスのインスタンスの子リストに追加します。これにより、新しい表示オブジェクトがステージに表示されます。

アプリケーションのインターフェイスには、 selectedSpriteTxt と outputTxt の 2 つのテキストフィールドが含まれています。これらのテキストフィールドのテキストプロパティは、キャンバスに追加されるかユーザーによって選択された GeometricSprite オブジェクトに関する情報で更新されます。 GeometricSprite クラスは、次のように toString() メソッドをオーバーライドすることにより、この情報報告タスクを処理します。

public override function toString():String 
{ 
    return this.shapeType + " of size " + this.size + " at " + this.x + ", " + this.y; 
}

shapeType プロパティは、各 GeometricSprite サブクラスのコンストラクターメソッドの中で、適切な値に設定されます。例えば、 toString() メソッドは、DrawingCanvas インスタンスに新たに追加された CircleSprite インスタンスの次の値を返す場合があります。

Circle of size 50 at 0, 0

DrawingCanvas クラスの describeChildren() メソッドは、DisplayObjectContainer クラスから継承した numChildren プロパティを使用して for ループの限度を設定し、キャンバスの子リストをループします。このメソッドは、次のように、それぞれの子をリストしたストリングを生成します。

var desc:String = ""; 
var child:DisplayObject; 
for (var i:int=0; i < this.numChildren; i++) 
{ 
child = this.getChildAt(i); 
desc += i + ": " + child + '\n'; 
}

結果のストリングは、 outputTxt テキストフィールドの text プロパティを設定するために使用されます。

ユーザーが GeometricSprite インスタンスをクリックすると、アプリケーションは onMouseDown() イベントハンドラーを呼び出します。次に示すように、このイベントハンドラーは GeometricSprite クラスのマウスダウンイベントを受け取るように設定されています。

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

次に、 onMouseDown() メソッドは GeometricSprite オブジェクトの showSelected() メソッドを呼び出します。このオブジェクトに対してこのメソッドが最初に呼び出された場合は、 selectionIndicator という名前の新しい Shape オブジェクトが作成され、次のように、その Shape オブジェクトの graphics プロパティを使用して赤いハイライトの矩形が描画されます。

this.selectionIndicator = new Shape(); 
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0); 
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, this.size + 1); 
this.addChild(this.selectionIndicator);

onMouseDown() メソッドの呼び出しが最初でない場合、このメソッドは、単に DisplayObject クラスから継承した selectionIndicator シェイプの visible プロパティを次のように設定します。

this.selectionIndicator.visible = true;

hideSelected() メソッドは、前に選択されたオブジェクトの selectionIndicator シェイプを、その visible プロパティを false に設定することによって非表示にします。

また、 onMouseDown() イベントハンドラーは、次のコードを含んでいる startDrag() メソッドも呼び出します。このメソッドは、Sprite クラスから継承されたものです。

var boundsRect:Rectangle = this.parent.getRect(this.parent); 
boundsRect.width -= this.size; 
boundsRect.height -= this.size; 
this.startDrag(false, boundsRect);

これにより、ユーザーは選択したオブジェクトを、キャンバスの boundsRect 矩形によって設定された境界内でドラッグできます。

ユーザーがマウスボタンを離すと、 mouseUp イベントが送出されます。DrawingCanvas のコンストラクターメソッドは、次のイベントリスナーを設定します。

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

このイベントリスナーは、個々の GeometricSprite オブジェクト用でなく、DrawingCanvas オブジェクト用に設定されます。 なぜなら、GeometricSprite オブジェクトは、ドラッグされた場合、マウスボタンが離されたときに、別の表示オブジェクト（別の GeometricSprite オブジェクト）の背後で終了する可能性があるからです。 前景の表示オブジェクトは、マウスアップイベントを受け取りますが、ユーザーがドラッグしている表示オブジェクトは、それを受け取りません。 DrawingCanvas オブジェクトにリスナーを追加すると、そのイベントが常に確実に処理されます。

onMouseUp() メソッドは GeometricSprite オブジェクトの onMouseUp() メソッドを呼び出し、後者のメソッドは GeometricSprite オブジェクトの stopDrag() メソッドを呼び出します。

アプリケーションのユーザーインターフェイスには、Move Back、Move Down、Move Up、および Move to Front というラベルの付いたボタンが含まれます。 ユーザーがこれらのボタンをクリックすると、アプリケーションは DrawingCanvas クラスの対応するメソッド（ moveToBack() 、 moveDown() 、 moveUp() 、または moveToFront() ）を呼び出します。 例えば、 moveToBack() メソッドには次のコードが含まれています。

public function moveToBack(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, 0); 
    } 
}

このメソッドは、DisplayObjectContainer クラスから継承された setChildIndex() メソッドを使用して、表示オブジェクトを DrawingCanvas インスタンス（ this ）の子リスト内のインデックス位置 0 に位置付けます。

moveDown() メソッドもほとんど同じ働きをしますが、次のように、DrawingCanvas インスタンスの子リスト内で表示オブジェクトのインデックス位置を 1 ずつデクリメントする点が異なります。

public function moveDown(shape:GeometricSprite):void 
{ 
    var index:int = this.getChildIndex(shape); 
    if (index > 0) 
    { 
        this.setChildIndex(shape, index - 1); 
    } 
}

moveUp() および moveToFront() メソッドは、 moveToBack() および moveDown() メソッドと同様の働きをします。