Как сделать радиальный градиент заполняющий круг?

[Шурик_2]

Спасибо, goodguy.
---
В процессе настройки градиента возникли трудности с позиционированием заливки внутри круга. Что конкретно представляет собой GradientBox? Можно обойтись без него?

[goodguy]

Это типа баундинг бокса объекта, только для градиента. Т.е как бы прямоугольная рамка, внутри которой позиционируется градиент. Чтобы градиент заполнял ровно весь объект, размер градиент бокса должен соответствовать размерам объекта, и находиться в тех же кординатах.
В данном примере градиент спозиционирован по х и по у на один радиус относительно левого верхнего угла градиент бокса. Чтобы его позиционировать можно смеситить матрицу, например так:

matrix.createGradientBox(radius * 2, radius * 2, 90 * Math.PI / 180, radius + 20, radius);

Это сдвинет градиент вправо на один радиус и 20 пикселей

[Шурик_2]

Спасибо, goodguy! Помогло.

[zoomerland]

Сообщение от goodguy

Во флешдевелоп есть офигенная фича ctrl + shift + k появляется цветовая палитра, из которой выбранный цвет сразу добавится в код. Удобная штучка )

Блин, вот это круть! Спасибо!)

[KaaPex]

У меня есть два вот таких класса:

1) Рисует градиент бар

package kaapex.util 
{
	import flash.display.CapsStyle;
	import flash.display.GradientType;
	import flash.display.LineScaleMode;
	import flash.display.Sprite;
	import flash.geom.Matrix;
 
	/**
	 * ...
	 * @author KaaPex
	 */
	public class clColorBar extends Sprite
	{
		private static const DEFAULT_WIDTH:Number  = 100;
		private static const DEFAULT_HEIGHT:Number = 100;
 
		public function clColorBar(nWidth:Number = DEFAULT_WIDTH, nHeight:Number = DEFAULT_HEIGHT)
		{
			init(nWidth, nHeight);			
		}
 
		/**
		 * Initializes the color bar.
		 * 
		 * @param	nWidth		The width of the color bar.
		 * @param	nHeight		The height of the color bar.
		 */
		public function init(nWidth:Number = DEFAULT_WIDTH, nHeight:Number = DEFAULT_HEIGHT):void
		{
			var nColorPercent : Number;
			var nRadians      : Number;
			var nR            : Number;
			var nG            : Number;
			var nB            : Number;
			var nColor        : Number;
			var objMatrixW    : Matrix;
			var objMatrixB    : Matrix;
			var nHalfHeight   : Number;
 
			// Clear the graphics container.
			graphics.clear();
 
			// Calculate half of the height.
			nHalfHeight = nHeight * 0.5;
 
			// Loop through all of the pixels from '0' to the specified width.
			for(var i:int = 0; i < nWidth; i++)
			{
				// Calculate the color percentage based on the current pixel.
				nColorPercent = i / nWidth;
 
				// Calculate the radians of the angle to use for rotating color values.
				nRadians = (-360 * nColorPercent) * (Math.PI / 180);
 
				// Calculate the RGB channels based on the angle.
				nR = Math.cos(nRadians)                   * 127 + 128 << 16;
				nG = Math.cos(nRadians + 2 * Math.PI / 3) * 127 + 128 << 8;
				nB = Math.cos(nRadians + 4 * Math.PI / 3) * 127 + 128;
 
				// OR the individual color channels together.
				nColor  = nR | nG | nB;
 
				// Create new matrices for the white and black gradient lines.
				objMatrixW = new Matrix();
				objMatrixW.createGradientBox(1, nHalfHeight, Math.PI * 0.5, 0, 0);
				objMatrixB = new Matrix();
				objMatrixB.createGradientBox(1, nHalfHeight, Math.PI * 0.5, 0, nHalfHeight);
 
				// Each color slice is made up of two lines - one for fading from white to the 
				// color, and one for fading from the color to black.
				graphics.lineStyle(1, 0, 1, false, LineScaleMode.NONE, CapsStyle.NONE);
				graphics.lineGradientStyle(GradientType.LINEAR, [0xFFFFFF, nColor], [100, 100], [0, 255], objMatrixW);
				graphics.moveTo(i, 0);
				graphics.lineTo(i, nHalfHeight);
				graphics.lineGradientStyle(GradientType.LINEAR, [nColor, 0], [100, 100], [0, 255], objMatrixB);
				graphics.moveTo(i, nHalfHeight);
				graphics.lineTo(i, nHeight);
			}
		}
	}
 
}

2) Рисует круговой градиент

package kaapex.util 
{
	import flash.display.CapsStyle;
	import flash.display.GradientType;
	import flash.display.LineScaleMode;
	import flash.display.Sprite;
	import flash.geom.Matrix;
 
	/**
	 * ...
	 * @author KaaPex
	 */
	public class clColorWheel extends Sprite
	{
		private static const DEFAULT_RADIUS:Number  = 100;
 
		public function clColorWheel(nRadius:Number = DEFAULT_RADIUS)
		{
			init(nRadius);	
		}
 
		/**
		 * Initializes the color wheel.
		 * 
		 * @param	nRadius		The radius of the color wheel.
		 */
		public function init(nRadius:Number = DEFAULT_RADIUS):void
		{
			var nRadians   : Number;
			var nR         : Number;
			var nG         : Number;
			var nB         : Number;
			var nColor     : Number;
			var objMatrix  : Matrix;
			var nX         : Number;
			var nY         : Number;
			var iThickness : int;
 
			// Clear the graphics container.
			graphics.clear();
 
			// Calculate the thickness of the lines which draw the colors.
			iThickness = 1 + int(nRadius / 50);
 
			// Loop from '0' to '360' degrees, drawing lines from the center 
			// of the wheel outward the length of the specified radius.
			for(var i:int = 0; i < 360; i++)
			{
				// Convert the degree to radians.
				nRadians = i * (Math.PI / 180);
 
				// Calculate the RGB channels based on the angle of the line being drawn.
				nR = Math.cos(nRadians)                   * 127 + 128 << 16;
				nG = Math.cos(nRadians + 2 * Math.PI / 3) * 127 + 128 << 8;
				nB = Math.cos(nRadians + 4 * Math.PI / 3) * 127 + 128;
 
				// OR the individual color channels together.
				nColor = nR | nG | nB;
 
				// Calculate the coordinate in which the line should be drawn to.
				nX = nRadius * Math.cos(nRadians);
				nY = nRadius * Math.sin(nRadians);
 
				// Create a matrix for the lines gradient color.
				objMatrix = new Matrix();
				objMatrix.createGradientBox(nRadius * 2, nRadius * 2, nRadians, 0, 0);
 
				// Create and drawn the line.
				graphics.lineStyle(iThickness, 0, 1, false, LineScaleMode.NONE, CapsStyle.NONE);
				graphics.lineGradientStyle(GradientType.LINEAR, [0xFFFFFF, nColor], [100, 100], [127, 255], objMatrix);
				graphics.moveTo(nRadius, nRadius);
				graphics.lineTo(nX+nRadius, nY+nRadius);
			}
		}
	}
 
}

Как это выглядит, можно глянуть тут: http://www.fisher-hunter.com/