Esempio di oggetto di visualizzazione: SpriteArranger

L'applicazione SpriteArranger consente di aggiungere una varietà di oggetti di visualizzazione all'area di lavoro visualizzata sullo schermo.

La classe DrawingCanvas definisce un'area di disegno, un tipo di contenitore di oggetti di visualizzazione al quale è possibile aggiungere figure geometriche visualizzate sullo schermo. Tali forme sono istanze di una delle sottoclassi della classe 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 l'utente fa clic sul pulsante Aggiungi forma, l'applicazione chiama il metodo addShape() della classe DrawingCanvas. Tale metodo crea una nuova istanza di GeometricSprite chiamando la funzione di costruzione appropriata di una delle sottoclassi di GeometricSprite, come illustrato dal seguente esempio:

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

Ciascun metodo della funzione di costruzione chiama il metodo drawShape() , che impiega la proprietà graphics della classe (ereditata dalla classe Sprite) per disegnare la grafica vettoriale appropriata. Il metodo drawShape() della classe CircleSprite, ad esempio, include il seguente codice:

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

La penultima riga della funzione addShape() imposta la proprietà alpha dell'oggetto di visualizzazione (ereditata dalla classe DisplayObject); in questo modo ogni oggetto di visualizzazione aggiunto all'area di lavoro risulta leggermente trasparente, affinché sia possibile vedere gli oggetti sotto di esso.

L'ultima riga del metodo addChild() aggiunge il nuovo oggetto di visualizzazione all'elenco secondario dell'istanza della classe DrawingCanvas, che si trova già nell'elenco di visualizzazione. In tal modo, il nuovo oggetto di visualizzazione viene visualizzato nello stage.

L'interfaccia dell'applicazione include due campi di testo, selectedSpriteTxt e outputTxt . Le proprietà di testo di tali campi vengono aggiornate con informazioni relative agli oggetti GeometricSprite che sono stati aggiunti all'area di lavoro oppure selezionati dall'utente. La classe GeometricSprite gestisce questa attività di informazione sostituendo il metodo toString() , come segue:

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

La proprietà shapeType viene impostata sul valore appropriato nel metodo della funzione di costruzione di ogni sottoclasse di GeometricSprite. Ad esempio, il metodo toString() potrebbe restituire il seguente valore per un'istanza di CircleSprite recentemente aggiunta all'istanza DrawingCanvas:

Circle of size 50 at 0, 0

Il metodo describeChildren() della classe DrawingCanvas esegue un ciclo all'interno dell'elenco secondario dell'area di lavoro mediante la proprietà numChildren (ereditata dalla classe DisplayObjectContainer) al fine di impostare il limite del ciclo for . Viene generata una stringa che elenca ogni elemento secondario, come indicato di seguito:

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

La stringa risultante viene utilizzata per impostare la proprietà text del campo di testo outputTxt .

Se l'utente fa clic su un'istanza di GeometricSprite, l'applicazione chiama il gestore di eventi onMouseDown() . Come illustrato nell'esempio seguente, questo gestore di eventi è impostato per intercettare eventi di pressione mouse nella funzione di costruzione della classe GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Il metodo onMouseDown() chiama quindi il metodo showSelected() dell'oggetto GeometricSprite. Se si tratta della prima chiamata di tale metodo per l'oggetto, il metodo crea un nuovo oggetto Shape denominato selectionIndicator e impiega la proprietà graphics dell'oggetto Shape per disegnare un rettangolo di evidenziazione rosso, come indicato di seguito:

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 non si tratta della prima chiamata del metodo onMouseDown() , il metodo si limita a impostare la proprietà visible della forma selectionIndicator (ereditata dalla classe DisplayObject) come segue:

this.selectionIndicator.visible = true;

Il metodo hideSelected() nasconde la forma selectionIndicator dell'oggetto precedentemente selezionato impostando la sua proprietà visible su false .

Il metodo del gestore di eventi onMouseDown() chiama anche il metodo startDrag() (ereditato dalla classe Sprite), che include il codice seguente:

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

Questo codice consente all'utente di trascinare l'oggetto selezionato nell'area di lavoro, entro i limiti impostati dal rettangolo boundsRect .

Quando il pulsante del mouse viene rilasciato, viene trasmesso l'evento mouseUp . Il metodo della funzione di costruzione di DrawingCanvas imposta il seguente listener di eventi:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Questo listener di eventi è configurato per l'oggetto DrawingCanvas, anziché per i singoli oggetti di GeometricSprite, perché se l'oggetto GeometricSprite viene trascinato, potrebbe finire dietro un altro oggetto di visualizzazione (un altro oggetto GeometricSprite) quando il mouse viene rilasciato. L'oggetto di visualizzazione in primo piano riceverebbe l'evento di rilascio del mouse al posto dell'oggetto trascinato dall'utente. L'aggiunta del listener all'oggetto DrawingCanvas garantisce che l'evento venga sempre gestito.

Il metodo onMouseUp() chiama il metodo onMouseUp() dell'oggetto GeometricSprite che, a sua volta, chiama il metodo stopDrag() dell'oggetto GeometricSprite.

L'interfaccia utente dell'applicazione include una serie di pulsanti chiamati Porta sullo sfondo, Sposta in basso, Sposta in alto e In primo piano. Quando l'utente fa clic su uno di questi pulsanti, l'applicazione chiama il metodo corrispondente della classe DrawingCanvas: moveToBack() , moveDown() , moveUp() o moveToFront() . Il metodo moveToBack() , ad esempio, include il seguente codice:

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

Il metodo impiega il metodo setChildIndex() (ereditato dalla classe DisplayObjectContainer) per posizionare l'oggetto di visualizzazione nella posizione di indice 0 dell'elenco secondario dell'istanza di DrawingCanvas ( this ).

Il metodo moveDown() funziona in modo simile, tranne che decrementa la posizione di indice dell'oggetto di visualizzazione di 1 nell'elenco secondario dell'istanza DrawingCanvas:

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

I metodi moveUp() e moveToFront() funzionano in modo simile ai metodi moveToBack() e moveDown() .