Przykład z obiektem wyświetlanym: SpriteArranger

Aplikacja SpriteArranger umożliwia użytkownikowi dodawanie różnych obiektów wyświetlanych do ekranowego „obszaru roboczego”.

Klasa DrawingCanvas definiuje obszar rysowania — tup kontenera obiektów wyświetlanych, do którego użytkownik może dodawać kształty ekranowe. Te ekranowe kształty są instancjami jednej z podklas klasy 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;

Gdy użytkownik kliknie przycisk Dodaj kształt, aplikacja wywołuje metodę addShape() klasy DrawingCanvas. Metoda tworzy nową instancję GeometricSprite poprzez wywołanie odpowiedniej funkcji konstruktora jednej z podklas klasy GeometricSprite, jak w poniższym przykładzie:

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

Każda metoda konstruktora wywołuje metodę drawShape() , która korzysta z właściwości graphics klasy (dziedziczonej z klasy Sprite) w celu rysowania odpowiedniej grafiki wektorowej. Na przykład: metoda drawShape() klasy CircleSprite zawiera poniższy kod:

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

Przedostatnia linia funkcji addShape() ustawia właściwość alpha obiektu wyświetlanego (dziedziczoną z klasy DisplayObject) w taki sposób, że każdy obiekt wyświetlany dodawany do obszaru roboczego staje się częściowo przezroczysty, co sprawia, że obiekty znajdujące się za nim stają się widoczne.

Ostatnia linia metody addChild() dodaje nowy obiekt wyświetlany do podrzędnej listy instancji klasy DrawingCanvas, która już znajduje się na liście wyświetlania. To sprawia, że nowy obiekt wyświetlany pojawia się na stole montażowym.

Interfejs aplikacji zawiera dwa pola tekstowe: selectedSpriteTxt i outputTxt . Właściwości tekstowe tych pól tekstowych są aktualizowane z uwzględnieniem informacji o obiektach GeometricSprite, które zostały dodane do obszaru roboczego lub wybrane przez użytkownika. Klasa GeometricSprite obsługuje to zadanie zgłaszania informacji poprzez zastąpienie metody toString() w następujący sposób:

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

Dla właściwości shapeType zostaje ustawiona odpowiednia wartość w metodzie konstruktora poszczególnych klas GeometricSprite. Na przykład: metoda toString() może zwrócić poniższą wartość dla instancji CircleSprite dodanej jako ostatnia do instancji DrawingCanvas:

Circle of size 50 at 0, 0

Metoda describeChildren() klasy DrawingCanvas wykonuje pętle przez podrzędną listę obszaru roboczego, wykorzystując właściwość numChildren (dziedziczoną z klasy DisplayObjectContainer) w celu ustawienia limitu dla pętli for . Metoda generuje ciąg znaków zawierający poszczególne elementy podrzędne, w następujący sposób:

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

Wynikowy ciąg znaków jest wykorzystywany do ustawienia właściwości text pola tekstowego outputTxt .

Gdy użytkownik kliknie instancję GeometricSprite, aplikacja wywołuje moduł onMouseDown() obsługi zdarzeń. Poniżej przedstawiono, że moduł obsługi wykrywa zdarzenia kliknięcia w funkcji konstruktora klasy GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Następnie metoda onMouseDown() wywołuje metodę showSelected() obiektu GeometricSprite. Jeśli jest to pierwsze wywołanie metody dla tego obiektu, ta metoda tworzy nowy obiekt Shape o nazwie selectionIndicator i wykorzystuje właściwość graphics obiektu Shape w celu narysowania czerwonego prostokąta, jak poniżej:

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

Jeśli nie jest to pierwsze wywołanie metody onMouseDown() , metoda ustawia właściwość visible kształtu selectionIndicator (właściwość dziedziczona z klasy DisplayObject), co przedstawiono poniżej:

this.selectionIndicator.visible = true;

Metoda hideSelected() ukrywa kształt selectionIndicator poprzednio wybranego obiektu, ustawiając dla właściwości visible wartość false .

Metoda onMouseDown() obsługi zdarzeń wywołuje również metodę startDrag() (dziedziczoną z klasy Sprite), która zawiera poniższy kod:

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

Dzięki temu użytkownik może przeciągać wybrany obiekt na obszarze roboczym w granicach określonych przez prostokąt boundsRect .

Gdy użytkownik zwolni przycisk myszy, następuje wywołanie zdarzenia mouseUp . Metoda konstruktora DrawingCanvas ustawia następujący detektor zdarzeń:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Ten detektor jest ustawiony dla obiektu DrawingCanvas, a nie dla poszczególnych obiektów GeometricSprite. Dzieje się tak podczas przeciągania obiektu GeometricSprite — może zostać zakończone za innym obiektem wyświetlanym (inny obiekt GeometricSprite) po zwolnieniu przycisku myszy. Obiekt wyświetlany na pierwszym planie otrzyma zdarzenie zwolnienia przycisku myszy, ale obiekt wyświetlany, który jest przeciągany przez użytkownika, nie otrzyma tego zdarzenia. Dodanie detektora do obiektu DrawingCanvas zapewnia, że zdarzenie jest zawsze obsługiwane.

Metoda onMouseUp() wywołuje metodę onMouseUp() obiektu GeometricSprite, która następnie wywołuje metodę stopDrag() obiektu GeometricSprite.

Interfejs użytkownika aplikacji zawiera przyciski Przenieś na spód, Przenieś w dół, Przenieś w górę i Przenieś na wierzch. Gdy użytkownik kliknie jeden z tych przycisków, aplikacja wywoła odpowiednią metodę klasy DrawingCanvas: moveToBack() , moveDown() , moveUp() lub moveToFront() . Na przykład: metoda moveToBack() zawiera następujący kod:

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

Ta metoda korzysta z metody setChildIndex() (dziedziczonej z klasy DisplayObjectContainer) w celu ustawienia obiektu wyświetlanego w położeniu indeksu 0 na liście podrzędnej instancji DrawingCanvas ( this ).

Metoda moveDown() działa podobnie, ale zmniejsza indeks obiektu wyświetlanego o 1 na liście podrzędnej instancji DrawingCanvas:

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

Metody moveUp() i moveToFront() działają podobnie jak metody moveToBack() i moveDown() .