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

Для рисования с помощью свойства 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() (для рисования кривых линий).

Во время рисования можно вызвать метод moveTo() в любое время для перемещения точки рисунка на новую позицию без рисования.

При рисовании, если указан цвет заливки, можно замкнуть заливку, вызвав метод 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);