Пример экранного объекта: SpriteArrangerFlash Player 9 и более поздних версий, Adobe AIR 1.0 и более поздних версий Образец приложения SpriteArranger создан на основе образца приложения Geometric Shapes, описание которого приводится в документе Изучение ActionScript 3.0. Образец приложения SpriteArranger иллюстрирует ряд понятий, используемых при операциях с экранными объектами:
Получить файлы приложения для этого примера можно на странице www.adobe.com/go/learn_programmingAS3samples_flash_ru. Файлы приложения SpriteArranger находятся в папке Examples/SpriteArranger. Приложение состоит из следующих файлов.
Определение классов 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:
Класс 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(). |
|