Пример экранного объекта: SpriteArranger

Flash Player 9 и более поздних версий, Adobe AIR 1.0 и более поздних версий

Образец приложения SpriteArranger создан на основе образца приложения Geometric Shapes, описание которого приводится в документе Изучение ActionScript 3.0 .

Образец приложения SpriteArranger иллюстрирует ряд понятий, используемых при операциях с экранными объектами:

  • Расширение классов экранного объекта

  • Добавление объектов в список отображения

  • Расположение экранных объектов по слоям и работа с контейнерами экранного объекта

  • Ответ на события экранного объекта

  • Использование свойств и методов экранных объектов

Получить файлы приложения для этого примера можно на странице www.adobe.com/go/learn_programmingAS3samples_flash_ru . Файлы приложения SpriteArranger находятся в папке Examples/SpriteArranger. Приложение состоит из следующих файлов.

File

Описание

SpriteArranger.mxml

или

SpriteArranger.fla

Основной файл приложения Flash (FLA) или Flex (MXML).

com/example/programmingas3/SpriteArranger/CircleSprite.as

Класс, определяющий тип объекта Sprite, который визуализирует на экране круг.

com/example/programmingas3/SpriteArranger/DrawingCanvas.as

Класс, определяющий холст, который является контейнером экранного объекта, содержащим объекты GeometricSprite.

com/example/programmingas3/SpriteArranger/SquareSprite.as

Класс, определяющий тип объекта Sprite, который визуализирует на экране квадрат.

com/example/programmingas3/SpriteArranger/TriangleSprite.as

Класс, определяющий тип объекта Sprite, который визуализирует на экране треугольник.

com/example/programmingas3/SpriteArranger/GeometricSprite.as

Класс, являющийся расширением объекта Sprite и используемый для определения фигуры на экране. Расширениями данного класса являются CircleSprite, SquareSprite и TriangleSprite.

com/example/programmingas3/geometricshapes/IGeometricShape.as

Базовый интерфейс, определяющий методы, которые необходимо реализовать во всех классах геометрических фигур.

com/example/programmingas3/geometricshapes/IPolygon.as

Интерфейс, определяющий методы, которые должны быть реализованы классами геометрических фигур с несколькими сторонами.

com/example/programmingas3/geometricshapes/RegularPolygon.as

Тип геометрической фигуры с равными сторонами, которые симметрично расположены относительно центра фигуры.

com/example/programmingas3/geometricshapes/Circle.as

Тип геометрической фигуры, определяющей круг.

com/example/programmingas3/geometricshapes/EquilateralTriangle.as

Подкласс класса RegularPolygon, определяющий равносторонний треугольник.

com/example/programmingas3/geometricshapes/Square.as

Подкласс класса RegularPolygon, определяющий равносторонний прямоугольник.

com/example/programmingas3/geometricshapes/GeometricShapeFactory.as

Класс, содержащий «фабричный метод» создания фигур заданного типа и размера.

Определение классов SpriteArranger

Приложение SpriteArranger дает пользователю возможность добавить ряд экранных объектов на экранный «холст».

Класс DrawingCanvas определяет область рисования и тип контейнера для экранного объекта, в который пользователь может добавить экранные фигуры. Эти экранные фигуры являются экземплярами одного из подклассов класса GeometricSprite.

Класс DrawingCanvas

В программе Flex все дочерние экранные объекты, добавленные в объект Container, должны принадлежать классу, который наследует классу mx.core.UIComponent. Это приложение добавляет экземпляр класса DrawingCanvas в качестве дочернего объекта объекта mx.containers.VBox (см. определение в коде MXML, указанном в файле SpriteArranger.mxml). Это наследование определено в объявлении класса DrawingCanvas следующим образом:

public class DrawingCanvas extends UIComponent

Класс UIComponent наследует классам DisplayObject, DisplayObjectContainer и Sprite, а код в классе DrawingCanvas использует свойства и методы этих классов.

Класс DrawingCanvas является расширением класса Sprite, и это наследование определено в объявлении класса DrawingCanvas следующим образом:

public class DrawingCanvas extends Sprite

Класс Sprite представляет собой подкласс классов DisplayObjectContainer и DisplayObject, а класс DrawingCanvas использует методы и свойства этих классов.

Метод конструктора DrawingCanvas() настраивает объект Rectangle ( bounds ), который является свойством, используемым позднее при отрисовке контура холста. После этого он вызывает метод initCanvas() следующим образом:

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

Как показано в следующем примере, метод initCanvas() определяет различные свойства объекта DrawingCanvas, которые были переданы в качестве аргументов функции конструктора:

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

Затем метод initCanvas() вызывает метод drawBounds() , который отрисовывает холст с помощью свойства graphics класса DrawingCanvas. Свойство graphics унаследовано из класса 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();

В зависимости от взаимодействия пользователя с приложением вызываются следующие дополнительные методы класса DrawingCanvas:

Класс GeometricSprite и его подклассы

Любой экранный объект, который может быть добавлен пользователем на холст, является экземпляром одного из следующих подклассов класса GeometricSprite:

  • CircleSprite

  • SquareSprite

  • TriangleSprite

Класс GeometricSprite является расширением класса flash.display.Sprite:

public class GeometricSprite extends Sprite

Класс GeometricSprite включает ряд свойств, являющихся общими для всех объектов GeometricSprite. Они задаются в функции конструктора на основе параметров, переданных этой функции. Например:

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

Свойство geometricShape класса GeometricSprite определяет интерфейс IGeometricShape, который в свою очередь определяет только математические, но не визуальные свойства фигуры. Классы, реализующие интерфейс IGeometricShape, определены в образце приложения GeometricShapes, описание которого приводится в документе Изучение ActionScript 3.0 .

Класс GeometricSprite определяет метод drawShape() , более подробные описания которого приведены в определениях переопределения для каждого подкласса GeometricSprite. Дополнительные сведения см. в разделе «Добавление на холст экранных объектов» ниже.

Класс GeometricSprite предоставляет также другие методы:

Добавление на холст экранных объектов

Когда пользователь нажимает кнопку «Добавить фигуру», приложение вызывает метод 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() .