Voorbeeld van weergaveobjecten: SpriteArranger

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

De voorbeeldtoepassing SpriteArranger borduurt verder op de voorbeeldtoepassing Geometric Shapes die afzonderlijk wordt beschreven in ActionScript 3.0 leren gebruiken.

De voorbeeldtoepassing SpriteArranger illustreert de beginselen voor het omgaan met weergaveobjecten:

  • Weergaveobjectklassen uitbreiden

  • Objecten toevoegen aan het weergaveoverzicht

  • Lagen toekennen aan weergaveobjecten en werken met weergaveobjectcontainers

  • Op weergaveobjectgebeurtenissen reageren

  • De eigenschappen en methoden van weergaveobjecten gebruiken

Zie www.adobe.com/go/learn_programmingAS3samples_flash_nl als u de toepassingsbestanden voor dit voorbeeld wilt downloaden. De SpriteArranger-toepassingsbestanden vindt u in de map Examples/SpriteArranger. De toepassing bestaat uit de volgende bestanden:

Bestand

Beschrijving

SpriteArranger.mxml

of

SpriteArranger.fla

Het hoofdtoepassingsbestand in Flash (FLA) of Flex (MXML).

com/example/programmingas3/SpriteArranger/CircleSprite.as

Een klasse die een objecttype Sprite definieert dat een cirkel op het scherm rendert.

com/example/programmingas3/SpriteArranger/DrawingCanvas.as

Een klasse die een canvas definieert. Dit is een weergaveobjectcontainer met objecten GeometricSprite.

com/example/programmingas3/SpriteArranger/SquareSprite.as

Een klasse die een objecttype Sprite definieert dat een vierkant op het scherm rendert.

com/example/programmingas3/SpriteArranger/TriangleSprite.as

Een klasse die een objecttype Sprite definieert dat een driehoek op het scherm rendert.

com/example/programmingas3/SpriteArranger/GeometricSprite.as

Een klasse die een object Sprite uitbreidt. De klasse wordt gebruikt om een vorm op het scherm te definiëren. De CircleSprite, SquareSprite en TriangleSprite breiden alledrie deze klasse uit.

com/example/programmingas3/geometricshapes/IGeometricShape.as

De basisinterface die de methoden definieert die door alle geometrische vormklassen moeten worden geïmplementeerd.

com/example/programmingas3/geometricshapes/IPolygon.as

Een interface die methoden definieert die moeten worden geïmplementeerd door geometrische vormklassen met meerdere zijden.

com/example/programmingas3/geometricshapes/RegularPolygon.as

Een type geometrische vorm met zijden van gelijke lengte die symmetrisch rond het midden van de vorm zijn geplaatst.

com/example/programmingas3/geometricshapes/Circle.as

Een geometrische vorm die een cirkel definieert.

com/example/programmingas3/geometricshapes/EquilateralTriangle.as

Een subklasse van RegularPolygon die een driehoek met zijden van gelijke lengte definieert.

com/example/programmingas3/geometricshapes/Square.as

Een subklasse van RegularPolygon die een rechthoek met vier zijden van gelijke lengte definieert.

com/example/programmingas3/geometricshapes/GeometricShapeFactory.as

Een klasse die een fabrieksmethode bevat voor het maken van vormen op basis van een opgegeven vormtype en grootte.

De SpriteArranger-klassen definiëren

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.

De klasse DrawingCanvas

In Flex moeten alle onderliggende weergaveobjecten die aan een object Container worden toegevoegd, van een klasse zijn die van de klasse mx.core.UIComponent afstamt. Deze toepassing voegt een instantie van de klasse DrawingCanvas toe als een onderliggende instantie van een object mx.containers.VBox, zoals gedefinieerd in de MXML-code in het bestand SpriteArranger.mxml. Deze overerving wordt als volgt in de klassendeclaratie DrawingCanvas gedeclareerd:

public class DrawingCanvas extends UIComponent

De klasse UIComponent overerft van de klassen DisplayObject, DisplayObjectContainer en Sprite en de code in de klasse DrawingCanvas gebruikt de methoden en eigenschappen van die klassen.

De klasse DrawingCanvas breidt de klasse Sprite uit en deze overerving wordt als volgt gedefinieerd in de klassendeclaratie DrawingCanvas:

public class DrawingCanvas extends Sprite

De klasse Sprite is een subklasse van de klasse DisplayObjectContainer en DisplayObject en de klasse DrawingCanvas gebruikt de methoden en eigenschappen van deze klassen.

De constructormethode DrawingCanvas() stelt het Rectangle-object bounds in. Deze eigenschap wordt later gebruikt voor het tekenen van de contour van het canvas. Hierna roept de eigenschap de methode initCanvas() aan, als volgt:

this.bounds = new Rectangle(0, 0, w, h); 
initCanvas(fillColor, lineColor);

Zoals getoond door het volgende voorbeeld, definieert de methode initCanvas() verschillende eigenschappen van het object DrawingCanvas, die als argumenten zijn doorgegeven aan de constructorfunctie:

this.lineColor = lineColor; 
this.fillColor = fillColor; 
this.width = 500; 
this.height = 200;

De methode initCanvas() roept vervolgens de methode drawBounds() aan, die het canvas tekent met gebruik van de eigenschap graphics van de klasse DrawingCanvas. De eigenschap graphics is overgeërfd van de klasse Shape.

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

De volgende extra methoden van de klasse DrawingCanvas worden aangeroepen op basis van gebruikersinteracties met de toepassing:

De klasse GeometricSprite en zijn subklassen

Elk weergaveobject dat de gebruiker aan het canvas kan toevoegen is een instantie van een van de volgende subklassen van de klasse GeometricSprite:

  • CircleSprite

  • SquareSprite

  • TriangleSprite

De klasse GeometricSprite breidt de klasse flash.display.Sprite uit:

public class GeometricSprite extends Sprite

De klasse GeometricSprite bevat een aantal eigenschappen die worden gedeeld door alle objecten GeometricSprite. Deze eigenschappen worden in de constructorfunctie ingesteld op basis van de parameters die zijn doorgegeven aan de functie. Bijvoorbeeld:

this.size = size; 
this.lineColor = lColor; 
this.fillColor = fColor;

De eigenschap geometricShape van de klasse GeometricSprite definieert een interface IGeometricShape, die de wiskundige eigenschappen maar niet de visuele eigenschappen van de vorm definieert. De klassen die de IGeometricShape-interface implementeren worden gedefinieerd in de voorbeeldtoepassing GeometricShapes die wordt beschreven in ActionScript 3.0 leren gebruiken.

De klasse GeometricSprite definieert de methode drawShape(), die nauwkeuriger wordt ingesteld in de overschrijfdefinities van elke subklasse van GeometricSprite. Zie voor meer informatie de sectie "Weergaveobjecten aan het canvas toevoegen" hieronder.

De klasse GeometricSprite biedt tevens de volgende methoden:

Weergaveobjecten aan het canvas toevoegen

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.

Weergaveobjecten klikken en slepen

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 weergaveobjectlagen opnieuw indelen

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().