Пример экранного объекта: 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;

Когда пользователь нажимает кнопку «Добавить фигуру», приложение вызывает метод addShape() класса DrawingCanvas. Он создает экземпляр нового объекта 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() , который использует свойство graphics данного класса (унаследованное из класса Sprite) для отрисовки соответствующей векторной графики. Например, метод drawShape() класса CircleSprite включает следующий код:

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() задает свойство alpha экранного объекта (унаследованное из класса DisplayObject) таким образом, что каждый добавленный на холст экранный объект слегка прозрачен, что дает пользователю возможность увидеть объекты за ним.

Последняя строка метода 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() может вернуть следующее значение для экземпляра CircleSprite, недавно добавленного к экземпляру DrawingCanvas:

Circle of size 50 at 0, 0

Метод describeChildren() класса DrawingCanvas обеспечивает циклическую обработку списка дочерних объектов холста. При этом свойство numChildren (унаследованное из класса DisplayObjectContainer) применяется, чтобы задать предел цикла for . Он генерирует следующую строку со списком всех дочерних объектов:

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

Эта строка применяется для задания свойства text текстового поля outputTxt .

Когда пользователь щелкает по экземпляру GeometricSprite, приложение вызывает обработчик событий onMouseDown() . Как указано далее, этот обработчик событий настроен на прослушивание событий нажатия кнопки мыши в функции конструктора класса GeometricSprite:

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

Метод onMouseDown() вызывает затем метод showSelected() объекта GeometricSprite. Если этот метод вызывается для объекта впервые, он создает новый объект Shape с именем selectionIndicator и использует свойство graphics объекта Shape для отрисовки прямоугольника с красной подсветкой следующим образом:

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() скрывает фигуру selectionIndicator ранее выбранного объекта путем присвоения свойству visible значения false .

Метод обработчика событий onMouseDown() вызывает также метод startDrag() (унаследованный из класса Sprite), который включает следующий код:

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

Этот обработчик событий задается для объекта DrawingCanvas, а не для отдельных объектов GeometricSprite. Это происходит потому, что при перетаскивании объекта GeometricSprite он может оказаться задвинутым за другой экранный объект (другой объект GeometricSprite), когда будет отпущена кнопка мыши. Экранный объект на переднем плане зарегистрирует событие отпускания кнопки мыши (mouse up) в отличие от экранного объекта, перетаскиваемого пользователем. Добавление прослушивателя к объекту DrawingCanvas гарантирует обработку события.

Метод onMouseUp() вызывает метод onMouseUp() объекта GeometricSprite, который в свою очередь вызывает метод stopDrag() объекта GeometricSprite.

Пользовательский интерфейс приложения включает кнопки 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); 
    } 
}

Этот метод использует метод setChildIndex() (унаследованный из класса DisplayObjectContainer) для размещения экранного объекта на позиции указателя 0 в списке дочерних объектов экземпляра DrawingCanvas ( this ).

Метод moveDown() действует похожим образом, за исключением того, что он уменьшает позицию указателя для экранного объекта на 1 в списке дочерних объектов экземпляра DrawingCanvas:

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

Методы moveUp() и moveToFront() аналогичны методам moveToBack() и moveDown() .