Руководство по actionscript. часть 5, стр. 008

2. Начните рисование с вызова метода beginBitmapFill ( ), beginFill ( ) или beginGradientFill ( ).

3. Нарисуйте контур фигуры, последовательно вызывая функцию 1 ineTo ( ) и/или curveTo ( ). Конечная точка последнего сегмента контура должна совпадать с начальной точкой, указанной на шаге 1.

4. Завершите рисование фигуры вызовом метода endFill ( ).

Метод beginFill ( ) позволяет заполнить фигуру сплошным цветом; метод beginGradientFill ( ) —градиентом (переходом между двумя или более цветами); втовремякакметодЬед1пВ1ЪтарГШ ( ) использует для заполнения фигуры указанное растровое изображение (при желании его можно разместить в виде мозаики).

Например, следующий код рисует треугольник красного цвета с контуром толщиной 5 пикселов черного цвета. Обратите внимание, что начальная точка контура (0; 0), устанавливаемая по умолчанию, совпадает с конечной точкой контура:

var triangle:Shape = new ShapeC );

triangle. graphics. beginFi11(OxFFOOOO, 1);

triangle. graphics. lineStyle(20);

triangle. graphics. lineTo(125, 125): // Рисует линию вниз и вправо triangle. graphics. lineTo(250, 0); // Рисует линию вверх и вправо triangle. graphics. lineTo(0, 0); // Рисует линию влево triangle. graphics. endFilK ); addChild(triangle):

На рис. 25.4 показаны результаты выполнения предыдущего кода.

Обратите внимание, что углы треугольника на рис. 25.4 закруглены. Стиль отображения углов задается параметром joints метода lineStyle ( ). Например, следующий код изменяет стиль отображения углов, чтобы они выглядели «скошенными», — для этого в качестве параметра joints передается константа JointStyle. MITER:

triangle. graphics. lineStyle(20, 0, 1, false, LineScaleMode. NORMAL,

CapsStyle. ROUND, JointStyle. MITER);

На рис. 25.5 показан результат данного изменения. Обратите особое внимание на новую форму углов треугольника.

Руководство по actionscript. часть 5, стр. 009

Для рисования различных видов прямоугольников и эллипсов класс Graphics предоставляет следующие удобные методы: drawCircle ( ), drawEllipse ( ), drawRect ( ), drawRoundRect ( ) и drawRoundRectComplex ( ). Методы round rect рисуют прямоугольники с закругленными углами. Все методы, упрощающие рисование фигур, используются совместно с уже знакомыми вам методами lineStyle ( ) и beginFill ( ). Тем не менее вызывать метод endFill ( )

Рис. 25.4. Треугольник

Рис. 25.5. Треугольник со скошенными соединениями

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

Следующий код демонстрирует общий подход к использованию методов для рисования фигур. В нем применяется мет;од drawRect ( ) для рисования прямоугольника синего цвета с контуром толщиной 1 пиксел черного цвета:

var canvas:Shape = new Shape( ): addChi1d(canvas);

// Устанавливаем толщину, равную одному пикселу

canvas. graphi cs.1i neStyle(1):

// Устанавливаем синий цвет заливки

canvas. graphics. beginFi11(OxOOOOFF);

// Рисуем фигуру

canvas. graphics. drawRect(0, 0, 150, 75):

//Обратите внимание на отсутствие вызова метода endFilK )

Удаление векторного содержимого

Для удаления всего векторного содержимого из объекта применяется метод экземпляра clear ( ) класса Graphics. Например:

var canvas:Shape = new Shape( ): // Рисуем линию

canvas. graphics. lineStyle(3, OxOOOOFF): // Применяем контур синего цвета canvas. graphics. lineTo(25, 35): addChild(canvas):

// Удаляем линию canvas. graphics. clear( ):

Когда происходит вызов метода clear ( ), стиль линий объекта возвращается к значению undefined (без контура). После вызова метода clear ( ) метод lineStyle ( ) должен быть вызван снова, иначе у линий и фигур будет отсутствовать контур. Вызов метода с 1 е а г ( ) также сбрасывает позицию чертежного пера в точку (0; 0). Стоит отметить, что этот метод влияет на векторное содержимое только одного объекта. Если данный объект является экземпляром класса Sprite или MovieClip, то метод clear ( ) не удалит ни векторное содержимое в его дочерних объектах, ни сами дочерние объекты.

Руководство по actionscript. часть 5, стр. 010

Следующий код каждые 250 мс рисует линию со случайными координатами и случайным стилем контура. Для удаления предыдущей нарисованной линии в нем используется метод с 1 е а г ( ).

package { import flash. display.*: import flash. utils.*: import flash. events.*:

public class RandomLines extends Sprite { private var s:Shape:

public function RandomLines ( ) { s = new Shape( ); addChild(s);

var t:Timer = new Timer(250);

t. addEventListener(TimerEvent. TIMER, timerListener); t. start( ):

}

private function timerListener (e:TimerEvent):void { s. graphics. clear( );

s. graphics. lineStyle(random(l, 10), random(0, OxFFFFFF)); s. graphics. moveTo(random(0. 550). random(0, 400)); s. graphics. lineTo(random(0, 550), random(0, 400));

}

// Возвращает число в диапазоне от minVal до maxVal включительно public function random (minVal:int, maxVal:int):int { return minVal + Math. floor(Math. random( ) * (maxVal + 1 — minVal));

}

}

}

Упражнение: для сравнения попробуйте удалить вызов метода clear ( ) в первой строке метода timerListener ( ).

Руководство по actionscript. часть 5, стр. 011

Пример: библиотека объектно-ориентированных фигур

Графическое содержимое, создаваемое с помощью внутренних методов рисования фигур (drawEllipse ( ), drawRect ( ) и т. д.), не связано ни с каким объектом. После того как оно будет нарисовано, его невозможно изменить или удалить независимо от другого содержимого. В ActionScript отсутствуют классы, предоставляющие объектно-ориентированный доступ к соответствующим фигурам на экране. В этом разделе продемонстрирован один из способов устранения данного недостатка — пример реализации небольшой библиотеки классов для создания и управления фигурами как объектами.

В нашей библиотеке фигур представлены следующие классы: Basics паре, Rectange, Ellipse, Star и Polygon. Класс BasicShape — это базовый класс библиотеки. Он расширяет внутренний класс Shape, который предоставляет базовую поверхность с минимальным потреблением ресурсов для рисования фигур. Класс BasicShape управляет стилями контура и заливки для всех фигур и определяет, когда фигура должна быть перерисована. Экземпляры остальных классов представляют геометрические фигуры, которые могут добавляться в список отображения или удаляться из него. Класс каждой фигуры реализует свою собственную процедуру рисования, учитывающую особенности построения

данной фигуры. После создания объекта фигуры ее штриховка, заливка и контур могут быть легко изменены.

В следующих шести примерах применяются на практике многие методики, которые были рассмотрены в этой книге, — особенно те, которые были рассмотрены в этой главе. Обращайте пристальное внимание на многочисленные комментарии; они помогут вам понять код.

В листинге 25.1 представлен класс BasicShape — класс абстрактного типа, который определяет базовую функциональность для всех фигур в нашей библиотеке классов. Его основные возможности реализуются с помощью следующих методов:

? setStrokeStyle ( ) и setFillStyle ( ) — сохраняют визуальные характеристики фигуры;

? draw ( ) — отображает фигуру, но делегирует конкретное рисование линий методу drawShape ( ) (абстрактному методу, реализуемому всеми подклассами);

? setChanged( ), clearChanged ( ) и hasChanged*( ) — позволяют отслеживать, изменились ли параметры фигуры с момента ее последнего отображения на экране;

? requestDraw( ), addedListener ( ), removedListener ( ), а также renderListener ( ) — в сочетании эти методы определяют момент, когда необходимо перерисовать фигуру.

Листинг 25.1. Класс BasicShape

package org. moock. drawing { import flash. display.*; import flash. events.*; import f 1 ash. errors.111egalOperationError;

// Базовый класс для отображаемых геометрических фигур public class BasicShape extends Shape { // Стиль заливки

protected var fill Col or.-Number = OxFFFFFF; protected var fill Alpha.-Number = 1;

// Стиль линий. Используются скошенные соединения вместо закругленных // (настройка по умолчанию в языке ActionScript). Все остальные // первоначальные настройки совпадают с настройками по умолчанию языка // ActionScript.

Руководство по actionscript. часть 5, стр. 012

Protected var lineThickness:Number = 1;

protected var lineColor:uint = 0;

protected var lineAlpha:Number = 1;

protected var linePixelHinting:Boolean = false;

protected var lineScaleMode:String = LineScaleMode. NORMAL;

protected var lineJoints:String = JointStyle. MITER;

protected var lineMiterLimit:Number = 3;

// Флажок, указывающий на необходимость перерисовки объекта.

// Предотвращает перерисовку данного объекта в тех случаях, когда

// событие RENDER было запрошено другим объектом, protected var changed:Boolean = false:

// Конструктор

public function BasicShape ( ) { // Регистрируем приемники для получения уведомлений, когда данный // объект добавляется в список отображения или удаляется из него // (требуется пользовательский вспомогательный класс StageDetector) var StageDetector:StageDetector = new StageDetector(this): StageDetector. addEventLi stener(StageDetector. ADDED_TO_STAGE,

addedToStageListener); StageDetector. addEventLi stener(StageDetector. REMOVED_FROM_STAGE,

removedFromStageListener);

}

// Устанавливает визуальные характеристики линии, // отображаемой вокруг фигуры

public function setStrokeStyle (thickness:Number = 1,

color:uint = 0, alpha:Number = 1, pixel Hinting.-Boolean = false, scaleMode:String = «normal», joints:String = «miter», miterLimit:Number = 10):void {

lineThickness = thickness;,

lineColor = color;

lineAlpha = alpha;

linePixelHinting = pixel Hinting;

lineScaleMode = scaleMode;

lineJoints = joints;

lineMiterLimit = miterLimit;

// Стиль линий изменился, поэтому просим уведомить нас о следующем // обновлении экрана. В тот момент перерисовываем фигуру. setChangedC );

}

// Устанавливает визуальные характеристики public function setFillStyle (colonuint =

alpha:Number

fill Col or = color; fill Alpha = alpha;

// Стиль заливки изменился, поэтому просим уведомить нас о следующем // обновлении экрана. В тот момент перерисовываем фигуру. setChangedC );

}

// Создает графику фигуры, делегируя специфические операции рисования // линий конкретным подклассам класса BasicShape. Для повышения // производительности метод draw( ) вызывается только в тот момент,

заливки фигуры OxFFFFFF, = 1):void {

// когда объект stage рассылает событие Event. RENDER. private function draw ( ):void {

// Удаляет всю графику из данного объекта.

Руководство по actionscript. часть 5, стр. 013

Graphics. clear( );

// Стиль концов линий не имеет значения для замкнутой фигуры, поэтому

// передаем значение null для этого аргумента.

graphics. lineStyledineThickness, lineColor, lineAlpha,

linePixelHinting, lineScaleMode, null,

lineJoints, lineMiterLimit); graphics. beginFi11(fillColor, fill Alpha);

drawShape( ); // Вызываем процедуру рисования, реализуемую подклассом graphics. endFilК );

// Делаем пометку, что на экране отображены самые последние изменения. clearChanged( );

}

// Рисует фактические линии для фигуры каждого типа. Должен быть

// реализован всеми подклассами класса BasicShape.

Руководство по actionscript. часть 5, стр. 014

Protected function drawShape ( ):void { // Предотвращает непосредственный вызов данного метода абстрактного типа throw new II1egalOperationErrorC»The drawShape( ) method can be » + «invoked on BasicShape subclasses only.»)

}

// Помечает, что в фигуре изменился какой-то параметр. Если на настоящий // момент фигура отображается на сцене, заставляет ее перерисоваться // на этапе следующей визуализации экрана protected function setChanged ( ):void {

changed = true;

requestDraw( );

}

// Помечает, что самые последние изменения были отображены на экране protected function clearChanged ( ):void { changed = false;

}

// Сообщает о том, были ли изменены какие-либо параметры фигуры, которые // еще не были визуализированы protected function hasChanged ( ):Boolean { return changed;

}

// Если данная фигура отображается на экране, метод requestDraw( ) // заставляет ее перерисоваться на этапе следующего обновления экрана protected function requestDraw ( ):void { if (stage!= null) { stage. invalidate( ):

// Приемник события, вызываемый при добавлении этой фигуры // в список отображения

private function addedToStageListener (e:Event):void { // Регистрируем приемник для получения уведомлений // об обновлениях экрана

stage. addEventLi stener(Event. RENDER. renderLi stener):

// Если объект изменился за то время, пока он отсутствовал в списке // отображения, отображаем эти изменения на этапе следующей // визуализации экрана. Однако если объект не изменился с момента. // когда он находился в списке отображения последний раз. // нет необходимости перерисовывать его. if (hasChanged( )) { requestDraw( );

}

}

// Приемник события, вызываемый при удалении данной фигуры // из списка отображения

private function removedFromStageListener (e:Event):void { // Нет необходимости получать уведомления о возникновении событий // Event. RENDER, когда объект не находится в списке отображения stage. removeEventLi stener(Event. RENDER. renderLi stener);

}

// Приемник события, вызываемый перед обновлением экрана, если был

// вызван метод stage. irivalidate( ).

Руководство по actionscript. часть 5, стр. 015

Private function renderListener (e:Event):void {

// Вызываем метод draw( ). если изменения, внесенные в данную фигуру.

// не были отображены на экране.

// Если событие для визуализации было запрошено другим объектом. // но данный объект не изменялся, он не будет перерисован, if (hasChanged( )) { draw( );

}

}

}

}

В листинге 25.2 представлен класс Ellipse — подкласс класса BasicShape. Обратите внимание, что специфический код, предназначенный для рисования эллипса, содержится в методе drawShape ( ). Более того, изменение размеров объекта Ellipse не приводит к немедленной перерисовке эллипса. Вместо этого, когда вызывается метод set Si ze ( ), объект вызывает метод setChanged ( ), сообщая о том, что данный объект должен быть перерисован на этапе следующей визуализации экрана, осуществляемой средой выполнения Flash.

Листинг 25.2. Класс Ellipse

package org. moock. drawing { // Представляет эллипс, который может быть нарисован на экране public class Ellipse extends BasicShape { // Ширина и высота эллипса

protected var w:Number; protected var h:Number;

// Конструктор

public function Ellipse (width:Number = 100. height:Number = 100) { super( );

setSize(width. height);

}

// Процедура рисования эллипса override protected function drawShape ( ):void { graphics. drawEllipse(0, 0. w. h);

}

// Устанавливает ширину и высоту эллипса

public function setSize (newWidth:Number. newHeight:Number):void { w = newWidth; h = newHeight;

// Поскольку установка ширины и высоты эллипса вызывает изменение его // формы, он должен быть перерисован на этапе следующей визуализации // экрана. setChangedC );

}

}

}

В листинге 25.3 представлен класс Pol ygon — еще один подкласс класса Bas i cShape. С помощью класса Polygon можно нарисовать любую многогранную фигуру. Он выступает в роли суперкласса для определенных типов многоугольников, например Rectangle и Star. Как и Ellipse, класс Polygon предоставляет свою собственную специфическую процедуру рисования в методе drawShape ( ). Всякий раз, когда задаются точки объекта Polygon (через метод setPoints ( ) ), вызывается метод setChanged ( ), сообщающий о том, что данный объект должен быть перерисован на этапе следующей визуализации экрана, осуществляемой средой выполнения Flash.

Руководство по actionscript. часть 5, стр. 016

Листинг 25.3. Класс Polygon

package org. moock. drawing { // Представляет многоугольник, который может быть нарисован на экране public class Polygon extends BasicShape { // Точки многоугольника.

// Чтобы сократить потребление памяти, точки хранятся в виде двух

// массивов целочисленных значений, а не в виде одного массива объектов

// f1 ash. geom. Point.

private var xpoints:Array;

private var ypoints:Array;

// Конструктор

public function Polygon (xpoints:Array = null. ypoints:Array = null) { super( );

setPointsCxpoints, ypoints);

}

// Процедура рисования многоугольника

override protected function drawShape ( ):void {

// Рисуем линии в каждую точку многоугольника

graphics. moveTo(xpoints[0]. ypoints[0]);

for (var i:int = 1; i < xpoints.length; i++) { graphics.lineto(xpoints[i]. ypoints[i]);

}

// Замыкаем фигуру, возвращаясь в первую точку graphics. lineTo(xpoints[0]. ypoints[0]);

}

// Присваивает точки многоугольника

public function setPoints (newXPoints:Array. newYPoints:Array):void { if (newXPoints == null || newYPoints == null) { return;

}

if (newXPoints. length!= newYPoints. length) { throw new Error(«setPoints( ) requires a matching » + «number of x and у points»);

}

xpoints = newXPoints; ypoints = newYPoints;

// Поскольку присваивание новых точек многоугольника вызывает // изменение его формы, он должен быть перерисован на этапе // следующей визуализации экрана. setChanged( );

}

}

}

В листинге 25.4 представлен класс Rectangle — подкласс класса Polygon. По структуре он похож на класс Ellipse, однако использует процедуру рисования из метода экземпляра drawShape ( ) класса Polygon, а не реализует собственную.

Руководство по actionscript. часть 5, стр. 017

Листинг 25.4. Класс Rectangle

package org. moock. drawing { // Представляет прямоугольник, который может быть нарисован на экране public class Rectangle extends Polygon {

// Ширина и высота прямоугольника

protected var w:Number;

protected var h:Number;

// Конструктор

public function Rectangle (width:Number = 100. height:Number = 100) { super( );

setSize(width, height);

}

// Устанавливает ширину и высоту многоугольника

public function setSize (newWidth: Number, newHeight «.Number): void {

w = newWidth:

h = newHeight:

// Переводим ширину и высоту в точки многоугольника setPoints([0.w. w.0].[0.0.h, h]);

}

}

}

В листинге 25.5 представлен последний класс из библиотеки: Star, еще один подкласс класса Polygon. Как и Rectangle, класс Star использует метод экземпляра drawShape ( ) класса Polygon для отображения своего контура. Визуальные характеристики каждого объекта Star задаются через метод setStar( ).



Полезные ссылки
Случайные записи
  • 04.03.2011">Руководство по actionscript. часть 5, стр. 046
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 110
  • 20.07.2010">Распространенные недочеты веб-дизайнеров
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 039
  • 19.03.2011">Руководство по actionscript. часть 2, стр. 095
  • 03.10.2010">Как сделать матовую кожу?
  • 27.02.2011">Руководство по actionscript. часть 6, стр. 043
  • 09.03.2011">Руководство по actionscript. часть 4, стр. 058
  • 01.03.2011">Руководство по actionscript. часть 5, стр. 113
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.54
  • 25.03.2010">Великолепная инфографика на 5+
  • 04.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.21
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.99
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 022
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 114
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...