Март 2011

Чтобы полностью отключить отображение контура, установите толщине значение undefined или вызовите метод lineStyle ( ) без параметров. Например:

canvas. graphics.1ineStyle(undefined); // Выключаем линии в объекте canvas canvas, graphi cs. lmeStyle( ); //To же самое

Чтобы переместить чертежное перо, не рисуя при этом вообще никаких линий, используйте метод move То ( ). Предположим, что мы хотим нарисовать в новом объекте Shape одну прямую линию из точки (100; 100) в точку (200; 200). Мы сначала перемещаем перо из точки (0; 0) в точку (100; 100), используя метод moveTo ( ), а затем рисуем линию из этой точки в точку (200; 200) с помощью метода 1 ineTo ( ), как показано в следующем коде:

var canvas:Shape = new Shape( ); // Создаем объект Shape для рисования canvas. graphics. lineStyled)-; // Устанавливаем контур черного цвета

// толщиной 1 пиксел

canvas. graphics. moveTodOO, 100); // Перемещаем перо, не рисуя линию canvas. graphics. lineTo(200, 200); // Рисуем линию (в результате этого

// действия происходит перемещение пера)

Рисование кривых

Для рисования кривых используется метод curve То ( ), который имеет следующую сигнатуру:

curveTo(controlX:Number, controlY:Number, anchorX:Number, anchorY:Number)

Метод curveTo ( ) рисует кривую Безье второго порядка из текущей позиции чертежного пера в точку (anchorX; anchorY), используя управляющую точку (controlX; controlY), которая находится за пределами кривой. В каждой конечной точке кривая касается линии, проходящей через данную конечную точку и управляющую точку. Кривая Безье содержится в выпуклой оболочке, построенной по ее трем управляющим точкам.

Говоря по существу, прямая линия, проходящая из позиции пера в конечную точку (anchorX; anchorY), натягивается управляющей точкой (controlX; controlY), формируя кривую. Если любой из аргументов метода curveTo ( ) будет опущен, операция завершится без сообщения об ошибке и позиция чертежного пера останется неизменной. Как и в случае с методом 1 ineTo ( ), характеристики контура кривой (толщина, цвет, прозрачность и т. д.) определяются самым, последним вызовом функции lineStyle ( ).

Следующий код рисует кривую черного цвета толщиной в 4 пиксела из позиции по умолчанию (0; 0) чертежного пера в якорную точку (100; 0), используя управляющую точку (50; 100). Кривая, получающаяся в результате выполнения этого кода, изображена на рис. 25.3.

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

canvas. graphics. lineStyle(4); // Устанавливаем контур толщиной 4 пиксела

// черного цвета canvas. graphics. curveTo(50, 100, 100. 0); // Рисуем кривую

(0;0) (100; 0)

Позиция пера Якорная точка

(50; 100) Управляющая точка

Рис. 25.3. Кривая Безье второго порядка

После того как кривая будет нарисована, чертежное перо останется в ее конечной точке. Таким образом, многократно вызывая функцию curveTo ( ) и/или 1 ineTo ( ), можно нарисовать сложные кривые или замкнутые фигуры, например окружности или многоугольники, — эта методика будет рассмотрена в следующем разделе.

Г* 4

Кривые, нарисованные на дробных пикселах, зачастую выглядят размытыми. Для увеличения резкости размытых, сглаженных линий присвойте параметру pixelHinting метода JJsV lineStyle() значение true.

Иногда бывает более удобно указать три точки на кривой, нежели две якорные точки и управляющую точку. Следующий код определяет пользовательский метод curveThrough3Pts ( ), который принимает координаты трех точек в качестве аргументов и рисует кривую второго порядка, проходящую через эти точки. Предполагается, что вторая точка находится посередине кривой (t = .5):

// Адаптированный метод drawCurve3Pts( ) Роберта Пеннера (Robert Penner) public function curveThrough3Pts (g:Graphics, startX:Number, startY:Number,

throughX:Number, throughY:Number, endX:Number, endY:Number) { var controlX:Number = (2 * throughX) — .5 * (startX + endX); var controlY:Number = (2 * throughY) — .5 * (startY + endY); g. moveTo(startX, startY); g. curveTo(controlX, controlY, endX, endY);

// Использование

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

canvas. graphics.1ineStyle(2. OxOOOOFF);

curveThrough3Pts(canvas. graphics, 100, 100, 150, 50, 200, 100);

Дополнительную информацию по теории кривых в языке ActionScript можно найти в статье «TechNotes» Джима Армстронга (Jim Armstrong) по адресу http:// www. algorithmist. net/technotes. html.

Рисование фигур

Чтобы нарисовать фигуру произвольной формы (то есть закрасить некоторым цветом геометрическую область, образованную тремя или более точками), выполняйте такую последовательность действий.

1. Выберите начальную точку фигуры (либо точку по умолчанию (0,0), либо точку, указанную методом moveTo ( ) ).

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 показан результат данного изменения. Обратите особое внимание на новую форму углов треугольника.

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

Следующий код каждые 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 ( ).

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

Графическое содержимое, создаваемое с помощью внутренних методов рисования фигур (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.

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 {

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

Graphics. clear( );

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

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

graphics. lineStyledineThickness, lineColor, lineAlpha,

linePixelHinting, lineScaleMode, null,

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

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

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

}

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

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

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( ).