显示对象示例：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() 函数的倒数第二行用于设置显示对象（继承自 DisplayObject 类）的 alpha 属性，所以画布上添加的每个显示对象都有一点儿透明，这样用户就可看见它后面的对象。

addChild() 方法的最后一行用于在 DrawingCanvas 类实例的子级列表中添加新的显示对象，该实例已经在显示列表中。这样会使新的显示对象出现在舞台上。

应用程序界面上包括两个文本字段 selectedSpriteTxt 和 outputTxt 。这些文本字段的文本属性由已添加到画布中或由用户选择的 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() 方法通过使用 numChildren 属性（继承自 DisplayObjectContainer 类）设置 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() 方法，该方法仅设置 selectionIndicator 形状的 visible 属性（继承自 DisplayObject 类），如下所示：

this.selectionIndicator.visible = true;

hideSelected() 方法通过将其 visible 属性设置为 false 来隐藏以前所选对象的 selectionIndicator 形状。

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

此事件侦听器是针对 DrawingCanvas 对象设置的，而不是针对单个 GeometricSprite 对象设置的。这是因为当拖动 GeometricSprite 对象时，松开鼠标后它可能会在另一个显示对象（另一个 GeometricSprite 对象）之后结束前景中的显示对象会收到鼠标弹起事件，但用户正在拖动的显示对象则不会收到。在 DrawingCanvas 对象中添加侦听器可以确保始终处理该事件。

onMouseUp() 方法调用 GeometricSprite 对象的 onMouseUp() 方法，后者又调用 GeometricSprite 对象的 stopDrag() 方法。

应用程序用户界面上包括标有“后移”、“下移”、“上移”和“移到最前”的按钮。当用户单击其中一个按钮时，应用程序将调用 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); 
    } 
}

该方法使用 setChildIndex() 方法（继承自 DisplayObjectContainer 类）确定显示对象位置在 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() 方法类似。