Görüntüleme nesnesi örneği: SpriteArranger

SpriteArranger uygulaması, kullanıcının ekrandaki "tuvale" çeşitli görüntüleme nesneleri eklemesine olanak sağlar.

DrawingCanvas sınıfı, kullanıcının, üzerine ekran şekilleri ekleyebileceği bir görüntüleme nesnesi kabı türü olan bir çizim alanı ekler. Bu ekran şekilleri, GeometricSprite sınıfının alt sınıflarından birinin örnekleridir.

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;

Kullanıcı Şekil Ekle düğmesini tıklattığında, uygulama, DrawingCanvas sınıfının addShape() yöntemini çağırır. Aşağıdaki örnekte gösterildiği gibi, GeometricSprite alt sınıflarından birinin uygun yapıcı işlevini çağırarak yeni bir GeometricSprite öğesini başlatır:

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

Her yapıcı yöntemi, drawShape() yöntemini çağırır, bu da uygun vektör grafiğini çizmek için sınıfın graphics özelliğini (Sprite sınıfından miras alınan) kullanır. Örneğin, CircleSprite sınıfının drawShape() yöntemi şu kodu içerir:

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

addShape() işlevinin ikinci satırı ile sonuncu satırı arasındaki satırlar, görüntüleme nesnesinin alpha özelliğini (DisplayObject sınıfından miras alınan) ayarlar, böylece tuvale eklenen her görüntüleme nesnesi biraz daha saydam olduğundan kullanıcı bunun ardındaki nesneleri görebilir.

addChild() yönteminin son satırı, zaten görüntüleme listesinde bulunan DrawingCanvas sınıfı örneğinin alt öğe listesine yeni görüntüleme nesnesini ekler. Bu da, yeni görüntüleme nesnesinin Sahne Alanı'nda görüntülenmesini sağlar.

Uygulamanın arabirimi iki metin alanı içerir: selectedSpriteTxt ve outputTxt. Bu metin alanlarının metin özellikleri, tuvale eklenmiş veya kullanıcı tarafından seçilmiş olan GeometricSprite nesneleri hakkındaki bilgilerle güncellenir. GeometricSprite sınıfı, aşağıdaki gibi, toString() yöntemini geçersiz kılarak bu bilgi raporlama görevini işler:

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

shapeType özelliği, her bir GeometricSprite alt sınıfının yapıcı yönteminde uygun değere ayarlanır. Örneğin, toString() yöntemi, DrawingCanvas örneğine henüz eklenmiş olan bir CircleSprite örneği için şu değeri döndürebilir:

Circle of size 50 at 0, 0

DrawingCanvas sınıfının describeChildren() yöntemi, for döngüsünün sınırını ayarlamak için numChildren özelliğini (DisplayObjectContainer sınıfından miras alınan) kullanarak tuvalin alt öğe listesi üzerinden döngü oluşturur. Bu, aşağıdaki gibi, alt öğelerin her birini listeleyen bir dize oluşturur:

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

Sonuçta elde edilen dize, outputTxtmetin alanının text özelliğini ayarlamak için kullanılır.

Kullanıcı bir GeometricSprite örneğini tıklattığında, uygulama, onMouseDown() olay işleyicisini çağırır. Aşağıda gösterildiği gibi, bu olay işleyicisi, GeometricSprite sınıfının yapıcı işlevindeki fare basılı olaylarını dinleyecek şekilde ayarlanmıştır:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

onMouseDown() yöntemi daha sonra GeometricSprite nesnesinin showSelected() yöntemini çağırır. Bu yöntem nesne için ilk defa çağrılıyorsa, yöntem selectionIndicator adında yeni bir Shape nesnesi oluşturur ve aşağıdaki gibi kırmızı bir vurgu dikdörtgenini çizmek için Shape nesnesinin graphics özelliğini kullanır:

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

onMouseDown() yöntemi ilk defa çağrılmıyorsa, aşağıdaki gibi, yöntem, selectionIndicator şeklinin visible özelliğini (DisplayObject sınıfından miras alınan), ayarlar:

this.selectionIndicator.visible = true;

hideSelected() yöntemi, önceden seçilen nesnenin visible özelliğini false değerine ayarlayarak bu nesnenin selectionIndicator şeklini gizler.

onMouseDown() olay işleyicisi yöntemi ayrıca şu kodu içeren startDrag() yöntemini (Sprite sınıfından miras alınan) çağırır:

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

Bu, boundsRect dikdörtgeni tarafından ayarlanan sınırlar içinde kullanıcının seçili nesneyi tuval etrafında sürüklemesine olanak sağlar.

Kullanıcı fareyi serbest bıraktığında, mouseUp olayı gönderilir. DrawingCanvas öğesinin yapıcı yöntemi, şu olay dinleyicisini ayarlar:

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

Bu olay dinleyicisi, GeometricSprite nesneleri için değil, DrawingCanvas nesnesi için ayarlanır. Bunun nedeni, GeometricSprite nesnesi sürüklenirken, fare serbest bırakıldığında bu nesnenin başka bir görüntüleme nesnesinin (başka bir GeometricSprite nesnesi) arkasında kalabilmesidir. Ön plandaki görüntüleme nesnesi, fare basılı olmama olayını alır ancak kullanıcının sürüklemekte olduğu görüntüleme nesnesi bu olayı almaz. DrawingCanvas nesnesine dinleyici eklenmesi, olayın her zaman işlenmesini sağlar.

onMouseUp() yöntemi, GeometricSprite nesnesinin onMouseUp() yöntemini çağırır, bu da daha sonra GeometricSprite nesnesinin stopDrag() yöntemini çağırır.

Uygulamanın kullanıcı arabirimi, Geriye Taşı, Aşağı Taşı, Yukarı Taşı ve Öne Taşı etiketli düğmeleri içerir. Kullanıcı bu düğmelerden birini tıklattığında, uygulama DrawingCanvas sınıfının karşılık gelen yöntemini çağırır: moveToBack(), moveDown(), moveUp() veya moveToFront(). Örneğin, moveToBack() yöntemi şu kodu içerir:

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

Bu yöntem, DrawingCanvas örneğinin (this) alt öğe listesinde 0 dizin konumuna görüntüleme nesnesini yerleştirmesi için setChildIndex() yöntemini (DisplayObjectContainer sınıfından miras alınan) kullanır.

moveDown() yöntemi benzer şekilde çalışır, tek farkı, DrawingCanvas örneğinin alt öğe listesinde görüntüleme nesnesinin dizin konumunu 1'er 1'er azaltmasıdır:

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

moveUp() ve moveToFront() yöntemleri, moveToBack() ve moveDown() yöntemlerine benzer şekilde çalışır.