Создание линий и кривых

Для рисования с помощью свойства graphics экземпляра Shape, Sprite или MovieClip прежде всего необходимо определить применяемый стиль (цвет и размер линий, цвет заливки). При рисовании с помощью ActionScript можно использовать или не использовать штрих или заливку, аналогично тому, как это происходит в Adobe® Flash® Professional и других приложениях, предназначенных для рисования. Внешний вид обводки определяется с помощью метода lineStyle() или lineGradientStyle() . Для создания сплошной линии используется метод lineStyle() . При вызове этого метода пользователи наиболее часто изменяют первые три параметра: толщину, цвет и альфа-канал линии. Например, данная строка кода указывает фигуре с именем myShape на необходимость создания линии толщиной 2 пиксела, красного цвета (0x990000), со степенью непрозрачности 75%:

myShape.graphics.lineStyle(2, 0x990000, .75);

По умолчанию значение альфа-канала равно 1,0 (100%), поэтому при необходимости создания полностью непрозрачной линии данный параметр может быть проигнорирован. Метод lineStyle() также может иметь два дополнительных параметра для хинтинга пикселов и режима масштабирования; дополнительные сведения об использовании этих параметров см. в описании метода Graphics.lineStyle() в cправочнике ActionScript® 3.0 для платформы Adobe® Flash® Platform .

Для создания линии градиента используется метод lineGradientStyle() . Описание этого метода см. в разделе Создание линий градиента и заливок .

При необходимости создания фигуры с заливкой перед началом рисования вызовите методы beginFill() , beginGradientFill() , beginBitmapFill() или beginShaderFill() . Основной из этих методов, метод beginFill() , имеет два параметра: цвет заливки и (необязательно) значение альфа-канала для цвета заливки. Например, для создания фигуры со сплошной заливкой зеленого цвета необходимо использовать следующий код (предположим, что создается объект с именем myShape ):

myShape.graphics.beginFill(0x00FF00);

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

По окончании выбора стиля линий и свойств заливок необходимо указать начальную точку рисунка. Экземпляр Graphics имеет точку рисунка, похожую на точку, которая остается от прикосновения пера к бумаге. Следующее действие рисования начинается с той позиции, где находится точка рисунка. Изначально объект Graphics начинается с точки рисунка, находящейся в точке 0, 0 пространства координат объекта, в котором выполняется рисование. Для начала рисования в другой точке перед вызовом одного из методов рисования можно вызвать метод moveTo() . Это действие аналогично отрыву пера от бумаги и перемещению его на новую позицию.

Используя точку рисунка можно рисовать с помощью серий вызовов методов рисования: lineTo() (для рисования прямых линий) и curveTo() (для рисования кривых линий).

При рисовании, если указан цвет заливки, можно замкнуть заливку, вызвав метод endFill() . Если замкнутая фигура не создана (другими словами, если при вызове метода endFill() точка рисунка находится не в начальной точке фигуры), то при вызове метода endFill() среда выполнения Flash автоматически замыкает фигуру путем проведения прямой линии из текущей точки рисунка в точку, указанную во время последнего вызова метода moveTo() . Если процесс заливки запущен, а метод endFill() не вызван, вызов метода beginFill() (или одного из других методов заливки) завершит текущую заливку и начнет новую.

При вызове метода lineTo() объект Graphics рисует прямую линию из текущей точки рисунка к координатам, указанным при вызове метода в качестве двух параметров, используя при этом указанный стиль линии. Например, в этой строке кода точка рисунка помещается в точку 100, 100, после чего к точке 200, 200 проводится линия:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.lineTo(200, 200);

Следующий пример иллюстриурет создание красных и зеленых треугольников высотой 100 пикселов:

var triangleHeight:uint = 100; 
var triangle:Shape = new Shape(); 
 
// red triangle, starting at point 0, 0 
triangle.graphics.beginFill(0xFF0000); 
triangle.graphics.moveTo(triangleHeight / 2, 0); 
triangle.graphics.lineTo(triangleHeight, triangleHeight); 
triangle.graphics.lineTo(0, triangleHeight); 
triangle.graphics.lineTo(triangleHeight / 2, 0); 
 
// green triangle, starting at point 200, 0 
triangle.graphics.beginFill(0x00FF00); 
triangle.graphics.moveTo(200 + triangleHeight / 2, 0); 
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight); 
triangle.graphics.lineTo(200, triangleHeight); 
triangle.graphics.lineTo(200 + triangleHeight / 2, 0); 
 
this.addChild(triangle);

С помощью метода curveTo() создается квадратичная кривая Безье. При этом создается дуга, соединяющая две точки (называемые опорными точками) и одновременно сгибающаяся по направлению к третьей точке (называемой контрольной точкой). Объект Graphics использует текущую позицию рисования в качестве первой опорной точки. При вызове метода curveTo() указываются четыре параметра: координаты оси x и y контрольной точки и координаты оси x и y второй опорной точки. Например, с помощью следующего кода создается кривая, начинающаяся в точке 100, 100 и заканчивающаяся в точке 200, 200. Поскольку контрольная точка находится в точке 175, 125, создается кривая, идущая вправо и затем вниз:

myShape.graphics.moveTo(100, 100); 
myShape.graphics.curveTo(175, 125, 200, 200);

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

var size:uint = 100; 
var roundObject:Shape = new Shape(); 
 
// red circular shape 
roundObject.graphics.beginFill(0xFF0000); 
roundObject.graphics.moveTo(size / 2, 0); 
roundObject.graphics.curveTo(size, 0, size, size / 2); 
roundObject.graphics.curveTo(size, size, size / 2, size); 
roundObject.graphics.curveTo(0, size, 0, size / 2); 
roundObject.graphics.curveTo(0, 0, size / 2, 0); 
 
// green circular shape 
roundObject.graphics.beginFill(0x00FF00); 
roundObject.graphics.moveTo(200 + size / 2, 0); 
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2); 
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size); 
roundObject.graphics.curveTo(200, size, 200, size / 2); 
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0); 
 
this.addChild(roundObject);