Gradient Rectangle, или «Как нарисовать прямоугольник с градиентной заливкой в Action Script 3»

На самом деле, тема не сложная и даже наоборот, но иногда забывается:) Решил оставить заметку для себя и для других.

Все можно описать в пару строк, но так было бы не интересно и не понятно для многих. Поэтому, опытные кодеры AS3 могут эту заметку пропустить.

Средства рисования в AS3.

Первым делом стоит уяснить, что у каждого графического объекта  в AS3 есть свойство класса Graphics c аналогичным именем graphics. Благодаря данному объекту есть ряд методов облегчающих нам процесс «нанесения тактической обстановки» :-), т.е. рисовать.

Вот перечень основных методов класса Graphics и их краткое описание:

beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

Заливает заданную область растровым изображением

beginFill(color:uint, alpha:Number = 1.0):void

Задает цвет для заливки, который используется в других методах класса Graphics (к примеру, lineTo() или drawCircle()) во время рисования.

beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = «pad», interpolationMethod:String = «rgb», focalPointRatio:Number = 0):void

Задает градиентную заливку, которая используется в других методах класса Graphics (к примеру, lineTo() или drawCircle()) во время рисования.

clear():void

Очищает изображение графического объекта и устанавливает значение Заливки и Стиля линии равным значениям по умолчанию.

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

Рисует кривую использую заданный стиль линии начиная с текущей позиции рисования к  (anchorX, anchorY) и использует заданную контрольную точку (controlX, controlY).

drawCircle(x:Number, y:Number, radius:Number):void

Рисует окружность с центром в точке с координатами x,y и заданным радиусом.

drawEllipse(x:Number, y:Number, width:Number, height:Number):void

Рисует овал с центральной точкой x,y с заданной шириной и высотой.

drawRect(x:Number, y:Number, width:Number, height:Number):void

Рисует прямоугольник.

drawRoundRect(x:Number, y:Number, width:Number, height:Number, ellipseWidth:Number, ellipseHeight:Number = NaN):void

Рисует прямоугольник с закругленными углами.

endFill():void

Применяет заливку к линиям, кривым и т.д и вызывается после вызова одного из методов beginFill(), beginGradientFill(), или beginBitmapFill().

lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = «pad», interpolationMethod:String = «rgb», focalPointRatio:Number = 0):void

Задает градиент к стилям линий.

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

Задает стиль линии.

lineTo(x:Number, y:Number):void

Рисует линию начиная с текущей позиции рисования и до точки с координатами (x, y) используя текущие настройки стиля линий. После выполнения данного метода текущая позиция рисования переходит в точку с координатами (x,y).

moveTo(x:Number, y:Number):void

Перемещает текущую позицию рисования в точку (x, y).

Приступим к решению нашей задачи. Создадим файл GradientRect.as c таким содержанием:

package {
//данный пакет нам потребуется для дальнейшей заметки о создании шлейфа за курсором мыши
//импорт классов пакета flash.display
import flash.display.*;
//импорт классов геометрии
import flash.geom.*
//описание основного класса, который наследуется от класса Sprite
public class GradientRect extends Sprite {
public function GradientRect () {
//холст для рисования
var viewImage:Sprite = new Sprite();
//тип заполнения, это константа языка as3
var fillType:String = GradientType.LINEAR;
//массив содержащий цвета для градиента
var colors:Array = [0xFFFFFF, 0x999999];
//массив содержащий значения непрозрачности цветов из предыдущего массива
//количество элементов в colors и alphas должно совпадать
var alphas:Array = [1, 1];
//массив значений распределения цветов
//количество элементов должно совпадать с alphas и colors
var ratios:Array = [0, 255];
//создаем объект матрицы
var matrix:Matrix = new Matrix();
//ширина градиента
var gradWidth:Number = 360;
//высота градиента
var gradHeight:Number = 240;
//поворот градиента в радианах
var gradRotation:Number = 90 / 180 * Math.PI;
//смещение по оси X
var gradOffsetX:Number = 0;
//смещение по оси Y
var gradOffsetY:Number = 0;
//создаем специальную матрицу для метода beginGradientFill
matrix.createGradientBox(gradWidth, gradHeight, gradRotation, gradOffsetX, gradOffsetY);
//метод распространения, константа as3
var spreadMethod:String = SpreadMethod.PAD;
//задаем градиентную заливку
viewImage.graphics.beginGradientFill(fillType, colors, alphas, ratios, matrix, spreadMethod);
//рисуем прямоугольник с закругленными краями
viewImage.graphics.drawRoundRect(0, 0, 360, 240, 36);
//выполняем заливку
viewImage.graphics.endFill();
//добавляем холст с рисунком на основную сцену
addChild(viewImage);
}
}
}

Должно получиться следующее:

as-3-gradient

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *