Voorbeeld van weergaveobjecten: SpriteArranger

Met de toepassing SpriteArranger kan de gebruiker een aantal weergaveobjecten aan het canvas op het scherm toevoegen.

De klasse DrawingCanvas definieert een tekengebied, een type weergaveobjectcontainer, waarin een gebruiker op het scherm vormen kan toevoegen. Deze vormen op scherm zijn instanties van een van de subklassen van de klasse 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;

Wanneer de gebruiker op de knop Vorm toevoegen klikt, roept de toepassing de methode addShape() van de klasse DrawingCanvas aan. Deze instantieert een nieuwe GeometricSprite door de toepasselijke constructorfunctie van een van de subklassen GeometricSprite aan te roepen, zoals getoond in het volgende voorbeeld:

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

Elke constructormethode roept de methode drawShape() aan, die de eigenschap graphics van de klasse (die wordt overgeërfd van de klasse Sprite) gebruikt om de juiste vectorafbeelding te tekenen. De methode drawShape() van de klasse CircleSprite bevat bijvoorbeeld de volgende code:

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

De tweede tot de laatste regel van de functie addShape() stellen de eigenschap alpha van het weergaveobject (die wordt overgeërfd van de klasse DisplayObject) in, zodat elk weergaveobject dat aan het canvas wordt toegevoegd, enigszins transparant is en de objecten hierachter zichtbaar voor de gebruiker zijn.

De laatste regel van de methode addChild() voegt het nieuwe weergaveobject aan de lijst met onderliggende items van de instantie van de klasse DrawingCanvas toe, die zich reeds in het weergaveoverzicht bevindt. Hierdoor wordt het nieuwe weergaveobject in het werkgebied weergegeven.

De interface voor de toepassing bevat de twee tekstvelden selectedSpriteTxt en outputTxt. De teksteigenschappen van deze tekstvelden worden bijgewerkt met de informatie over de objecten GeometricSprite die aan het canvas zijn toegevoegd of door de gebruiker zijn geselecteerd. De klasse GeometricSprite handelt deze informatierapporterende taak af door de methode toString() als volgt te overschrijven:

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

De eigenschap shapeType wordt ingesteld op de juiste eigenschap in de constructormethode van elke subklasse GeometricSprite. De methode toString() retourneert bijvoorbeeld de volgende waarde voor een instantie CircleSprite die recentelijk aan de instantie DrawingCanvas is toegevoegd:

Circle of size 50 at 0, 0

De methode describeChildren() van de klasse DrawingCanvas doorloopt de lijst met onderliggende items van het canvas met gebruik van de eigenschap numChildren (die is overgeërfd van de klasse DisplayObjectContainer) om de limiet van de lus for in te stellen. Er wordt als volgt een tekenreeks van elk onderliggend element gegenereerd:

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

De resulterende tekenreeks wordt gebruikt om de eigenschap text van het tekstveld outputTxt in te stellen.

Wanneer de gebruiker op een instantie GeometricSprite klikt, roept de toepassing de gebeurtenishandler onMouseDown() aan. Zoals getoond door de volgende coderegel, wordt de gebeurtenishandler ingesteld om naar gebeurtenissen muis omlaag in de constructorfunctie van de klasse GeometricSprite te luisteren:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

De methode onMouseDown() roept vervolgens de methode showSelected() van het object GeometricSprite aan. Als het de eerste keer is dat deze methode voor het object wordt aangeroepen, maakt deze methode een nieuw object Shape met de naam selectionIndicator en gebruikt deze de eigenschap graphics van het object Shape om een rood gemarkeerde rechthoek te tekenen:

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

Als de methode onMouseDown() al een keer is aangeroepen, stelt de methode alleen de eigenschap visible van selectionIndicator in (die wordt overgeërfd van de klasse DisplayObject):

this.selectionIndicator.visible = true;

De methode hideSelected() verbergt de vorm selectionIndicator van het eerder geselecteerde object door zijn eigenschap visible op false in te stellen.

De gebeurtenishandlermethode onMouseDown() roept ook de methode startDrag() aan (die is overgeërfd van de klasse Sprite), die de volgende code bevat:

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

Dit staat de gebruiker toe om het geselecteerde object in het canvas te slepen, binnen de grenzen die zijn ingesteld door de rechthoek boundsRect.

Wanneer de gebruiker de muisknop loslaat, wordt de gebeurtenis mouseUp verzonden. De constructormethode van DrawingCanvas stelt de volgende gebeurtenislistener in:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Deze gebeurtenislistener wordt ingesteld voor het object DrawingCanvas, in plaats van voor de individuele objecten GeometricSprite. Wanneer het object GeometricSprite wordt gesleept, kan dit object namelijk achter een ander weergaveobject eindigen (een ander object GeometricSprite) wanneer de muisknop wordt losgelaten. Het weergaveobject op de voorgrond ontvangt in dat geval de gebeurtenis muis omhoog en niet het weergaveobject dat door de gebruiker wordt gesleept. Als u de listener aan het object DrawingCanvas toevoegt, wordt de gebeurtenis altijd afgehandeld.

De methode onMouseUp() roept de methode onMouseUp() van het object GeometricSprite aan, die hierop de methode stopDrag() van het object GeometricSprite aanroept.

De gebruikersinterface voor de toepassing bevat knoppen met het label Move Back (Naar achteren), Move Down (Omlaag), Move Up (Omhoog) en Move to Front (Naar voren). Wanneer de gebruiker op een van deze knoppen klikt, roept de toepassing de overeenkomende methode van de klasse DrawingCanvas aan: moveToBack(), moveDown(), moveUp() of moveToFront(). De methode moveToBack() bevat bijvoorbeeld de volgende code:

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

De methode gebruikt de methode setChildIndex() (die wordt overgeërfd van de klasse DisplayObjectContainer) om het weergaveobject op indexpositie 0 te plaatsen in de lijst met onderliggende items van de instantie DrawingCanvas (this).

De methode moveDown() werkt op ongeveer dezelfde manier, behalve dat deze de indexpositie van het weergaveobject met 1 vermindert in de lijst met onderliggende items van de instantie DrawingCanvas:

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

De methoden moveUp() en moveToFront() werken ongeveer op dezelfde manier als de methoden moveToBack() en moveDown().