Exempel på visningsobjekt: SpriteArranger

Med programmet SpriteArranger kan användaren lägga till flera olika visningsobjekt till arbetsytan på skärmen.

Med klassen DrawingCanvas definieras ett ritområde, en typ av behållare för visningsobjekt, där användaren kan lägga till former på skärmbilden. Dessa former på skärmbilden är instanser av en av underklasserna i klassen 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;

När användaren klickar på Lägg till form-knappen anropas metoden addShape() i klassen DrawingCanvas. En ny GeometricSprite-klass instansieras genom anrop av lämplig konstruktorfunktion i en av GeometricSprite-underklasserna enligt följande exempel:

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

Varje konstruktormetod anropar metoden drawShape() där egenskapen graphics används för klassen (ärvs från klassen Sprite) så att lämplig vektorgrafik ritas. Exempelvis innehåller metoden drawShape() i klassen CircleSprite följande 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);

Den näst sista raden i funktionen addShape() anger egenskapen alpha för visningsobjektet (ärvs från klassen DisplayObject). På så vis blir alla visningsobjekt som läggs till på arbetsytan något genomskinliga och användaren kan se objekten som finns under.

Med den sista raden i metoden addChild() läggs det till nya visningsobjektet i listan med underordnade objekt för instansen av klassen DrawingCanvas, som redan finns med i visningslistan. Detta resulterar i att det nya visningsobjektet visas på scenen.

Gränssnittet för programmet innehåller två textfält; selectedSpriteTxt och outputTxt. Textegenskaperna för dessa textfält uppdateras med information om objekten GeometricSprite som har lagts till på arbetsytan eller valts av användaren. Klassen GeometricSprite hanterar denna informationsrapporterande åtgärd genom att åsidosätta metoden toString() enligt följande:

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

Egenskapen shapeType anges med lämpligt värde i konstruktormetoden för respektive GeometricSprite-underklass. Exempelvis kan metoden toString() returnera följande värde för en CircleSprite-instans som nyligen lagts till i DrawingCanvas-instansen:

Circle of size 50 at 0, 0

Metoden describeChildren() i klassen DrawingCanvas körs som slinga igenom arbetsytans lista med underordnade, där egenskapen numChildren (ärvs från klassen DisplayObjectContainer) används som villkor till for-slingan. En lista med strängar för alla underordnade objekt genereras enligt följande:

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

Den resulterande strängen används för att ange egenskapen text i textfältet outputTxt.

När användaren klickar på en GeometricSprite-instans anropas händelsehanteraren onMouseDown(). Händelsehanteraren anges med avlyssning för mus ned-händelser i konstruktorfunktionen i klassen GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Metoden onMouseDown() anropar sedan metoden showSelected() i objektet GeometricSprite. Om det är första gången för objektet som den här metoden anropas skapas det nya Shape-objektet selectionIndicator och egenskapen graphics i Shape-objektet används för att rita en röd rektangelmarkering:

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

Om det inte är första gången som metoden onMouseDown() anropas anges egenskapen visible för formen selectionIndicator (ärvs från klassen DisplayObject):

this.selectionIndicator.visible = true;

Metoden hideSelected() döljer formen selectionIndicator för tidigare valda objekt genom att ange egenskapen visible till false.

Händelsehanterarmetoden onMouseDown() anropar även metoden startDrag() (ärvs från klassen Sprite), som innehåller följande kod:

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

På så vis kan användaren dra det valda objektet över arbetsytan, inom gränserna angivna med rektangeln boundsRect.

När användaren släpper musknappen skickas händelsen mouseUp. Konstruktormetoden för DrawingCanvas anger följande händelseavlyssnare:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Den här händelseavlyssnaren anges för objektet DrawingCanvas, i stället för separata GeometricSprite-objekt. Detta beror på, att när objektet GeometricSprite dras kan det hamna bakom ett annat visningsobjekt (ett annat GeometricSprite-objekt) när musknappen släpps upp. Visningsobjektet i förgrunden skulle då ta emot den avslutande mus upp-händelsen, motsatt visningsobjektet som användaren drar. Genom att lägga till avlyssnaren till objektet DrawingCanvas säkerställs att händelsen alltid hanteras.

Metoden onMouseUp() anropar metoden onMouseUp() i objektet GeometricSprite, vilket i sin tur anropar metoden stopDrag().

Användargränssnittet för programmet innehåller knapparna Flytta längst bak (Move Back), Flytta ner (Move Down), Flytta upp (Move Up) och Flytta längst fram (Move to Front). När användaren klickar på någon av knapparna anropas motsvarande metod i klassen DrawingCanvas: moveToBack(), moveDown(), moveUp() eller moveToFront(). I till exempel metoden moveToBack() ingår följande kod:

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

I metoden används metoden setChildIndex() (ärvs från klassen DisplayObjectContainer) för att placera visningsobjektet i indexposition 0 i listan med underordnade objekt för DrawingCanvas-instansen (this).

Metoden moveDown() fungerar ungefär på samma sätt, förutom att indexpositionen för visningsobjektet minskas med 1 i listan med underordnade objekt för DrawingCanvas-instansen:

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

Metoderna moveUp() och moveToFront() fungerar på liknande sätt som metoderna moveToBack() och moveDown().