Архив рубрики «часть 5»

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

ГЛАВА 25

Рисование с помощью векторов

В языке ActionScript элементарные векторы, линии и фигуры рисуются с помощью класса Graphics. Тем не менее экземпляры класса Graphics никогда не создаются напрямую; вместо этого каждый класс языка ActionScript, поддерживающий программное векторное рисование, создает экземпляр класса Graphics автоматически и предоставляет к нему доступ через переменную экземпляра graphics. К отображаемым классам, поддерживающим векторное рисование, относятся классы Sprite, MovieClip и Shape.

Объекты Shape потребляют меньше памяти, чем объекты Sprite и MovieClip. Таким образом, чтобы уменьшить потребление памяти, векторное содержимое лучше рисовать в объектах Shape, когда нет необходимости в контейнерных и интерактивных возможностях классов Sprite и MovieClip.

_4

Обзор класса Graphics

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

Таблица 25.1. Обзор класса Graphics

Назначение Метод класса Graphics

Рисование линий curveTo(), lineTo()

Рисование фигур beginBitmapFill(), beginFill(), beginGradientFill(), drawCircle(), drawEllipse(), drawRect(), drawRoundRect(), drawRoundRectComplex(), endFill()

Определение стилей линий lineGradientStyle(), lineStyle()

Перемещение чертежного пера moveTo()

Удаление графики clear()

По существу, в языке ActionScript линии и кривые рисуются гипотетическим «чертежным пером». Для всех новых объектов Sprite, MovieClip и Shape перо первоначально устанавливается в положение (0; 0). По мере рисования линий и кривых (с помощью методов 1 ineTo ( ) и curve То ( ) ) перо перемещается по координатному пространству объекта, останавливаясь в конечной точке последней нарисованной линии или кривой. Текущая позиция пера всегда обозначает начальную точку следующей рисуемой линии или кривой. Чтобы установить начальную точку линии или кривой в произвольную позицию, мы используем метод move То ( ), который

«поднимает» чертежное перо и перемещает его в новую позицию, не рисуя линию к указанной точке.

Продолжение:

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,

41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,

77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,

109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,

135,136,137,138,139,140

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

Рисование линий

Для рисования прямых линий используется метод lineTo ( ), который рисует линию из текущей позиции чертежного пера в указанную точку (х; у). Например, следующий код создает новый объект Shape и рисует линию из точки (0; 0) в точку (25, 35):

var canvas:Shape = new Shape( ); canvas. graphics. lineTo(25, 35): addChild(canvas);

Однако если вы попытаетесь выполнить этот код таким, как есть, то можете быть удивлены, обнаружив, что на экране не появилось никакой линии! По умолчанию все рисуемые линии и фигуры не имеют контура. Чтобы отобразить контур, мы должны использовать метод lineStyle( ), устанавливающий визуальные характеристики (толщина, цвет и т. д.) для всех линий и фигур, которые будут нарисованы в дальнейшем. Для справки ниже представлена сигнатура метода lineStyle ( ), которая демонстрирует доступные визуальные параметры и их значения по умолчанию. Подробную информацию по каждому параметру можно найти в справочнике по языку ActionScript корпорации Adobe.

1ineStyle(thickness:Number =1.0, color:uint = 0, alpha:Number =1.0, pixelHinting:Boolean = false, scaleMode:String = «normal», caps:String = null, joints:String = null, miterLimit:Number = 3)

Метод lineStyle ( ) должен вызываться явно для каждого нового объекта Sprite, MovieClip и Shape, иначе никакой контур отображен не будет (хотя заполняемые области могут рисоваться без контура).

Рассмотрим несколько примеров, демонстрирующих различные способы изменения стиля линий объекта canvas. Следующий код удаляет стиль линий (нарисованные в дальнейшем линии, кривые и заливки не будут иметь контура):

canvas. graphics. lineStyleC )

Следующий код устанавливает для стиля линий толщину 1 пиксел и сплошной черный цвет:

canvas. graphi cs.1i neStyle(1)

Представленный далее код устанавливает для стиля линий толщину 1 пиксел и сплошной зеленый цвет:

canvas. graphics. 1 ineStyled, OxOOFFOO)

Следующий код устанавливает для стиля линий толщину 2 пиксела и зеленый цвет с прозрачностью 50 %:

canvas. graphics. lineStyled, OxOOFFOO. 50)

Теперь нарисуем линию из точки (0; 0) в точку (25; 35), как раньше, но на этот раз применим контур синего цвета толщиной 3 пиксела, заставив эту линию появиться на экране:

var canvas:Shape = new Shape( ):

canvas. graphics.!ineStyle(3, OxOOOOFF); // Применяем контур синего цвета

canvas. graphics. lineTo(25, 35): addChild(canvas):

Стоит отметить, что если бы предыдущая линия была нарисована в объекте Sprite или MovieClip, содержащем дочерние отображаемые объекты, она бы отображалась позади этих объектов.

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

Дочерние отображаемые объекты всегда выводятся перед своим родителем и, следовательно, всегда заслоняют векторное содержимое, нарисованное с помощью языка ActionScript в этом родительском объекте.

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

// Создаем объект Sprite и помещаем его на экран var container:Sprite = new Sprite( ): addChild(container);

// Создаем объект TextField

var msg:TextField = new TextField( );

msg. text = «Hello»:

msg. border = true;

msg. background = true;

msg. autoSize = TextFieldAutoSize. LEFT;

contai ner. addChi1d(msg);

// Рисуем линию

contai ner. graphi cs.1ineStyle(3, OxOOOOFF); container. graphics. lineTo(25, 35);

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

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

Hello

Рис. 25.1. Векторное содержимое позади объекта TextField

^ I Содержимое, нарисованное с помощью объекта graphics в объекте Sprite или MovieClip, Л щ всегда отображается позади любых дочерних объектов данного объекта Sprite или tfft* MovieClip (то есть заслоняется).

При рисовании нескольких линий стиль контура можно установить для каждой в отдельности, вызывая метод lineStyle ( ) перед рисованием каждой линии. Например, следующий код рисует квадрат с помощью постепенно утолщаемых линий, окрашенных в черный, красный, зеленый и синий цвет:

var canvas:Shape = new Shape( ); canvas. graphics. lineStyled, 0×000000); canvas. graphics. lineTodOO, 0); canvas. graphics. lineStyle(5, OxFFOOOO); canvas. graphics. lineTodOO, 100); canvas. graphics. 1 ineStyledO. OxOOFFOO); canvas. graphics. lineTo(0, 100); canvas. graphics. lineStyle(15, OxOOOOFF); canvas. graphics. lineTo(0, 0); addChild(canvas);

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

П

Рис. 25.2. Линии с изменяющейся толщиной

Обратите внимание, что на рис. 25.2 конечные точки линий (называемые концами линии) по умолчанию закруглены. Чтобы вместо закругленных концов линий выбрать квадратные, используйте параметр caps метода lineStyle ( ). Например, следующий код создает линию зеленого цвета толщиной 10 пикселов с квадратными концами:

canvas. graphics. lineStyledO, OxOOFFOO, 1, false,

Li neScaleMode. NORMAL. CapsSty1e. SQUARE);

При нулевой толщине контур превращается в визирную линию (ее толщина составляет 1 пиксел и не изменяется даже при увеличении масштаба объекта или области отображения среды выполнения Flash). Другие варианты масштабирования линий можно установить параметром scaleMode метода lineStyle ( ).

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

Чтобы полностью отключить отображение контура, установите толщине значение 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), которая находится за пределами кривой. В каждой конечной точке кривая касается линии, проходящей через данную конечную точку и управляющую точку. Кривая Безье содержится в выпуклой оболочке, построенной по ее трем управляющим точкам.

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

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

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

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

Руководство по 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 ( ).



Полезные ссылки
Случайные записи
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 075
  • 17.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.8
  • 25.05.2012">Facebook тестирует обновленный интерфейс Timeline
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 110
  • 05.08.2011">Вентиляция помещения необходима для здоровья и продуктивности работников
  • 04.10.2010">Создание анимации в Photoshop
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 009
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.72
  • 28.02.2010">Где найти и скачать иконки?
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.38
  • 09.06.2011">Витамин С подавляет иммунитет
  • 05.03.2011">Руководство по actionscript. часть 5, стр. 021
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 016
  • 11.08.2011">Пропуск на модный олимп
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.117
Опрос

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

View Results

Loading ... Loading ...