Exemplo de objeto de exibição: SpriteArranger

O aplicativo SpriteArranger permite que o usuário adicione vários objetos de exibição à “tela de desenho” exibida.

A classe DrawingCanvas define uma área de desenho, um tipo de contêiner de objeto de exibição ao qual o usuário pode adicionar formas na tela. Essas formas na tela são ocorrências de uma das subclasses de 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;

Quando o usuário clica no botão Adicionar forma, o aplicativo chama o método addShape() da classe DrawingCanvas. Esse método percorre um novo GeometricSprite chamando a função do construtor adequada de uma das subclasses de GeometricSprite, como mostra o exemplo a seguir:

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

Cada método do construtor chama o método drawShape(), que usa a propriedade graphics da classe (herdada da classe Sprite) para desenhar o gráfico vetorial adequado. Por exemplo, o método drawShape() da classe CircleSprite inclui o seguinte código:

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

Da segunda à última linha da função addShape(), é definida a propriedade alpha do objeto de exibição (herdada da classe DisplayObject) para que cada objeto de exibição adicionado à tela de desenho seja ligeiramente transparente, deixando o usuário ver os objetos que estão por trás.

A linha final do método addChild() adiciona o novo objeto de exibição à lista de filhos da ocorrência da classe DrawingCanvas, que já está na lista de exibição. Desse modo, o novo objeto de exibição aparece no palco.

A interface do aplicativo inclui dois campos de texto, selectedSpriteTxt e outputTxt. As propriedades de texto desses campos são atualizados com informações sobre os objetos GeometricSprite que foram adicionados à tela de desenho ou selecionados pelo usuário. A classe GeometricSprite manipula essa tarefa de registro de informações substituindo o método toString() da seguinte maneira:

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

A propriedade shapeType é definida como o valor adequado no método do construtor de cada subclasse de GeometricSprite. Por exemplo, o método toString() poderia retornar o seguinte valor para uma ocorrência de CircleSprite adicionada recentemente à ocorrência de DrawingCanvas:

Circle of size 50 at 0, 0

O método describeChildren() da classe DrawingCanvas percorre a lista de filhos da tela de desenho, usando a propriedade numChildren (herdada da classe DisplayObjectContainer), para definir o limite do loop for. É gerada uma string que lista cada filho, do seguinte modo:

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

A string resultante é usada para definir a propriedade text do campo de texto outputTxt.

Quando o usuário clica em uma ocorrência de GeometricSprite, o aplicativo chama o manipulador de eventos onMouseDown(). Conforme mostrado a seguir, esse manipulador de eventos é definido para ouvir eventos de mouse na função do construtor da classe GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

O método onMouseDown() chama o método showSelected() do objeto GeometricSprite. Se for a primeira vez que esse método foi chamado para o objeto, o método criará um novo objeto Shape chamado selectionIndicator e usará a propriedade graphics do objeto Shape para desenhar um retângulo de realce vermelho, do seguinte modo:

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

Se não for a primeira vez que o método onMouseDown() é chamado, o método simplesmente definirá a propriedade visible da forma selectionIndicator (herdada da classe DisplayObject), do seguinte modo:

this.selectionIndicator.visible = true;

O método hideSelected() oculta a forma selectionIndicator do objeto selecionado anteriormente definindo a propriedade visible como false.

O manipulador de eventos onMouseDown() também chama o método startDrag() (herdado da classe Sprite), que inclui o seguinte código:

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

Isso permite que o usuário arraste o objeto selecionado em torno da tela de desenho, dentro dos limites definidos pelo retângulo boundsRect.

Quando o usuário solta o botão do mouse, o evento mouseUp é enviado. O método do construtor de DrawingCanvas configura o seguinte ouvinte de eventos:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Esse ouvinte de eventos é definido para o objeto DrawingCanvas, não para objetos GeometricSprite individuais. Isso ocorre porque quando o objeto GeometricSprite é arrastado, pode terminar atrás de outro objeto de exibição (outro objeto GeometricSprite) assim que o mouse é solto. O objeto de exibição em primeiro plano receberia o evento de mouse, mas o objeto de exibição que está sendo arrastado pelo usuário não. A adição do ouvinte ao objeto DrawingCanvas garante que o evento seja sempre manipulado.

O método onMouseUp() chama o método onMouseUp() do objeto GeometricSprite, que, por sua vez, chama o método stopDrag() do objeto GeometricSprite.

A interface de usuário do aplicativo inclui os botões Mover para trás, Mover para baixo, Mover para cima e Mover para frente. Quando o usuário clica em um desses botões, o aplicativo chama o método correspondente da classe DrawingCanvas: moveToBack(), moveDown(), moveUp() ou moveToFront(). Por exemplo, o método moveToBack() inclui o seguinte código:

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

O método setChildIndex() (herdado da classe DisplayObjectContainer) é usado para colocar o objeto de exibição na posição de índice 0 na lista de filhos da ocorrência de DrawingCanvas (this).

O método moveDown() funciona de modo similar, mas diminui a posição de índice do objeto de exibição em incrementos de 1 na lista de filhos da ocorrência de DrawingCanvas:

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

Os métodos moveUp() e moveToFront() funcionam de modo similar aos métodos moveToBack() e moveDown().