표시 객체 예제: SpriteArranger

SpriteArranger 응용 프로그램을 사용하여 화면 상의 "캔바스"에 다양한 표시 객체를 추가할 수 있습니다.

DrawingCanvas 클래스는 사용자가 화면에 모양을 추가할 수 있는 드로잉 영역, 표시 객체 컨테이너 유형 등을 정의합니다. 화면에 추가할 수 있는 모양은 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;

사용자가 [모양 추가] 버튼을 클릭하면 응용 프로그램이 DrawingCanvas 클래스의 addShape() 메서드를 호출합니다. 그러면 다음 예제에서 보듯이 GeometricSprite 하위 클래스 중 하나의 해당 생성자 함수가 호출되어 새 GeometricSprite가 인스턴스화됩니다.

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

각 생성자 메서드는 drawShape() 메서드를 호출합니다. 이 메서드는 Sprite 클래스에서 상속되는 클래스의 graphics 속성을 사용하여 해당 벡터 그래픽을 그립니다. 예를 들어, CircleSprite 클래스의 drawShape() 메서드는 다음과 같은 코드를 포함합니다.

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() 함수의 끝에서 두 번째 행은 DisplayObject 클래스에서 상속되는 표시 객체의 alpha 속성을 설정하므로, 캔바스에 추가된 각 표시 객체는 약간 투명하여 그 뒤에 있는 객체를 볼 수 있습니다.

addChild() 메서드의 마지막 행은 이미 표시 목록에 있는 DrawingCanvas 클래스 인스턴스의 자식 목록에 새 표시 객체를 추가합니다. 그러면 새 표시 객체가 스테이지에 표시됩니다.

응용 프로그램의 인터페이스에는 selectedSpriteTxt와 outputTxt의 두 텍스트 필드가 포함됩니다. 이러한 텍스트 필드의 텍스트 속성은 캔바스에 추가되거나 사용자가 선택한 GeometricSprite 객체에 대한 정보로 업데이트됩니다. GeometricSprite 클래스는 toString() 메서드를 다음과 같이 재정의하여 이 정보 보고 작업을 처리합니다.

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

shapeType 속성은 각 GeometricSprite 하위 클래스의 생성자 메서드에 있는 해당 값으로 설정됩니다. 예를 들어, toString() 메서드는 DrawingCanvas 인스턴스에 최근에 추가된 CircleSprite 인스턴스에 대해 다음 값을 반환할 수 있습니다.

Circle of size 50 at 0, 0

DrawingCanvas 클래스의 describeChildren() 메서드는 DisplayObjectContainer 클래스에서 상속되는 numChildren 속성을 사용하여 for 루프에 대한 한도를 설정함으로써 캔바스의 자식 목록을 반복합니다. 다음과 같이 각 자식을 나열하는 문자열이 생성됩니다.

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

결과 문자열은 outputTxt 텍스트 필드의 text 속성을 설정하는 데 사용됩니다.

사용자가 GeometricSprite 인스턴스를 클릭하면 응용 프로그램은 onMouseDown() 이벤트 핸들러를 호출합니다. 다음과 같이 이 이벤트 핸들러는 GeometricSprite 클래스의 생성자 함수에서 마우스 누름 이벤트를 수신하도록 설정됩니다.

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

그런 다음 onMouseDown() 메서드는 GeometricSprite 객체의 showSelected() 메서드를 호출합니다. 객체에 대해 이 메서드가 처음으로 호출된 경우 이 메서드는 selectionIndicator라는 새 Shape 객체를 만들고 Shape 객체의 graphics 속성을 사용하여 다음과 같이 빨간색의 강조 표시된 사각형을 그립니다.

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() 메서드가 처음으로 호출된 경우가 아니면 이 메서드는 selectionIndicator 모양의 visible 속성(DisplayObject 클래스에서 상속됨)을 간단히 다음과 같이 설정합니다.

this.selectionIndicator.visible = true;

hideSelected() 메서드는 visible 속성을 false로 설정하여 이전에 선택된 객체의 selectionIndicator 모양을 숨깁니다.

또한 onMouseDown() 이벤트 핸들러 메서드는 Sprite 클래스에서 상속되는 startDrag() 메서드를 호출합니다. 이 메서드에는 다음과 같은 코드가 포함되어 있습니다.

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

사용자는 boundsRect 사각형에 의해 설정된 경계 내에서 선택된 객체를 캔바스 주위로 드래그할 수 있습니다.

마우스 버튼을 놓으면 mouseUp 이벤트가 전달됩니다. DrawingCanvas의 생성자 메서드는 다음과 같은 이벤트 리스너를 설정합니다.

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

이 이벤트 리스너는 개별 GeometricSprite 객체가 아니라 DrawingCanvas 객체에 대해 설정됩니다. GeometricSprite 객체가 드래그될 때 마우스 버튼을 놓으면 다른 표시 객체(다른 GeometricSprite 객체) 뒤에서 드래그가 중단될 수 있기 때문입니다. 전경의 표시 객체는 마우스 놓음 이벤트를 수신하지만 사용자가 드래그 중인 표시 객체는 이 이벤트를 수신하지 못합니다. DrawingCanvas 객체에 리스너를 추가하면 이벤트가 항상 처리되도록 할 수 있습니다.

onMouseUp() 메서드는 GeometricSprite 객체의 onMouseUp() 메서드를 호출하고, 이 메서드는 GeometricSprite 객체의 stopDrag() 메서드를 호출하게 됩니다.

응용 프로그램의 사용자 인터페이스에는 Move Back, Move Down, Move Up, Move to Front라는 버튼이 있습니다. 사용자가 이 버튼 중 하나를 클릭하면 응용 프로그램은 DrawingCanvas 클래스의 해당 메서드(moveToBack(), moveDown(), moveUp() 또는 moveToFront())를 호출합니다. 예를 들어, moveToBack() 메서드는 다음과 같은 코드를 포함합니다.

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

이 메서드는 DisplayObjectContainer 클래스에서 상속되는 setChildIndex() 메서드를 사용하여 DrawingCanvas 인스턴스(this)의 자식 목록에서 인덱스 위치 0에 표시 객체를 배치합니다.

moveDown() 메서드는 DrawingCanvas 인스턴스의 자식 목록에서 표시 객체의 인덱스 위치가 1씩 감소된다는 점을 제외하고는 유사하게 작동합니다.

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

moveUp() 및 moveToFront() 메서드는 moveToBack() 및 moveDown() 메서드와 유사하게 작동합니다.