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

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

Листинг 24.10. Вычисление позиции с учетом скорости

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

// Перемещает объект на указанное количество пикселов в секунду, // независимо от скорости кадров public class Animation-extends Sprite { private var distancePerSecond:int = 50; // Количество пикселов,

public function Animation ( ) { // Создаем объект для анимации circle = new Shape( ); circle. graphics. beginFi11(OxOOOOFF, 1); circle. graphics. lineStyle(l): circle. graphics. drawEl1ipse(0, 0, 25, 25); addChild(circle);

// Инициализируем значения времени then = getTimer( ); now = then;

// Регистрируем приемник для получения уведомлений о проверках

//• запланированных обновлений экрана

addEventLi stener(Event. ENTER_FRAME, enterFrameLi stener);

}

// Обрабатываем события Event. ENTER_FRAME

private function enterFrameListener (e:Event):void {

// Вычисляем, сколько времени прошло с момента последнего перемещения

then = now;

now = getTimer( ):

var elapsed:int = now — then;

var numSeconds;Number = elapsed / 1000;

// Определяем количество пикселов, на которое должен переместиться // объект, учитывая промежуток времени, прошедший с момента // последнего перемещения

var moveAmount:Number = distancePerSecond * numSeconds;

// Перемещаем объект. В данном случае объект перемещается // под углом 0 градусов.

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

Private var circleiShape;

private var now:int; private var then:int;

// на которое должен

// перемещаться объект

// за одну секунду

// Текущее время

// Время последнего обновления

// экрана

// Анимируемый объект

circle. x += moveAmount;

}

}

}

Класс Animator, представленный ранее в листинге 24.7, использует скорость аналогичным образом, чтобы гарантировать, что анимируемый объект пройдет заданное расстояние за указанный промежуток времени.

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

Переходим к контурам и заливкам

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

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



Полезные ссылки
Случайные записи
  • 12.03.2011">Руководство по actionscript. часть 3, стр. 117
  • 01.02.2013">Частные уроки вождения
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.75
  • 19.03.2011">Руководство по actionscript. часть 2, стр. 090
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.5
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 081
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.108
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 085
  • 05.08.2014">Альпийская горка – важный элемент ландшафтного дизайна
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.17
  • 26.02.2011">Руководство по actionscript. часть 6, стр. 073
  • 23.02.2011">Руководство по actionscript. часть 7, стр. 040
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.94
  • 05.03.2011">Руководство по actionscript. часть 5, стр. 008
  • 13.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.94
Опрос

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

View Results

Loading ... Loading ...