グラデーションを使った点線の描画

DrawGradientLines クラス

reference
Foundation ActionScript 3.0 Image Effects
- http://www.friendsofed.com/book.html?isbn=9781430218715

by argint 18 Oct 2009

Tags

DrawGradientLines お絵かき ユーザーアクション
Embed

package  
{
	import flash.display.SpreadMethod;
	import flash.display.GradientType;
	import flash.display.CapsStyle;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.geom.Point;

	[SWF(width=550, height=400, backgroundColor=0xFFFFFF, frameRate=30)]

	/**
	 * DrawGradientLines クラス
	 *
	 * reference
	 * Foundation ActionScript 3.0 Image Effects
	 * - http://www.friendsofed.com/book.html?isbn=9781430218715
	 */
	public class DrawGradientLines extends Sprite 
	{
		private var _currentShape:Shape;
		private var _color:uint;
		private var _startPosition:Point;
		
		/**
		 * コンストラクタ - マウスイベントにリスナーを設定する
		 */
		public function DrawGradientLines()
		{
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onStageMouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onStageMouseUp);				
		}
		
		/**
		 * startPosition から currentPosition に向けてグラデーションの線を描画する
		 */
		private function drawLine():void
		{
			var thickness:Number = 2;
			
			// 同じ色
			var colors:Array = [_color, _color];
			// 二つの違う透明度
			var alphas:Array = [1, 0]
			// 同じ比率は透明度が突然に変化する事を意味する
			var ratios:Array = [127, 127];
			
			// startPosition と currentPositionの間を結ぶラインの角度を求める
			var currentPosition:Point = new Point(stage.mouseX, stage.mouseY);
			var xDist:Number = (currentPosition.x - _startPosition.x);
			var yDist:Number = (currentPosition.y - _startPosition.y);
			var angle:Number = Math.atan2(yDist, xDist);
			// グラデーションを matrix で回転する
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(thickness*4, thickness*4, angle);
			
			// グラデーション線を描画する
			_currentShape.graphics.clear();
			_currentShape.graphics.lineStyle(thickness, 0, 1, false, null, CapsStyle.SQUARE);
			_currentShape.graphics.lineGradientStyle(GradientType.LINEAR, colors, alphas, ratios, matrix, SpreadMethod.REPEAT);
			_currentShape.graphics.moveTo(_startPosition.x, _startPosition.y);
			_currentShape.graphics.lineTo(stage.mouseX, stage.mouseY);
		}
		
		/**
		 * ステージがクリックされた場合のハンドラ
		 * ラインを描くためのシェープを作成し、開始地点を保存して、マウスが移動した場合のハンドラを設定する
		 * 
		 * @param event ステージから送出されるEvent
		 */
		private function onStageMouseDown(event:MouseEvent):void
		{
			_color = Math.random() * 0xFFFFFF;
			_currentShape = new Shape();
			addChild(_currentShape);
			_startPosition = new Point(stage.mouseX, stage.mouseY);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove);
		}
		
		/**
		 * マウスアップのハンドラ
		 * マウスが移動した場合に使用されるリスナーを削除する
		 */
		private function onStageMouseUp(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove);	
		}
		
		private function onStageMouseMove(event:MouseEvent):void
		{
			drawLine();
			event.updateAfterEvent();
		}
	}
}