Flashゲームプログラミング講座 for ActionScript3.0

 

Graphics クラスについて

 
 


■ Graphics クラスについて

 
描画関連の機能が、まとめられています。
 

■ Graphics クラスの機能一覧

 
■線の描画スタイル
 
メソッド名 説明
lineStyle() 線の描画スタイルを指定。(単一色)
lineGradientStyle() 線の描画スタイルを指定。(グラデーション)
lineBitmapStyle() 線の描画スタイルを指定。(テクスチャ)
lineShaderStyle() 線の描画スタイルを指定。(シェーダー)
 
■面の描画スタイル
 
メソッド名 説明
beginFill() 面の描画スタイルを指定。(単一色)
beginGradientFill() 面の描画スタイルを指定。(グラデーション)
beginBitmapFill() 面の描画スタイルを指定。(テクスチャ)
beginShaderFill() 面の描画スタイルを指定。(シェーダー)
 
■パス指定による描画
 
メソッド名 説明
moveTo() 新しい描画パスを開始する
lineTo() 直線を描画する
curveTo() 2次ベジェ曲線を描画する
cubicCurveTo() 3次ベジェ曲線を描画する
drawPath() 描画パス(線関連)をまとめて高速描画する
endFill() 描画パスを閉じて、面の塗りつぶしを確定する
 
■図形描画
 
メソッド名 説明
drawCircle() 図形を描画する(正円)
drawEllipse() 図形を描画する(楕円)
drawRect() 図形を描画する(矩形)
drawRoundRect() 図形を描画する(角丸矩形)
drawTriangles() トライアングルリストを描画する
 
■描画編集
 
メソッド名 説明
clear() 描画した物をすべてクリアする。
copyFrom() 描画した物を別の Graphics にコピーする。
 
■GraphicsData 関連
 
メソッド名 説明
readGraphicsData() GraphicsData のリストを取得する
drawGraphicsData() GraphicsData のリストを使って描画する
 

■ Graphics オブジェクトを取得する

 
■描画機能をサポートする表示オブジェクト
 
一部の表示オブジェクトは、描画機能をサポートしています。
 
Document , MovieClip , Sprite , Shape
 
■ Graphics オブジェクトを取得する
 
graphics プロパティを使用します。
 
スプライトから Graphics オブジェクトを取得する

import flash.display.Sprite;
import flash.display.Graphics;

// ------------------------------------------------------------
// Sprite オブジェクトを作成
// ------------------------------------------------------------
var sprite:Sprite = new Sprite();

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var graphics:Graphics = sprite.graphics;

// 出力テスト
trace(graphics);
 

■ Shape クラスについて

 
Shape クラスは、最も軽量な表示オブジェクトです。
 
描画機能のみを利用したい場合に最適です。
 
Shape オブジェクトを作成する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// 出力テスト
trace(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var graphics:Graphics = shape.graphics;

// 出力テスト
trace(graphics);

// ------------------------------------------------------------
// ステージに配置
// ------------------------------------------------------------
stage.addChild(shape);
 
■ Shape クラスの派生について
 
Shape クラスは、以下の様に派生しています。
 
Object
↓派生
EventDispatcher
↓派生
DisplayObject
↓派生
Shape
 
■ Sprite クラスとの違い
 
Sprite クラスは、DisplayObjectContainer と InteractiveObject クラスも継承しています。
 
 


■新しい描画パスを開始する

 
moveTo() メソッドを使用します。
 
開始位置を指定します。
 
Graphics.moveTo( x , y ) :void
引数 Number開始位置となる、x 座標を指定する
引数 Number開始位置となる、y 座標を指定する
戻り値 voidなし
 

■描画パスを閉じて、面の塗りつぶしを確定する

 
endFill() メソッドを使用します。
 
このメソッドを呼び出すと、面の描画スタイルは、リセットされます。
 
Graphics.endFill( ) :void
引数 voidなし
戻り値 voidなし
 
■描画パスが暗黙的に閉じられる場合
 
描画パスは、他の手段でも閉じる事ができます。
 
ただし、「面の塗りつぶし」は確定しません。
 
moveTo() メソッドを呼び出すと、以前の描画パスは閉じられます。
 
面の描画スタイルを変更すると、以前の描画パスは閉じられます。
 
draw 系のメソッドを呼び出すと、以前の描画パスは閉じられます。
 
■「面の塗りつぶし」を確定させなかった場合
 
描画パスがねじれて重なった場合、面の有無は反転します。
 
この仕様が、2つの面が重なった場合にも、継続して適用され続けます。
 
面が、偶数回重なった場合、面無し状態に変化します。
 
面が、奇数回重なった場合、面有り状態に変化します。
 

■描画パス(線関連)をまとめて高速描画する (Flash 10 以降)

 
drawPath() メソッドを使用します。
 
引数で指定する情報は、GraphicsPath クラスから生成できます。
 
Graphics.drawPath( commands , data , winding ) :void
第01引数 Vector.<int>コマンドのリストを指定 (GraphicsPathCommand.*)
第02引数 Vector.<Number>コマンドの順序通りに、必要な座標データを順番に格納して指定
第03引数(略可)Stringワインディング規則を指定 (GraphicsPathWinding.*)
戻り値 voidなし
 
■第01引数 コマンドリスト
 
コマンドには、以下の種類があります。
 
定数数値説明
GraphicsPathCommand.NO_OP0何もしません
GraphicsPathCommand.MOVE_TO1moveTo() に相当
GraphicsPathCommand.LINE_TO2lineTo() に相当
GraphicsPathCommand.CURVE_TO3curveTo() に相当
GraphicsPathCommand.CUBIC_CURVE_TO6cubicCurveTo() に相当
 
定数数値説明
GraphicsPathCommand.WIDE_MOVE_TO4moveTo() に相当
GraphicsPathCommand.WIDE_LINE_TO5lineTo() に相当
 
■第02引数 座標データリスト
 
コマンドの順序通りに、必要となる座標データを格納します。
 
(x,y) | (x,y) | (x,y) | (x,y) | (x,y) ...
 
定数説明
NO_OP なし
MOVE_TO 1つの「座標」を指定
LINE_TO 1つの「座標」を指定
CURVE_TO 「制御」「終端」の2つの座標を指定
CUBIC_CURVE_TO 「制御1」「制御2」「終端」の3つの座標を指定
 
以下の WIDE 系の定数は、ダミーデータを含みます。
 
これは、CURVE_TO とサイズを統一するために用意されています。
 
定数説明
WIDE_MOVE_TO 「ダミー」「座標」の2つを指定
WIDE_LINE_TO 「ダミー」「座標」の2つを指定
 
■第03引数 ワインディング規則
 
ワインディング規則には、以下の種類があります。
 
デフォルトは、GraphicsPathWinding.EVEN_ODD です。
 
定数文字列説明
GraphicsPathWinding.EVEN_ODD"evenOdd"デフォルトの描画規則です。
面が偶数回重なった場合、塗りは無しに変化します。
面が奇数回重なった場合、塗りは有りに変化します。
GraphicsPathWinding.NON_ZERO"nonZero"描画パスの囲み方向が考慮されます。
時計回りとなる面1つ分を、(+1) とします。
反時計回りとなる面1つ分を、(-1) とします。
「複数の面が重なる部分」の合計結果が 0 となる場合、その部分の塗りは無しに変化します。
 
■通常の描画との違いについて
 
描画パスが閉じられた際、終了座標と開始座標との間に、自動的に線が描画される事はありません。
 
■使用例
 
描画パスをまとめて高速描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GraphicsPathCommand;
import flash.display.GraphicsPathWinding;
import flash.geom.Point;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// 描画パスのコマンドと座標データ
// ------------------------------------------------------------
// コマンドリスト
var command_list:Vector.<int> = new Vector.<int>();

// 座標データリスト
var data_list:Vector.<Number> = new Vector.<Number>();

// 描画パスを開始する
command_list.push(GraphicsPathCommand.MOVE_TO);
data_list.push(219.9); // x
data_list.push(123.5); // y

// 描画パスを指定して囲む
command_list.push(GraphicsPathCommand.LINE_TO);
data_list.push(147.5); // x
data_list.push(216.1); // y

command_list.push(GraphicsPathCommand.LINE_TO);
data_list.push( 37.1); // x
data_list.push(175.9); // y

command_list.push(GraphicsPathCommand.LINE_TO);
data_list.push( 41.2); // x
data_list.push( 58.4); // y

command_list.push(GraphicsPathCommand.LINE_TO);
data_list.push(154.2); // x
data_list.push( 26.0); // y

command_list.push(GraphicsPathCommand.LINE_TO);
data_list.push(219.9); // x
data_list.push(123.5); // y

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 描画パスをまとめて高速描画する
// ------------------------------------------------------------
g.drawPath (command_list , data_list , GraphicsPathWinding.EVEN_ODD);

// 描画パスを閉じて、塗りつぶしを確定する
g.endFill ();
 
GraphicsPath クラスを使って、描画パスのコマンドと座標データを生成する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GraphicsPath;
import flash.display.GraphicsPathWinding;
import flash.geom.Point;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// 描画パスのコマンドと座標データ
// ------------------------------------------------------------
// GraphicsPath オブジェクトを作成する
var graphics_path:GraphicsPath = new GraphicsPath();

// 描画パスを開始する
graphics_path.moveTo(219.9 , 123.5);

// 描画パスを指定して囲む
graphics_path.lineTo(147.5 , 216.1);
graphics_path.lineTo( 37.1 , 175.9);
graphics_path.lineTo( 41.2 ,  58.4);
graphics_path.lineTo(154.2 ,  26.0);
graphics_path.lineTo(219.9 , 123.5);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 描画パスをまとめて高速描画する
// ------------------------------------------------------------
g.drawPath (graphics_path.commands , graphics_path.data , GraphicsPathWinding.EVEN_ODD);

// 描画パスを閉じて、塗りつぶしを確定する
g.endFill ();
 

■描画した物を別の Graphics にコピーする (Flash 10 以降)

 
copyFrom() メソッドを使用します。
 
Graphics.copyFrom( ソース ) :void
第01引数 Graphicsソースとなる Graphics オブジェクトを指定
戻り値 voidなし
 
■使用例
 
グラフィックをコピーする

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape_a:Shape = new Shape();
var shape_b:Shape = new Shape();

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var graphics_a:Graphics = shape_a.graphics;
var graphics_b:Graphics = shape_b.graphics;

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
graphics_a.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
graphics_a.beginFill (0x808080 , 1.0);
// 矩形を描画する
graphics_a.drawRect ( 0.0 , 0.0 , 100.0 , 100.0 );

// ------------------------------------------------------------
// グラフィックをコピーする
// ------------------------------------------------------------
graphics_b.copyFrom(graphics_a);

// ------------------------------------------------------------
// ステージに配置
// ------------------------------------------------------------
stage.addChild(shape_a);
stage.addChild(shape_b);
shape_a.x =  20;
shape_a.y =  20;
shape_b.x = 200;
shape_b.y =  20;
 


 
 

描画した物をすべてクリアする

 


■描画した物をすべてクリアする

 
clear() メソッドを使用します。
 
このメソッドを呼び出すと、描画スタイルの設定もリセットされます。
 
Graphics.clear( ) :void
引数 voidなし
戻り値 voidなし
 
■使用例
 
描画済みグラフィックをすべてクリアする

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle(10 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
g.moveTo (  10.0 ,  10.0 );
// 終了位置
g.lineTo ( 100.0 ,  50.0 );

// ------------------------------------------------------------
// 描画済みグラフィックをすべてクリアする
// ------------------------------------------------------------
g.clear();
 


 

線の描画スタイルについて

 
 


■線に「単一色塗り」スタイルを指定する


lineStyle() メソッドを使用します。
 
Graphics.lineStyle ( 太さ , RGBカラー , 透明度 , ヒンディング? , "スケールモード" , "先の種類" , "角の種類" , マイター限度 ) :void
第01引数(略可)Number線の太さ (0 ~ 255) (0 で極細線)
第02引数(略可)uint線の色 (RGBカラー値)
第03引数(略可)Number線の透明度 (0.0 ~ 1.0)
第04引数(略可)Booleanヒンティングの有無
第05引数(略可)Stringスケールモード (LineScaleMode.*)
第06引数(略可)String線先の種類 (CapsStyle.*)
第07引数(略可)String角の種類 (JointStyle.*)
第08引数(略可)Numberマイターの尖りの延長サイズ (1.0 ~)
戻り値 voidなし
 
■第04引数 ヒンディング
 
有効にすると、クッキリと表示されるように補正されます。
 
線の太さや位置が、微修正されます。
 
デフォルトは、false です。
 
true false
 
■第05引数 スケールモードの種類
 
スケールモードの種類です。
 
デフォルトは、LineScaleMode.NORMAL です。
 
定数文字列説明
LineScaleMode.NORMAL"normal"拡大縮小で線の太さが変わります
LineScaleMode.HORIZONTAL"horizontal"横方向のみ拡大縮小で線の太さが変わります
LineScaleMode.VERTICAL"vertical"縦方向のみ拡大縮小で線の太さが変わります
LineScaleMode.NONE"none"拡大縮小で線の太さは変わりません
 
■第06引数 線先の種類
 
線先の種類です。
 
デフォルトは、CapsStyle.ROUND です。
 
定数文字列説明
CapsStyle.NONE"none"線の先にキャップなし
CapsStyle.ROUND"round"線の先に丸いキャップ
CapsStyle.SQUARE"square"線の先に四角いキャップ
 
NONEROUNDSQUARE
 
■第07引数 角の種類
 
角(結合部)の種類です。
 
デフォルトは、JointStyle.ROUND です。
 
定数文字列説明
JointStyle.MITER"miter"角をマイター結合
JointStyle.BEVEL"bevel"角をベベル結合
JointStyle.ROUND"round"角をラウンド結合
 
MITERBEVELROUND
 
■第08引数 マイター限度
 
第07引数で、MITER を指定した場合に効果があります。
 
マイターの尖りの延長サイズを 1.0 ~ で指定します。
 
実際のサイズは、(第01引数 * 第08引数) です。
 
最小 (1.0)最大
 
■使用例
 
線に「単一色塗り」スタイルを指定する(簡易)

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle (10 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
g.moveTo (  10.0 ,  10.0 );
// 直線を描画
g.lineTo ( 100.0 ,  50.0 );
 
線に「単一色塗り」スタイルを指定する(詳細)

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.LineScaleMode;
import flash.display.CapsStyle;
import flash.display.JointStyle;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線の単一色塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 20;
// 線の色 (RGBカラー値)
var line_color:uint = 0x000000;
// 線の透明度 (0.0 ~ 1.0)
var line_alpha:Number = 1.0;
// ヒンティングの有無
var pixel_hinting:Boolean = true;
// スケールモード
var scale_mode:String = LineScaleMode.NORMAL;
// 線先の種類
var caps_style:String = CapsStyle.SQUARE;
// 角の種類
var joints_style:String = JointStyle.MITER;
// マイターの尖りの延長サイズ (1.0 ~)
var miter_limit:Number = 255;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle ( thickness , line_color , line_alpha , pixel_hinting , scale_mode , caps_style , joints_style , miter_limit );

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
g.moveTo (  20.0 ,  20.0 );
// 直線を描画
g.lineTo ( 200.0 , 100.0 );
// 直線を描画
g.lineTo (  20.0 , 100.0 );
 

■線に「グラデーション塗り」スタイルを指定する

 
lineGradientStyle() メソッドを使用します。
 
事前に、lineStyle() メソッドも呼び出す必要があります。
 
Graphics.lineGradientStyle ( "グラデーションの種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補間" , 焦点 ) :void
第01引数 Numberグラデーションの種類 (GradientType.*)
第02引数 Arrayグラデーションの RGB カラー (0xFFFFFF) を、配列に格納して指定。
第03引数 Arrayグラデーションの透明度 (0.0 ~ 1.0) を、配列に格納して指定。
第04引数 Arrayグラデーションの配分 (0 ~ 255) を、配列に格納して指定。
第05引数(略可)Matrixグラデーションの姿勢を、行列で指定。
第06引数(略可)Stringスプレッドの種類 (SpreadMethod.*)
第07引数(略可)String補間の種類 (InterpolationMethod.*)
第08引数(略可)Number焦点位置 (-1.0 ~ 1.0)
戻り値 voidなし
 
■第01引数 グラデーションの種類
 
グラデーションの種類です。
 
定数文字列説明
GradientType.LINEAR"linear"線状グラデーション
GradientType.RADIAL"radial"円状グラデーション
 
LINEARRADIAL
 
■第02引数 グラデーションのカラー
 
RGB カラー(0xFFFFFF) を、必要な数だけ配列に格納して指定します。
 
 
■第03引数 グラデーションの透明度
 
透明度 (0.0 ~ 1.0) を、配列に格納して指定します。
 
配列の要素数は、第02引数と一致している必要があります。
 
第02引数のカラーリストの順序で、透明度を設定します。
 
 
■第04引数 グラデーションの配分
 
グラデーションの配分(配置)を、配列に格納して指定します。
 
0 ~ 255 の数値を指定します。昇順で格納します。
 
配列の要素数は、第02~03引数と一致している必要があります。
 
 
■第05引数 グラデーションの姿勢
 
グラデーションの姿勢を、行列で指定します。
 
単位行列を指定した場合、以下の様な姿勢となります。
 
単位行列の線形グラデーションの幅は、1638.4 です。
 
単位行列の円形グラデーションの直径は、1638.4 です。
 
線形グラデーション円形グラデーション
 
■第06引数 スプレッドの種類
 
スプレッドの種類です。
 
デフォルトは、SpreadMethod.PAD です。
 
定数文字列説明
SpreadMethod.PAD"pad"端のカラーを引き伸ばし
SpreadMethod.REFLECT"reflect"反転して繰り返し
SpreadMethod.REPEAT"repeat"同じカラーで繰り返し
 
PADREFLECTREPEAT
 
■第07引数 補間の種類

補間の種類です。
 
デフォルトは、InterpolationMethod.RGB です。
 
定数文字列説明
InterpolationMethod.LINEAR_RGB"linearRGB"線形でRGB補間
InterpolationMethod.RGB"rgb"RGBの補間
 
LINEAR_RGBRGB
 
■第08引数 焦点位置
 
グラデーションの焦点位置を、自身の x 軸方向にずらす事ができます。
 
-1.0 ~ 1.0 までの数値を指定します。
 
デフォルトは、0.0 です。
 
-1.0 ~~ 0.0 ~~ 1.0
 
■使用例
 
グラデーションと行列の関係を確認する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 30;
// グラデーションの種類
var gradient_type:String = GradientType.RADIAL;
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ];	// RGB カラーリスト
var gradient_alphas:Array = [      1.0 ,      1.0 ,      1.0 ];	// 透明度リスト
var gradient_ratios:Array = [        0 ,    127.5 ,      255 ];	// 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = SpreadMethod.PAD;
// 補間の種類
var interpolation_method:String = InterpolationMethod.LINEAR_RGB;
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;

// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale( 256/1638.4 , 256/1638.4 );
// 角度成分を乗算
gradient_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
gradient_mtx.translate( 128.0 , 128.0 );

// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
g.lineStyle( thickness );

// ------------------------------------------------------------
// 線に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineGradientStyle( gradient_type , gradient_colors , gradient_alphas , gradient_ratios , gradient_mtx , spread_method , interpolation_method , focal_point_ratio );

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
var i:int = 0;
for(i=0;i < 8;i++){

	var pos_y:Number = i * 32.0 + 16.0;

	// 開始位置
	g.moveTo (   0.0 , pos_y );
	// 直線を描画
	g.lineTo ( 256.0 , pos_y );
}
 
■2点間にグラデーション線を配置する例
 
線の太さにグラデーションをフィットさせる

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 2つの座標
// ------------------------------------------------------------
var pos_a:Point = new Point( stage.stageWidth/2 , stage.stageHeight/2 );
var pos_b:Point = new Point( 0 , 0 );

// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 100;
// グラデーションの種類
var gradient_type:String = GradientType.LINEAR;
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ];	// RGB カラーリスト
var gradient_alphas:Array = [      0.0 ,      1.0 ,      0.0 ];	// 透明度リスト
var gradient_ratios:Array = [        0 ,    127.5 ,      255 ];	// 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = SpreadMethod.PAD;
// 補間の種類
var interpolation_method:String = InterpolationMethod.LINEAR_RGB;
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;

// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
stage.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

	// ------------------------------------------------------------
	// 座標Bにマウス座標をセット
	// ------------------------------------------------------------
	pos_b.x = stage.mouseX;
	pos_b.y = stage.mouseY;

	// ------------------------------------------------------------
	// グラデーションの行列
	// ------------------------------------------------------------
	// 差分ベクトル
	var vec:Point = pos_b.subtract(pos_a);
	// 法線ベクトルの角度
	var rad:Number = Math.atan2(vec.y , vec.x) + Math.PI * 0.5;

	// 単位行列化
	gradient_mtx.identity();
	// 拡大縮小成分を乗算
	gradient_mtx.scale(thickness/1638.4 , 1.0);
	// 角度成分を乗算
	gradient_mtx.rotate(rad);
	// 移動成分を乗算
	gradient_mtx.translate(pos_a.x , pos_a.y);

	// ------------------------------------------------------------
	// 描画済みグラフィックをすべてクリアする
	// ------------------------------------------------------------
	g.clear();

	// ------------------------------------------------------------
	// 線の基礎的なスタイルを指定する
	// ------------------------------------------------------------
	g.lineStyle( thickness );

	// ------------------------------------------------------------
	// 線に「グラデーション塗り」スタイルを指定する
	// ------------------------------------------------------------
	g.lineGradientStyle(
		gradient_type,
		gradient_colors,
		gradient_alphas,
		gradient_ratios,
		gradient_mtx,
		spread_method,
		interpolation_method,
		focal_point_ratio
	);

	// ------------------------------------------------------------
	// 直線を描画する
	// ------------------------------------------------------------
	// 開始位置
	g.moveTo ( pos_a.x , pos_a.y );
	// 直線を描画
	g.lineTo ( pos_b.x , pos_b.y );

});
 
線の長さにグラデーションをフィットさせる

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 2つの座標
// ------------------------------------------------------------
var pos_a:Point = new Point( stage.stageWidth/2 , stage.stageHeight/2 );
var pos_b:Point = new Point( 0 , 0 );

// ------------------------------------------------------------
// 線のグラデーション塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 100;
// グラデーションの種類
var gradient_type:String = GradientType.LINEAR;
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x0000ff ];	// RGB カラーリスト
var gradient_alphas:Array = [      1.0 ,      1.0 ];	// 透明度リスト
var gradient_ratios:Array = [        0 ,      255 ];	// 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = SpreadMethod.PAD;
// 補間の種類
var interpolation_method:String = InterpolationMethod.RGB;
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;

// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
stage.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

	// ------------------------------------------------------------
	// 座標Bにマウス座標をセット
	// ------------------------------------------------------------
	pos_b.x = stage.mouseX;
	pos_b.y = stage.mouseY;

	// ------------------------------------------------------------
	// グラデーションの行列
	// ------------------------------------------------------------
	// 差分ベクトル
	var vec:Point = pos_b.subtract(pos_a);
	// 中間座標
	var pos:Point = Point.interpolate(pos_a , pos_b , 0.5);
	// ベクトルの角度
	var rad:Number = Math.atan2(vec.y , vec.x);
	// ベクトルの長さ
	var len:Number = vec.length;

	// 単位行列化
	gradient_mtx.identity();
	// 拡大縮小成分を乗算
	gradient_mtx.scale(len/1638.4 , 1.0);
	// 角度成分を乗算
	gradient_mtx.rotate(rad);
	// 移動成分を乗算
	gradient_mtx.translate(pos.x , pos.y);

	// ------------------------------------------------------------
	// 描画済みグラフィックをすべてクリアする
	// ------------------------------------------------------------
	g.clear();

	// ------------------------------------------------------------
	// 線の基礎的なスタイルを指定する
	// ------------------------------------------------------------
	g.lineStyle( thickness );

	// ------------------------------------------------------------
	// 線に「グラデーション塗り」スタイルを指定する
	// ------------------------------------------------------------
	g.lineGradientStyle(
		gradient_type,
		gradient_colors,
		gradient_alphas,
		gradient_ratios,
		gradient_mtx,
		spread_method,
		interpolation_method,
		focal_point_ratio
	);

	// ------------------------------------------------------------
	// 直線を描画する
	// ------------------------------------------------------------
	// 開始位置
	g.moveTo ( pos_a.x , pos_a.y );
	// 直線を描画
	g.lineTo ( pos_b.x , pos_b.y );

});
 

■線に「テクスチャ塗り」スタイルを指定する

 
lineBitmapStyle() メソッドを使用します。
 
事前に、lineStyle() メソッドも呼び出す必要があります。
 
Graphics.lineBitmapStyle ( BitmapData , 行列 , リピート? , スムーズ? ) :void
第01引数 BitmapDataテクスチャを BitmapData オブジェクトで指定。
第02引数(略可)Matrixテクスチャの姿勢を行列で指定。
第03引数(略可)Booleanテクスチャのタイリング描画の有無を指定。
第04引数(略可)Booleanスムージングの有無を指定。
戻り値 voidなし
 
■第01引数 BitmapData
 
テクスチャとして使用する、ビットマップを指定します。
 
BitmapData クラスについては、こちらで解説しています。
 
■第02引数 テクスチャの姿勢
 
テクスチャの姿勢を、行列で指定します。
 
単位行列を指定した場合、基点は左上端で、等倍で表示されます。
 
■第03引数 タイリング描画
 
false を指定した場合、外周1ドットが無限に引き伸ばされます。
 
true を指定した場合、テクスチャは繰り返されます。
 
デフォルトは、true です。
 
false true
 
■第04引数 スムージング
 
false を指定した場合、ニアレストネイバーで表示されます。
 
true を指定した場合、バイリニアフィルタで表示されます。
 
デフォルトは、false です。
 
false true
 
■使用例
 
テクスチャと行列の関係を確認する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 埋め込みアセットクラス
// ------------------------------------------------------------
[Embed( source="./texture.png" )]
var MyBitmap:Class;

// ------------------------------------------------------------
// 埋め込んだ画像ファイルから、BitmapData オブジェクトを作成する (自作クラス "MyBitmap" )
// ------------------------------------------------------------
var bitmap_obj:Bitmap = new MyBitmap();
var bitmap_data:BitmapData = bitmap_obj.bitmapData;

// ------------------------------------------------------------
// 線のテクスチャ塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 30;
// テクスチャの行列
var texture_mtx:Matrix = new Matrix();
// タイリング描画の有無
var texture_repeat:Boolean = false;
// スムージングの有無
var texture_smooth:Boolean = true;

// ------------------------------------------------------------
// テクスチャの行列
// ------------------------------------------------------------
// 単位行列化
texture_mtx.identity();
// 拡大縮小成分を乗算
texture_mtx.scale( 1.0 , 1.0 );
// 角度成分を乗算
texture_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
texture_mtx.translate( 0.0 , 0.0 );

// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
g.lineStyle( thickness );

// ------------------------------------------------------------
// 線に「テクスチャ塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineBitmapStyle( bitmap_data , texture_mtx , texture_repeat , texture_smooth );

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
var i:int = 0;
for(i=0;i < 16;i++){

	var pos_y:Number = i * 32.0 + 16.0;

	// 開始位置
	g.moveTo (   0.0 , pos_y );
	// 直線を描画
	g.lineTo ( 512.0 , pos_y );
}
 

■線に「シェーダー塗り」スタイルを指定する (Flash 10 以降)

 
lineShaderStyle() メソッドを使用します。
 
事前に、lineStyle() メソッドも呼び出す必要があります。
 
Graphics.lineShaderStyle ( Shader , 行列 ) :void
第01引数 ShaderShader オブジェクトを指定。
第02引数(略可)ArrayShader の姿勢を、行列で指定。
戻り値 voidなし
 
■第01引数 シェーダー
 
シェーダーについては、こちらで解説しています。
 
■第02引数 シェーダーの姿勢
 
シェーダー内部の座標系を、行列で変更できます。
 
outCoord() 関数の戻り値に反映されます。
 
■使用例(Pixel Bender 側のコード)
 
x座標値を赤色、y座標値を青色で出力する(描画スタイル用)

<languageVersion : 1.0;>

// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {

	// ------------------------------------------------------------
	// 出力変数の宣言(ピクセルカラー)
	// ------------------------------------------------------------
	output pixel4 dst;

	// ------------------------------------------------------------
	// ピクセルごとに実行される関数
	// ------------------------------------------------------------
	void evaluatePixel() {

		// 現在のピクセル位置を取得する
		float2 pos = outCoord();

		// x座標値を赤色、y座標値を青色に変換
		pixel4 color;
		color.r = pos.x / 255.0;
		color.g = 0.0;
		color.b = pos.y / 255.0;
		color.a = 1.0;

		// ピクセルカラーを出力する
		dst = color;
	}
}
 
■使用例(Flash 側のコード)
 
線に「シェーダー塗り」スタイルを指定する

import flash.utils.ByteArray;
import flash.display.Shader;
import flash.display.Shape;
import flash.display.Graphics;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 埋め込みアセットクラス
// ------------------------------------------------------------
[Embed( source="./style.pbj" , mimeType="application/octet-stream" )]
var MyByteCode:Class;

// ------------------------------------------------------------
// 埋め込んだファイルから、ByteArray オブジェクトを作成する (自作クラス "MyByteCode" )
// ------------------------------------------------------------
var byte_code:ByteArray = new MyByteCode();

// ------------------------------------------------------------
// 線のシェーダー塗り設定
// ------------------------------------------------------------
// 線の太さ (0 ~ 255) (0 で極細線)
var thickness:Number = 30;
// Shader オブジェクトを作成
var shader_obj:Shader = new Shader(byte_code);
// シェーダーの行列
var shader_mtx:Matrix = new Matrix();

// ------------------------------------------------------------
// シェーダーの行列
// ------------------------------------------------------------
// 単位行列化
shader_mtx.identity();
// 拡大縮小成分を乗算
shader_mtx.scale( 1.0 , 1.0 );
// 角度成分を乗算
shader_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
shader_mtx.translate( 0.0 , 0.0 );

// ------------------------------------------------------------
// 線の基礎的なスタイルを指定する
// ------------------------------------------------------------
g.lineStyle( thickness );

// ------------------------------------------------------------
// 線に「シェーダー塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineShaderStyle( shader_obj , shader_mtx );

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
var i:int = 0;
for(i=0;i < 8;i++){

	var pos_y:Number = i * 32.0 + 16.0;

	// 開始位置
	g.moveTo (   0.0 , pos_y );
	// 直線を描画
	g.lineTo ( 256.0 , pos_y );
}
 

■線の描画スタイルをリセットする

 
lineStyle() メソッドを使用します。
 
引数をすべて省略します。
 
■使用例
 
線の描画スタイルをリセットする

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle (10 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
g.moveTo (  20.0 ,  10.0 );
// 直線を描画
g.lineTo ( 420.0 ,  10.0 );

// ------------------------------------------------------------
// 線の描画スタイルをリセットする(引数を省略した場合)
// ------------------------------------------------------------
g.lineStyle ();

// ------------------------------------------------------------
// 面に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.beginFill ( 0xff8800 , 1.0 );

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
g.drawRect( 20 , 20, 400, 300 );
 


 

面の描画スタイルについて

 
 


■面に「単一色塗り」スタイルを指定する


beginFill() メソッドを使用します。
 
Graphics.beginFill ( RGBカラー , 透明度 ) :void
第01引数 uint面の色 (RGBカラー値)
第02引数(略可)Number面の透明度 (0.0 ~ 1.0)
戻り値 voidなし
 
■使用例
 
面に「単一色塗り」スタイルを指定する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 面に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.beginFill ( 0xff8800 , 1.0 );

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
g.drawRect( 20 , 20, 400, 300 );
 

■面に「グラデーション塗り」スタイルを指定する

 
beginGradientFill() メソッドを使用します。
 
Graphics.beginGradientFill ( "グラデーションの種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補間" , 焦点 ) :void
第01引数 Numberグラデーションの種類 (GradientType.*)
第02引数 Arrayグラデーションの RGB カラー (0xFFFFFF) を、配列に格納して指定。
第03引数 Arrayグラデーションの透明度 (0.0 ~ 1.0) を、配列に格納して指定。
第04引数 Arrayグラデーションの配分 (0 ~ 255) を、配列に格納して指定。
第05引数(略可)Matrixグラデーションの姿勢を、行列で指定。
第06引数(略可)Stringスプレッドの種類 (SpreadMethod.*)
第07引数(略可)String補間の種類 (InterpolationMethod.*)
第08引数(略可)Number焦点位置 (-1.0 ~ 1.0)
戻り値 voidなし
 
■第01引数 グラデーションの種類
 
グラデーションの種類です。
 
定数文字列説明
GradientType.LINEAR"linear"線状グラデーション
GradientType.RADIAL"radial"円状グラデーション
 
LINEARRADIAL
 
■第02引数 グラデーションのカラー
 
RGB カラー(0xFFFFFF) を、必要な数だけ配列に格納して指定します。
 
 
■第03引数 グラデーションの透明度
 
透明度 (0.0 ~ 1.0) を、配列に格納して指定します。
 
配列の要素数は、第02引数と一致している必要があります。
 
第02引数のカラーリストの順序で、透明度を設定します。
 
 
■第04引数 グラデーションの配分
 
グラデーションの配分(配置)を、配列に格納して指定します。
 
0 ~ 255 の数値を指定します。昇順で格納します。
 
配列の要素数は、第02~03引数と一致している必要があります。
 
 
■第05引数 グラデーションの姿勢
 
グラデーションの姿勢を、行列で指定します。
 
単位行列を指定した場合、以下の様な姿勢となります。
 
単位行列の線形グラデーションの幅は、1638.4 です。
 
単位行列の円形グラデーションの直径は、1638.4 です。
 
線形グラデーション円形グラデーション
 
■第06引数 スプレッドの種類
 
スプレッドの種類です。
 
デフォルトは、SpreadMethod.PAD です。
 
定数文字列説明
SpreadMethod.PAD"pad"端のカラーを引き伸ばし
SpreadMethod.REFLECT"reflect"反転して繰り返し
SpreadMethod.REPEAT"repeat"同じカラーで繰り返し
 
PADREFLECTREPEAT
 
■第07引数 補間の種類

補間の種類です。
 
デフォルトは、InterpolationMethod.RGB です。
 
定数文字列説明
InterpolationMethod.LINEAR_RGB"linearRGB"線形でRGB補間
InterpolationMethod.RGB"rgb"RGBの補間
 
LINEAR_RGBRGB
 
■第08引数 焦点位置
 
グラデーションの焦点位置を、自身の x 軸方向にずらす事ができます。
 
-1.0 ~ 1.0 までの数値を指定します。
 
デフォルトは、0.0 です。
 
-1.0 ~~ 0.0 ~~ 1.0
 
■使用例
 
グラデーションと行列の関係を確認する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 面のグラデーション塗り設定
// ------------------------------------------------------------
// グラデーションの種類
var gradient_type:String = GradientType.RADIAL;
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ];	// RGB カラーリスト
var gradient_alphas:Array = [      1.0 ,      1.0 ,      1.0 ];	// 透明度リスト
var gradient_ratios:Array = [        0 ,    127.5 ,      255 ];	// 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = SpreadMethod.PAD;
// 補間の種類
var interpolation_method:String = InterpolationMethod.LINEAR_RGB;
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;

// ------------------------------------------------------------
// グラデーションの行列
// ------------------------------------------------------------
// 単位行列化
gradient_mtx.identity();
// 拡大縮小成分を乗算
gradient_mtx.scale( 256/1638.4 , 256/1638.4 );
// 角度成分を乗算
gradient_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
gradient_mtx.translate( 128.0 , 128.0 );

// ------------------------------------------------------------
// 面に「グラデーション塗り」スタイルを指定する
// ------------------------------------------------------------
g.beginGradientFill( gradient_type , gradient_colors , gradient_alphas , gradient_ratios , gradient_mtx , spread_method , interpolation_method , focal_point_ratio );

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i:int = 0;
for(i=0;i < 8;i++){

	var pos_y:Number = i * 32.0;

	// 矩形を描画
	g.drawRect( 0.0 , pos_y , 256.0 , 30.0 );
}
 
■グラデーションを矩形内に描画する例
 
グラデーションを矩形内にフィット描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.geom.Rectangle;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 矩形
// ------------------------------------------------------------
var rect:Rectangle = new Rectangle( 10 , 10 , stage.stageWidth - 20 , stage.stageHeight - 20 );

// ------------------------------------------------------------
// 面のグラデーション塗り設定
// ------------------------------------------------------------
// グラデーションの種類
var gradient_type:String = GradientType.RADIAL;
// グラデーション
var gradient_colors:Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ];	// RGB カラーリスト
var gradient_alphas:Array = [      1.0 ,      1.0 ,      1.0 ];	// 透明度リスト
var gradient_ratios:Array = [        0 ,    127.5 ,      255 ];	// 配分リスト
// グラデーションの行列
var gradient_mtx:Matrix = new Matrix();
// スプレッドの種類
var spread_method:String = SpreadMethod.PAD;
// 補間の種類
var interpolation_method:String = InterpolationMethod.LINEAR_RGB;
// 焦点位置 (-1.0 ~ 1.0)
var focal_point_ratio:Number = 0.0;

// ------------------------------------------------------------
// 毎フレーム実行されるイベント
// ------------------------------------------------------------
stage.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

	// ------------------------------------------------------------
	// 矩形の右下端をマウス座標にフィット
	// ------------------------------------------------------------
	rect.width  = stage.mouseX - rect.x;
	rect.height = stage.mouseY - rect.y;

	// ------------------------------------------------------------
	// グラデーションの行列
	// ------------------------------------------------------------
	// 中間座標
	var pos_x:Number = rect.x + rect.width  * 0.5;
	var pos_y:Number = rect.y + rect.height * 0.5;

	// 単位行列化
	gradient_mtx.identity();
	// 拡大縮小成分を乗算
	gradient_mtx.scale(rect.width/1638.4 , rect.height/1638.4);
	// 角度成分を乗算
	gradient_mtx.rotate(0.0 * (Math.PI / 180));
	// 移動成分を乗算
	gradient_mtx.translate(pos_x , pos_y);

	// ------------------------------------------------------------
	// 描画済みグラフィックをすべてクリアする
	// ------------------------------------------------------------
	g.clear();

	// ------------------------------------------------------------
	// 面に「グラデーション塗り」スタイルを指定する
	// ------------------------------------------------------------
	g.beginGradientFill(
		gradient_type,
		gradient_colors,
		gradient_alphas,
		gradient_ratios,
		gradient_mtx,
		spread_method,
		interpolation_method,
		focal_point_ratio
	);

	// ------------------------------------------------------------
	// 矩形を描画する
	// ------------------------------------------------------------
	g.drawRect( rect.x , rect.y , rect.width , rect.height );

});
 

■面に「テクスチャ塗り」スタイルを指定する

 
beginBitmapFill() メソッドを使用します。
 
Graphics.beginBitmapFill ( BitmapData , 行列 , リピート? , スムーズ? ) :void
第01引数 BitmapDataテクスチャを BitmapData オブジェクトで指定。
第02引数(略可)Matrixテクスチャの姿勢を行列で指定。
第03引数(略可)Booleanテクスチャのタイリング描画の有無を指定。
第04引数(略可)Booleanスムージングの有無を指定。
戻り値 voidなし
 
■第01引数 BitmapData
 
テクスチャとして使用する、ビットマップを指定します。
 
BitmapData クラスについては、こちらで解説しています。
 
■第02引数 テクスチャの姿勢
 
テクスチャの姿勢を、行列で指定します。
 
単位行列を指定した場合、基点は左上端で、等倍で表示されます。
 
■第03引数 タイリング描画
 
false を指定した場合、外周1ドットが無限に引き伸ばされます。
 
true を指定した場合、テクスチャは繰り返されます。
 
デフォルトは、true です。
 
false true
 
■第04引数 スムージング
 
false を指定した場合、ニアレストネイバーで表示されます。
 
true を指定した場合、バイリニアフィルタで表示されます。
 
デフォルトは、false です。
 
false true
 
■使用例
 
テクスチャと行列の関係を確認する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.GradientType;
import flash.display.SpreadMethod;
import flash.display.InterpolationMethod;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 埋め込みアセットクラス
// ------------------------------------------------------------
[Embed( source="./texture.png" )]
var MyBitmap:Class;

// ------------------------------------------------------------
// 埋め込んだ画像ファイルから、BitmapData オブジェクトを作成する (自作クラス "MyBitmap" )
// ------------------------------------------------------------
var bitmap_obj:Bitmap = new MyBitmap();
var bitmap_data:BitmapData = bitmap_obj.bitmapData;

// ------------------------------------------------------------
// 面のテクスチャ塗り設定
// ------------------------------------------------------------
// テクスチャの行列
var texture_mtx:Matrix = new Matrix();
// タイリング描画の有無
var texture_repeat:Boolean = false;
// スムージングの有無
var texture_smooth:Boolean = true;

// ------------------------------------------------------------
// テクスチャの行列
// ------------------------------------------------------------
// 単位行列化
texture_mtx.identity();
// 拡大縮小成分を乗算
texture_mtx.scale( 1.0 , 1.0 );
// 角度成分を乗算
texture_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
texture_mtx.translate( 0.0 , 0.0 );

// ------------------------------------------------------------
// 面に「テクスチャ塗り」スタイルを指定する
// ------------------------------------------------------------
g.beginBitmapFill( bitmap_data , texture_mtx , texture_repeat , texture_smooth );

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i:int = 0;
for(i=0;i < 16;i++){

	var pos_y:Number = i * 32.0;

	// 矩形を描画
	g.drawRect( 0.0 , pos_y , 512.0 , 30.0 );

}
 

■面に「シェーダー塗り」スタイルを指定する (Flash 10 以降)

 
beginShaderFill() メソッドを使用します。
 
Graphics.beginShaderFill ( Shader , 行列 ) :void
第01引数 ShaderShader オブジェクトを指定。
第02引数(略可)ArrayShader の姿勢を、行列で指定。
戻り値 voidなし
 
■第01引数 シェーダー
 
シェーダーについては、こちらで解説しています。
 
■第02引数 シェーダーの姿勢
 
シェーダー内部の座標系を、行列で変更できます。
 
outCoord() 関数の戻り値に反映されます。
 
■使用例(Pixel Bender 側のコード)
 
x座標値を赤色、y座標値を青色で出力する(描画スタイル用)

<languageVersion : 1.0;>

// ------------------------------------------------------------
// カーネルを宣言
// ------------------------------------------------------------
kernel MyKernel < namespace:""; vendor:""; version:1; > {

	// ------------------------------------------------------------
	// 出力変数の宣言(ピクセルカラー)
	// ------------------------------------------------------------
	output pixel4 dst;

	// ------------------------------------------------------------
	// ピクセルごとに実行される関数
	// ------------------------------------------------------------
	void evaluatePixel() {

		// 現在のピクセル位置を取得する
		float2 pos = outCoord();

		// x座標値を赤色、y座標値を青色に変換
		pixel4 color;
		color.r = pos.x / 255.0;
		color.g = 0.0;
		color.b = pos.y / 255.0;
		color.a = 1.0;

		// ピクセルカラーを出力する
		dst = color;
	}
}
 
■使用例(Flash 側のコード)
 
面に「シェーダー塗り」スタイルを指定する

import flash.utils.ByteArray;
import flash.display.Shader;
import flash.display.Shape;
import flash.display.Graphics;
import flash.geom.Matrix;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 埋め込みアセットクラス
// ------------------------------------------------------------
[Embed( source="./style.pbj" , mimeType="application/octet-stream" )]
var MyByteCode:Class;

// ------------------------------------------------------------
// 埋め込んだファイルから、ByteArray オブジェクトを作成する (自作クラス "MyByteCode" )
// ------------------------------------------------------------
var byte_code:ByteArray = new MyByteCode();

// ------------------------------------------------------------
// 面のシェーダー塗り設定
// ------------------------------------------------------------
// Shader オブジェクトを作成
var shader_obj:Shader = new Shader(byte_code);
// シェーダーの行列
var shader_mtx:Matrix = new Matrix();

// ------------------------------------------------------------
// シェーダーの行列
// ------------------------------------------------------------
// 単位行列化
shader_mtx.identity();
// 拡大縮小成分を乗算
shader_mtx.scale( 1.0 , 1.0 );
// 角度成分を乗算
shader_mtx.rotate( 0.0 * (Math.PI / 180) );
// 移動成分を乗算
shader_mtx.translate( 0.0 , 0.0 );

// ------------------------------------------------------------
// 面に「シェーダー塗り」スタイルを指定する
// ------------------------------------------------------------
g.beginShaderFill( shader_obj , shader_mtx );

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var i:int = 0;
for(i=0;i < 8;i++){

	var pos_y:Number = i * 32.0;

	// 矩形を描画
	g.drawRect( 0.0 , pos_y , 256.0 , 30.0 );

}
 


 
 

直線を描画する

 

サンプルをダウンロード
 
 


線描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 

直線を描画する

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.直線を描画する
 
lineTo() メソッドを使用します。
 
直前の描画パスと、今回の描画パスとの間に、直線を描画します。
 
Graphics.lineTo( x , y ) :void
第01引数 Numberx 座標を指定する
第02引数 Numbery 座標を指定する
戻り値 voidなし
 
 
3.直線を連続して描画する
 
lineTo() メソッドを繰り返し実行すると、連続して直線を描画できます。
 
途中で、線の描画スタイルを変更する事もできます。
 
 
使用例
 
座標(20,40)から(200,100)まで線を引く

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle (1 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
g.moveTo (  20.0 ,  40.0 );
// 直線を描画
g.lineTo ( 200.0 , 100.0 );
 
連続で線を引く

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle (1 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 直線を描画する
// ------------------------------------------------------------
// 開始位置
g.moveTo (  20.0 ,  40.0 );
// 直線を描画
g.lineTo ( 100.0 , 100.0 );
// 直線を描画
g.lineTo ( 200.0 ,  80.0 );
// 直線を描画
g.lineTo ( 300.0 , 150.0 );
 


 

曲線を描画する

 

サンプルをダウンロード
 
 


線描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 

2次ベジェ曲線を描画する

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.二次ベジェ曲線を描画する
 
curveTo() メソッドを使用します。
 
2次ベジェ曲線は、「始端」「制御」「終端」の3つの座標で制御します。
 
Graphics.curveTo( 制御X , 制御Y , 終端X , 終端Y ) :void
第01引数 Number(制御座標) x 座標を指定する
第02引数 Number(制御座標) y 座標を指定する
第03引数 Number(終端座標) x 座標を指定する
第04引数 Number(終端座標) y 座標を指定する
戻り値 voidなし
 
 
3.曲線を連続して描画する
 
curveTo() メソッドを繰り返し実行すると、連続して曲線を描画できます。
 
途中で、線の描画スタイルを変更する事もできます。
 
使用例
 
2次ベジェ曲線を描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.geom.Point;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle (1 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 2次ベジェ曲線を描画する
// ------------------------------------------------------------
// 3つの座標
var pos0:Point = new Point(  20.0 , 280.0 );
var pos1:Point = new Point( 150.0 ,  20.0 );
var pos2:Point = new Point( 400.0 , 150.0 );

// 開始位置
g.moveTo ( pos0.x,pos0.y );
// 2次ベジェ曲線を描画
g.curveTo ( pos1.x,pos1.y , pos2.x,pos2.y );
 

3次ベジェ曲線を描画する (Flash 11 以降)

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.三次ベジェ曲線を描画する
 
cubicCurveTo() メソッドを使用します。
 
3次ベジェ曲線は、「始端」「制御1」「制御2」「終端」の4つの座標で制御します。
 
Graphics.cubicCurveTo( 制御1X , 制御1Y , 制御2X , 制御2Y , 終端X , 終端Y ) :void
第01引数 Number(1つ目の制御座標) x 座標を指定する
第02引数 Number(1つ目の制御座標) y 座標を指定する
第03引数 Number(2つ目の制御座標) x 座標を指定する
第04引数 Number(2つ目の制御座標) y 座標を指定する
第05引数 Number(終端座標) x 座標を指定する
第06引数 Number(終端座標) y 座標を指定する
戻り値 voidなし
 
 
3.曲線を連続して描画する
 
cubicCurveTo() メソッドを繰り返し実行すると、連続して曲線を描画できます。
 
途中で、線の描画スタイルを変更する事もできます。
 
使用例
 
3次ベジェ曲線を描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.geom.Point;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
// ------------------------------------------------------------
g.lineStyle (1 , 0x000000 , 1.0);

// ------------------------------------------------------------
// 3次ベジェ曲線を描画する
// ------------------------------------------------------------
// 4つの座標
var pos0:Point = new Point(  20.0 , 280.0 );
var pos1:Point = new Point( 140.0 ,  40.0 );
var pos2:Point = new Point( 300.0 , 300.0 );
var pos3:Point = new Point( 380.0 ,  20.0 );

// 開始位置
g.moveTo ( pos0.x,pos0.y );
// 3次ベジェ曲線を描画
g.cubicCurveTo ( pos1.x,pos1.y , pos2.x,pos2.y , pos3.x,pos3.y );
 


 

マウスで自由に線を描く

 

サンプルをダウンロード
 


■マウスで自由に線を描く

 
1.マウスボタンの押下状態を取得する
 
以下のイベントを使用してマウスボタンの状態を監視します。
 
イベント名 解説
MOUSE_DOWN MouseEvent マウスの左ボタンを押した
MOUSE_UP MouseEvent マウスの左ボタンを離した
 
2.マウスカーソルの位置を取得する
 
こちらで解説しています。
 
3.ドラッグ操作中に直線を描画する
 
ドラッグ操作中であれば、「以前の位置」と「現在の位置」との間に、直線を描画します。
 

■実装例

 
ドラッグ操作で、線を描く

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.LineScaleMode;
import flash.display.CapsStyle;
import flash.display.JointStyle;
import flash.geom.Point;
import flash.events.Event;
import flash.events.MouseEvent;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

(function():void{

	// マウス座標のリスト
	var mouse_pos_list:Array = new Array();

	// ------------------------------------------------------------
	// マウスの左ボタンを押すと実行されるイベント
	// ------------------------------------------------------------
	stage.addEventListener(MouseEvent.MOUSE_DOWN , function (e:MouseEvent):void {
		// マウスカーソルの位置を取得
		var pos:Point = new Point(e.localX , e.localY);
		// 座標リストを初期化 (要素数:1)
		mouse_pos_list = [pos];
	});

	// ------------------------------------------------------------
	// マウスの左ボタンを離すと実行されるイベント
	// ------------------------------------------------------------
	stage.addEventListener(MouseEvent.MOUSE_UP , function (e:MouseEvent):void {
		// 座標リストをクリア (要素数:0)
		mouse_pos_list = new Array();
	});

	// ------------------------------------------------------------
	// マウスカーソルを移動すると実行されるイベント
	// ------------------------------------------------------------
	stage.addEventListener(MouseEvent.MOUSE_MOVE , function (e:MouseEvent):void {
		// ドラッグ操作中か
		if(mouse_pos_list.length < 1) return;

		// マウスカーソルの位置を取得
		var pos:Point = new Point(e.localX , e.localY);
		// 座標リストに追加
		mouse_pos_list.push(pos);
	});

	// ------------------------------------------------------------
	// 毎フレーム実行されるイベント
	// ------------------------------------------------------------
	stage.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

		// ------------------------------------------------------------
		// 座標リストの総数
		// ------------------------------------------------------------
		var num:int = mouse_pos_list.length
		if(num < 2) return;

		// ------------------------------------------------------------
		// 線に「単一色塗り」スタイルを指定する
		// ------------------------------------------------------------
		g.lineStyle ( 5 , 0x000000 , 1.0 , true , LineScaleMode.NORMAL , CapsStyle.ROUND , JointStyle.ROUND );

		// ------------------------------------------------------------
		// 開始位置を指定する
		// ------------------------------------------------------------
		var pos:Point = mouse_pos_list[0];
		g.moveTo ( pos.x , pos.y );

		// ------------------------------------------------------------
		// 連続で直線を描画する
		// ------------------------------------------------------------
		var i:int;
		for(i=1;i < num;i++){
			pos = mouse_pos_list[i];

			// 直線を描画する
			g.lineTo ( pos.x , pos.y );
		}

		// ------------------------------------------------------------
		// 座標リストを初期化する
		// ------------------------------------------------------------
		mouse_pos_list = [pos];
	});

})();
 


 

描画パスで囲んで面を描画する

 

サンプルをダウンロード
 


面描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 

描画パスで囲んで面を描画する

 
1.描画パスを開始する
 
moveTo() メソッドを使用します。
 
2.描画パスを指定する
 
描画パスを指定する方法は、以下の種類があります。
 
何度か呼び出して、好きなだけ描画パスを増やします。
 
メソッド名 説明
lineTo() 直線を描画する
curveTo() 2次ベジェ曲線を描画する
cubicCurveTo() 3次ベジェ曲線を描画する
drawPath() 描画パス(線関連)をまとめて高速描画する
 
3.描画パスを閉じる
 
endFill() メソッドを使用します。
 
最後と最初に指定した描画パスは繋がれ、面となります。
 
描画パスで囲んだ内側は、塗りつぶされます。
 
 
使用例
 
描画パスで囲んで面を描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.geom.Point;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 描画パスで囲んで面を描画する
// ------------------------------------------------------------
// 描画パスを開始する
g.moveTo ( 25.0 , 100.0 );

// 描画パスを指定して囲む
g.lineTo (  75.0 ,  35.0 );
g.lineTo ( 165.0 ,  55.0 );
g.lineTo ( 325.0 ,  25.0 );
g.lineTo ( 375.0 ,  95.0 );
g.lineTo ( 265.0 , 165.0 );
g.lineTo ( 205.0 , 135.0 );
g.lineTo (  75.0 , 165.0 );

// 描画パスを閉じて、塗りつぶしを確定する
g.endFill ();
 

パスで囲んで図形を描画する

 
■正多角形を描画する
 
正多角形を描画する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// 正多角形を描画する関数
// ------------------------------------------------------------
function GraphicsDrawRegularPolygon (g:Graphics , x:Number , y:Number , radius:Number , vertex:uint , angle:Number ):Boolean {

	if(vertex < 3) return false;

	angle -= Math.PI * 0.5;
	g.moveTo (
		x + Math.cos(angle) * radius,
		y + Math.sin(angle) * radius
	);

	var a:Number = 1 / vertex * Math.PI * 2;
	var i:int;
	for(i=0;i < vertex;i++){
		angle += a;
		g.lineTo(
			x + Math.cos(angle) * radius,
			y + Math.sin(angle) * radius
		);
	}

	return true;
}


// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 正多角形を描画する
// ------------------------------------------------------------
GraphicsDrawRegularPolygon ( g , 120.0 , 150.0 , 100.0 , 5 ,  15.0 * (Math.PI/180) );
GraphicsDrawRegularPolygon ( g , 350.0 , 150.0 ,  80.0 , 7 ,   0.0 * (Math.PI/180) );
 
■星を描画する
 
星を描画する関数

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// 星を描画する関数
// ------------------------------------------------------------
function GraphicsDrawStar (g:Graphics , x:Number , y:Number , radius:Number , vertex:uint , angle:Number , indent:Number ):Boolean {

	if(vertex < 3) return false;

	vertex *= 2;
	angle -= Math.PI * 0.5;
	g.moveTo (
		x + Math.cos(angle) * radius,
		y + Math.sin(angle) * radius
	);

	var a:Number = 1 / vertex * Math.PI * 2;
	var r:Number;
	var i:int;
	for(i=0;i < vertex;i++){
		angle += a;
		r = (i % 2) ? (radius):(radius * indent);
		g.lineTo(
			x + Math.cos(angle) * r,
			y + Math.sin(angle) * r
		);
	}

	return true;
}


// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 星を描画する
// ------------------------------------------------------------
GraphicsDrawStar ( g , 120.0 , 150.0 , 100.0 , 5 ,  15.0 * (Math.PI/180) , 0.5 );
GraphicsDrawStar ( g , 350.0 , 150.0 ,  80.0 , 7 ,   0.0 * (Math.PI/180) , 0.8 );
 


 
 

円を描画する

 

サンプルをダウンロード
 


図形描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 

円を描画する

 
drawCircle() メソッドを使用します。
 
厳密な正円ではありません。8個の二次ベジェ曲線で囲んだ近似図形です。
 
Graphics.drawCircle( 中心X , 中心Y , 半径 ) :void
第01引数 Number(中心座標) x 座標を指定する
第02引数 Number(中心座標) y 座標を指定する
第03引数 Number円の半径を指定する
戻り値 voidなし
 
 
使用例
 
円を描画する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 円を描画する
// ------------------------------------------------------------
g.drawCircle ( 200.0 , 150.0 , 100.0 );
 

図形描画の事後処理について

 
■面の塗りつぶしを確定する
 
endFill() メソッドを使用します。
 


 

楕円を描画する

 

サンプルをダウンロード
 


図形描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 

楕円を描画する

 
drawEllipse() メソッドを使用します。
 
Graphics.drawEllipse( 左上X , 左上Y , 幅 , 高さ ) :void
第01引数 Number(左上座標) x 座標を指定する
第02引数 Number(左上座標) y 座標を指定する
第03引数 Number楕円の幅を指定する
第04引数 Number楕円の高さを指定する
戻り値 voidなし
 
 
使用例
 
楕円を描画する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 楕円を描画する
// ------------------------------------------------------------
g.drawEllipse ( 10.0 , 10.0 , 250.0 , 150.0 );
 

図形描画の事後処理について

 
■面の塗りつぶしを確定する
 
endFill() メソッドを使用します。
 


 

矩形を描画する

 

サンプルをダウンロード
 


図形描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 

矩形を描画する

 
drawRect() メソッドを使用します。
 
Graphics.drawRect( 左上X , 左上Y , 幅 , 高さ ) :void
第01引数 Number(左上座標) x 座標を指定する
第02引数 Number(左上座標) y 座標を指定する
第03引数 Number矩形の幅を指定する
第04引数 Number矩形の高さを指定する
戻り値 voidなし
 
 
使用例
 
矩形を描画する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
g.drawRect ( 10.0 , 10.0 , 250.0 , 150.0 );
 

図形描画の事後処理について

 
■面の塗りつぶしを確定する
 
endFill() メソッドを使用します。
 


 

角丸矩形を描画する

 

サンプルをダウンロード
 


図形描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 

角丸矩形を描画する

 
drawRoundRect() メソッドを使用します。
 
Graphics.drawRoundRect( 左上X , 左上Y , 矩形幅 , 矩形高さ , 楕円幅 , 楕円高さ ) :void
第01引数 Number(左上座標) x 座標を指定する
第02引数 Number(左上座標) y 座標を指定する
第03引数 Number矩形部分の幅を指定する
第04引数 Number矩形部分の高さを指定する
第05引数 Number角丸部分を楕円と見立て、幅を指定する
第06引数 Number角丸部分を楕円と見立て、高さを指定する
戻り値 voidなし
 
 
使用例
 
角丸矩形を描画する

import flash.display.Shape;
import flash.display.Graphics;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 角丸矩形を描画する
// ------------------------------------------------------------
g.drawRoundRect ( 10.0 , 10.0 , 250.0 , 150.0 , 60.0 , 40.0 );
 

図形描画の事後処理について

 
■面の塗りつぶしを確定する
 
endFill() メソッドを使用します。
 


 

トライアングルリストを描画する

 


トライアングルリスト描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 

トライアングルリストを描画する

 
drawTriangles() メソッドを使用します。
 
Graphics.drawTriangles( vertices , indices , uvtData , culling ) :void
第01引数 Vector.<Number>頂点バッファを指定する
第02引数 Vector.<int>頂点インデックスバッファを指定する
第03引数 Vector.<Number>UVT データを指定する
第04引数 Stringカリングを指定する (TriangleCulling.*)
戻り値 voidなし
 

(第01引数) 頂点バッファについて

 
■頂点バッファを用意する
 
2Dの座標データを格納します。
 
(x,y) | (x,y) | (x,y) | (x,y) | (x,y) ...
 
■頂点バッファと三角形の関係について
 
格納順序と三角形の関係は、第02引数で決まります。
 
■ z 値の指定について
 
z 値は、第03引数に含める事ができます。
 

(第02引数) 頂点インデックスバッファについて

 
■第02引数に「null」を指定した場合
 
null を指定した場合、三角形は頂点バッファの格納順です。
 
(0,1) (2,3) (4,5) | (6,7) (8,9) (10,11) | (12,13) (14,15) (16,17) ...
 
この場合、第01引数の総数は、6 の倍数である必要があります。
 
 
■第02引数に「インデックスバッファ」を指定した場合
 
任意の格納位置にある座標を選んで、三角形とする事ができます。
 
同じ座標が存在するストリップ形状などで利用すると効果的です。
 
指定するインデックス値は、座標単位です。
 
例えば、4 を指定した場合、x:(8 番地の値) , y:(9 番地の値) となります。
 
例えば、10 を指定した場合、x:(20 番地の値) , y:(21 番地の値) となります。
 
第02引数の総数は、3 の倍数である必要があります。
 
(0,1,3) | (3,1,4) | (1,2,4) | (4,2,5) ...
 
 

(第03引数) UVT データについて

 
■ UV 座標について
 
UV 座標とは、テクスチャ上の座標です。
 
左上端を原点(0,0)、右下端を(1,1) とした座標系です。
 
U は、水平方向の位置 (0.0 ~ 1.0) です。
 
V は、垂直方向の位置 (0.0 ~ 1.0) です。
 
ピクセル値ではなく率値なので、解像度の違う画像に差し替えても、マッピングがずれないなどのメリットがあります。
 
■第03引数に「null」を指定した場合
 
面の描画スタイルは、そのまま動作します。
 
■第03引数に「UV データ」を指定した場合
 
テクスチャ塗りのみが動作します。
 
テクスチャ塗りの行列は、無視されます。
 
テクスチャの姿勢は、UV 値によって決定します。(三角形ごとに)
 
■「UV データ」を用意する(2Dの場合)
 
2Dで動作する条件です。
 
(第03引数の総数) = (第01引数の総数)
 
第01引数の座標単位の順番で、「UV 座標」を格納します。
 
(u,v) | (u,v) | (u,v) | (u,v) | (u,v) ...
 
■「UVT データ」を用意する(3Dの場合)
 
3Dで動作する条件です。
 
(第03引数の総数) = ((第01引数の総数) * 1.5)
 
第01引数の座標単位の順番で、「UV 座標と t 値」を格納します。
 
(u,v,t) | (u,v,t) | (u,v,t) | (u,v,t) | (u,v,t) ...
 
t 値は、「パースペクティブ座標系での、頂点座標の z 値」から計算できます。
 
(t値) = (1 / (z値))
 
t 値は、テクスチャの投影変換にのみ作用します。
 
三角形の描画順序が変化したり、大きさが歪曲する事はありません。
 

(第04引数) カリングについて

 
カリングには、以下の種類があります。
 
デフォルトは、TriangleCulling.NONE です。
 
定数文字列説明
TriangleCulling.NONE"none"すべての三角形は描画される。
TriangleCulling.POSITIVE"positive"囲み方向が時計回りである三角形は描画しない。
TriangleCulling.NEGATIVE"negative"囲み方向が反時計回りである三角形は描画しない。
 
カリングなしカリングあり
 

drawTriangles() メソッドの3Dの描画について

 
■一般的なプリミティブ描画との違い
 
drawTriangles() メソッドでは、最終的な2D座標系のデータを指定します。
 
3D関連の演算は、すべて自前で行う必要があります。
 
■隠面消去について
 
隠面消去のアルゴリズムは、「Zソート」となります。
 
「Zバッファ」はありません。
 
t 値の指定によって、三角形の描画順が変化する事はありません。
 
自前で、z 値を考慮しながら、格納順序を入れ替える必要があります。
 
線は、面塗りよりも必ず手前に描画されます。
 
面塗りによって、線が描き潰される事はありません。
 

使用例

 
2Dトライアングルリストの描画例
 
「頂点バッファ」を使って描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.TriangleCulling;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 頂点バッファを用意する
// ------------------------------------------------------------
var vertices:Vector.<Number> = Vector.<Number>([

	// 1つ目の三角形
	 35.0,  50.0, // 1つ目の座標 (x,y)
	205.0,  35.0, // 2つ目の座標 (x,y)
	135.0, 165.0, // 3つ目の座標 (x,y)

	// 2つ目の三角形
	325.0,  35.0, // 1つ目の座標 (x,y)
	405.0, 145.0, // 2つ目の座標 (x,y)
	225.0, 165.0  // 3つ目の座標 (x,y)

]);

// ------------------------------------------------------------
// トライアングルリストを描画する
// ------------------------------------------------------------
g.drawTriangles ( vertices , null , null , TriangleCulling.NONE );
 
「頂点バッファ」と「頂点インデックスバッファ」を使って描画する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.TriangleCulling;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// 描画スタイルを指定する
// ------------------------------------------------------------
// 線に「単一色塗り」スタイルを指定する
g.lineStyle (5 , 0x000000 , 1.0);
// 面に「単一色塗り」スタイルを指定する
g.beginFill (0x808080 , 1.0);

// ------------------------------------------------------------
// 頂点バッファを用意する
// ------------------------------------------------------------
var vertices:Vector.<Number> = Vector.<Number>([
	 35.0,  35.0, // 0 番目の座標 (x,y)
	165.0,  40.0, // 1 番目の座標 (x,y)
	330.0,  30.0, // 2 番目の座標 (x,y)
	 45.0, 180.0, // 3 番目の座標 (x,y)
	185.0, 185.0, // 4 番目の座標 (x,y)
	335.0, 165.0, // 5 番目の座標 (x,y)
	 55.0, 310.0, // 6 番目の座標 (x,y)
	180.0, 320.0, // 7 番目の座標 (x,y)
	345.0, 315.0  // 8 番目の座標 (x,y)
]);

// ------------------------------------------------------------
// 頂点インデックスバッファを用意する
// ------------------------------------------------------------
var indices:Vector.<int> = Vector.<int>([
	0,1,3, // 1つ目の三角形
	3,1,4, // 2つ目の三角形
	1,2,4, // 3つ目の三角形
	4,2,5, // 4つ目の三角形
	3,4,6, // 5つ目の三角形
	6,4,7, // 6つ目の三角形
	4,5,7, // 7つ目の三角形
	7,5,8  // 8つ目の三角形
]);

// ------------------------------------------------------------
// トライアングルリストを描画する
// ------------------------------------------------------------
g.drawTriangles ( vertices , indices , null , TriangleCulling.NONE );
 
3Dトライアングルリストの描画例
 
立方体を描画する

import flash.display.Shape;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.display.Graphics;
import flash.display.TriangleCulling;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.geom.Vector3D;
import flash.geom.Matrix3D;
import flash.events.Event;

// ------------------------------------------------------------
// ステージの設定
// ------------------------------------------------------------
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

// ------------------------------------------------------------
// 3Dのデータ
// ------------------------------------------------------------
var mesh_obj:Object = {
	vertex:{
		data:Vector.<Number>([
			-1.0, -1.0, -1.0,
			 1.0, -1.0, -1.0,
			-1.0,  1.0, -1.0,
			 1.0,  1.0, -1.0,
			-1.0, -1.0,  1.0,
			 1.0, -1.0,  1.0,
			-1.0,  1.0,  1.0,
			 1.0,  1.0,  1.0
		]),
		indices:[
			0,1,2,
			2,1,3,
			2,3,6,
			6,3,7,
			1,5,3,
			3,5,7,
			1,0,5,
			5,0,4,
			5,4,7,
			7,4,6,
			0,2,4,
			4,2,6
		]
	},
	uv:{
		data:[
			{ u:0.0, v:0.0 },
			{ u:0.5, v:0.0 },
			{ u:1.0, v:0.0 },
			{ u:0.0, v:0.5 },
			{ u:0.5, v:0.5 },
			{ u:1.0, v:0.5 },
			{ u:0.0, v:1.0 },
			{ u:0.5, v:1.0 },
			{ u:1.0, v:1.0 }
		],
		indices:[
			0,1,3,
			3,1,4,
			3,4,6,
			6,4,7,
			0,2,6,
			6,2,8,
			1,2,4,
			4,2,5,
			4,5,7,
			7,5,8,
			0,2,6,
			6,2,8
		]
	}
};

// ------------------------------------------------------------
// テクスチャを用意する
// ------------------------------------------------------------
var bitmap_data:BitmapData = (function():BitmapData{

	// BitmapData オブジェクトを作成する
	var bitmap_data:BitmapData = new BitmapData( 16 , 16 , true , 0x00000000 );

	// ノイズを描画する
	bitmap_data.noise(
		Math.floor(Math.random() * 0x7FFFFFFF),
		0,
		255,
		(BitmapDataChannel.ALPHA),
		true
	);

	return bitmap_data;
})();

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

(function():void{

	var i:int;
	var j:int;
	var k:int;
	var p:int;
	var mtx:Matrix3D;
	var vtx:Vector.<Number>;

	// メッシュの行列
	var mesh_mtx:Matrix3D = new Matrix3D();

	// カメラ行列
	var view_mtx:Matrix3D = new Matrix3D();

	// 3Dデータの参照
	var vertex_data:Vector.<Number> = (mesh_obj.vertex.data);
	var vertex_indices:Array = (mesh_obj.vertex.indices);
	var uv_data:Array = (mesh_obj.uv.data);
	var uv_indices:Array = (mesh_obj.uv.indices);

	// ------------------------------------------------------------
	// 毎フレーム実行されるイベント
	// ------------------------------------------------------------
	stage.addEventListener(Event.ENTER_FRAME , function (e:Event):void{

		// ------------------------------------------------------------
		// 少しずつ回転
		// ------------------------------------------------------------
		mesh_mtx.prependRotation (0.05, Vector3D.Z_AXIS);
		mesh_mtx.prependRotation (0.1 , Vector3D.X_AXIS);
		mesh_mtx.appendRotation  (1.0 , Vector3D.Y_AXIS);
		mesh_mtx.position = new Vector3D(0.0 , 0.0, 4.0);

		// ------------------------------------------------------------
		// 頂点データをカメラ座標系に変換
		// ------------------------------------------------------------
		vtx = new Vector.<Number>();
		mtx = view_mtx.clone();
		mtx.invert();
		mtx.prepend(mesh_mtx);
		mtx.transformVectors(vertex_data , vtx);

		// ------------------------------------------------------------
		// 投影変換とビューポート変換
		// ------------------------------------------------------------
		var fov:Number = 60; // 視野角
		var ofs_x:Number = stage.stageWidth  * 0.5;
		var ofs_y:Number = stage.stageHeight * 0.5;
		var scale:Number = 1 / Math.tan(fov * 0.5 * Math.PI / 180) * ofs_y;

		var num:int = vertex_data.length / 3;
		for(i=0;i < num;i++){
			p = i * 3;
			vtx[p + 0] = (vtx[p + 0] / vtx[p + 2]) * scale + ofs_x;
			vtx[p + 1] = (vtx[p + 1] / vtx[p + 2]) * scale + ofs_y;
		}

		// ------------------------------------------------------------
		// Z ソート
		// ------------------------------------------------------------
		var depths:Array = new Array();
		num = vertex_indices.length / 3;
		for(i=0;i < num;i++){
			p = i * 3;
			depths.push({
				z:(
					vtx[vertex_indices[p + 0] * 3 + 2] +
					vtx[vertex_indices[p + 1] * 3 + 2] +
					vtx[vertex_indices[p + 2] * 3 + 2]
				) / 3.0
			});
		}
		depths = depths.sortOn("z" , (Array.NUMERIC | Array.DESCENDING | Array.RETURNINDEXEDARRAY));

		// ------------------------------------------------------------
		// 奥から順番にバッファに出力
		// ------------------------------------------------------------
		var vertices:Vector.<Number> = new Vector.<Number>();
		var uvt_data:Vector.<Number> = new Vector.<Number>();

		num = vertex_indices.length / 3;
		for(i=0;i < num;i++){
			for(j=0;j < 3;j++){
				k = (depths[i] * 3) + j;
				p = vertex_indices[k] * 3;
				var uv:Object = uv_data[uv_indices[k]];
				vertices.push(vtx[p + 0]); // x
				vertices.push(vtx[p + 1]); // y
				uvt_data.push(uv.u); // u
				uvt_data.push(uv.v); // v
				uvt_data.push(1 / vtx[p + 2]); // t
			}
		}

		// ------------------------------------------------------------
		// 描画済みグラフィックをすべてクリアする
		// ------------------------------------------------------------
		g.clear();

		// ------------------------------------------------------------
		// 描画スタイルを指定する
		// ------------------------------------------------------------
		// 線に「単一色塗り」スタイルを指定する
		g.lineStyle (0 , 0x000000 , 1.0);
		// 面に「テクスチャ塗り」スタイルを指定する
		g.beginBitmapFill (bitmap_data , null , true , false);

		// ------------------------------------------------------------
		// トライアングルリストを描画する
		// ------------------------------------------------------------
		g.drawTriangles ( vertices , null , uvt_data , TriangleCulling.NONE );

	});

})();
 


 

GraphicsData について (Flash Player 11.6 以降)

 
 


■ GraphicsData のリストを取得する

 
readGraphicsData() メソッドを使用します。
 
ベクター関連の実際のデータを取得できます。
 
Adobe Flash にて描いた絵などの解析もできます。
 
Graphics.readGraphicsData( 再帰? ) :Vector.<IGraphicsData>
第01引数(略可)Boolean取得結果に、子孫表示オブジェクトもすべて含めるか?
戻り値 Vector.<IGraphicsData>GraphicsData のリストが得られる
 
使用例
 
GraphicsData のリストを取得する

import flash.display.Shape;
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.IGraphicsData;

// ------------------------------------------------------------
// Document オブジェクト(メインタイムライン)を取得する
// ------------------------------------------------------------
var document_obj:Sprite = stage.getChildAt(0) as Sprite;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = function ():Shape{

	// Shape オブジェクトを作成
	var shape:Shape = new Shape();

	// Graphics オブジェクトを取得
	var g:Graphics = shape.graphics;

	// 線に「単一色塗り」スタイルを指定する
	g.lineStyle (5 , 0x000000 , 1.0);
	// 面に「単一色塗り」スタイルを指定する
	g.beginFill (0x808080 , 1.0);

	// 矩形を描画する
	g.drawRect ( 0.0 , 0.0 , 100.0 , 100.0 );

	return shape;
}();

// Document(メインタイムライン)に配置
document_obj.addChild(shape);

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = document_obj.graphics;

// ------------------------------------------------------------
// GraphicsData のリストを取得する
// ------------------------------------------------------------
var graphics_data_list:Vector.<IGraphicsData> = g.readGraphicsData(true);

// 出力テスト
trace(graphics_data_list);
 

■ GraphicsData のリストを使って描画する

 
drawGraphicsData() メソッドを使用します。
 
Graphics.drawGraphicsData( graphicsData ) :void
第01引数(略可)Vector.<IGraphicsData>GraphicsData リストを指定
戻り値 voidなし
 
使用例
 
GraphicsData のリストを取得する

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.IGraphicsData;
import flash.display.GraphicsStroke;
import flash.display.GraphicsSolidFill;
import flash.display.GraphicsPath;
import flash.display.GraphicsEndFill;

// ------------------------------------------------------------
// Shape オブジェクトを作成
// ------------------------------------------------------------
var shape:Shape = new Shape();

// ステージに配置
stage.addChild(shape);

// ------------------------------------------------------------
// GraphicsData リストを用意する
// ------------------------------------------------------------
var graphics_data_list:Vector.<IGraphicsData> = function ():Vector.<IGraphicsData>{

	// ------------------------------------------------------------
	// 線の「単一色塗り」スタイル
	// ------------------------------------------------------------
	var style_stroke:GraphicsStroke = new GraphicsStroke();
 	style_stroke.thickness = 5;
	style_stroke.fill = new GraphicsSolidFill(0x000000 , 1.0);

	// ------------------------------------------------------------
	// 面の「単一色塗り」スタイル
	// ------------------------------------------------------------
	var style_fill_solid:GraphicsSolidFill = new GraphicsSolidFill();
 	style_fill_solid.color = 0x808080;
	style_fill_solid.alpha = 1.0;

	// ------------------------------------------------------------
	// 描画パスのコマンドと座標データ
	// ------------------------------------------------------------
	var draw_path:GraphicsPath = new GraphicsPath();
	draw_path.moveTo(219.9 , 123.5);
	draw_path.lineTo(147.5 , 216.1);
	draw_path.lineTo( 37.1 , 175.9);
	draw_path.lineTo( 41.2 ,  58.4);
	draw_path.lineTo(154.2 ,  26.0);
	draw_path.lineTo(219.9 , 123.5);

	// ------------------------------------------------------------
	// 描画パスを閉じて、塗りつぶしを確定
	// ------------------------------------------------------------
	var end_fill:GraphicsEndFill = new GraphicsEndFill();

	// ------------------------------------------------------------
	// GraphicsData リストを作成
	// ------------------------------------------------------------
	var list:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
	list.push(style_stroke);
	list.push(style_fill_solid);
	list.push(draw_path);
	list.push(end_fill);

	return list;
}();

// ------------------------------------------------------------
// Graphics オブジェクトを取得
// ------------------------------------------------------------
var g:Graphics = shape.graphics;

// ------------------------------------------------------------
// GraphicsData のリストを使って描画する
// ------------------------------------------------------------
g.drawGraphicsData(graphics_data_list);
 

■ GraphicsData のサブクラス一覧

 
IGraphicsData を継承するクラスは、以下の種類があります。
 
■線の描画スタイル
 
メソッド名 説明
GraphicsStroke 線の描画スタイル
 
■面の描画スタイル(線の塗りスタイル)
 
メソッド名 説明
GraphicsSolidFill 塗りスタイル(単一色)
GraphicsGradientFill 塗りスタイル(グラデーション)
GraphicsBitmapFill 塗りスタイル(テクスチャ)
GraphicsShaderFill 塗りスタイル(シェーダー)
 
■描画関連
 
メソッド名 説明
GraphicsPath 描画パス(線関連)をまとめて高速描画する
GraphicsTrianglePath トライアングルリストを描画する
GraphicsEndFill 描画パスを閉じて、面の塗りつぶしを確定する
 

■ GraphicsStroke クラスについて

 
GraphicsStroke クラスは、線の描画スタイルに該当します。
 
GraphicsStroke クラスでは、線の基礎的な設定を行います。
 
線の塗りは、別のクラスから設定します。
 
■コンストラクタ
 
new GraphicsStroke( thickness , pixelHinting , scaleMode , caps , joints , miterLimit , fill ) :GraphicsStroke
第01引数(略可)Numberthickness プロパティと同等。
第02引数(略可)BooleanpixelHinting プロパティと同等。
第03引数(略可)StringscaleMode プロパティと同等。
第04引数(略可)Stringcaps プロパティと同等。
第05引数(略可)Stringjoints プロパティと同等。
第06引数(略可)NumbermiterLimit プロパティと同等。
第07引数(略可)IGraphicsFillfill プロパティと同等。
戻り値 GraphicsStrokeGraphicsStroke オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
thickness Number 線の太さ (0 ~ 255) (0 で極細線)
pixelHinting Boolean ヒンティングの有無
scaleMode String スケールモード (LineScaleMode.*)
caps String 線先の種類 (CapsStyle.*)
joints String 角の種類 (JointStyle.*)
miterLimit Number マイターの尖りの延長サイズ (1.0 ~)
fill IGraphicsFill 線の塗りの設定。
 
■線の塗りの設定(fill プロパティ)
 
線の塗りを設定します。
 
IGraphicsFill を継承するクラスは、以下の種類があります。
 
メソッド名 説明
GraphicsSolidFill 塗りスタイル(単一色)
GraphicsGradientFill 塗りスタイル(グラデーション)
GraphicsBitmapFill 塗りスタイル(テクスチャ)
GraphicsShaderFill 塗りスタイル(シェーダー)
 

■ GraphicsSolidFill クラスについて

 
GraphicsSolidFill クラスは、面の描画スタイルの一種です。
 
単一色塗りに該当します。
 
線の単一色塗りとしても機能します。
 
■コンストラクタ
 
new GraphicsSolidFill( color , alpha ) :GraphicsSolidFill
第01引数(略可)uintcolor プロパティと同等。
第02引数(略可)Numberalpha プロパティと同等。
戻り値 GraphicsSolidFillGraphicsSolidFill オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
color uint 塗りの色 (RGBカラー値)
alpha Number 塗りの透明度 (0.0 ~ 1.0)
 

■ GraphicsGradientFill クラスについて

 
GraphicsGradientFill クラスは、面の描画スタイルの一種です。
 
グラデーション塗りに該当します。
 
線のグラデーション塗りとしても機能します。
 
■コンストラクタ
 
new GraphicsGradientFill( type , colors , alphas , ratios , matrix , spreadMethod , interpolationMethod , focalPointRatio ) :GraphicsGradientFill
第01引数(略可)Stringtype プロパティと同等。
第02引数(略可)Arraycolors プロパティと同等。
第01引数(略可)Arrayalphas プロパティと同等。
第02引数(略可)Arrayratios プロパティと同等。
第01引数(略可)Matrixmatrix プロパティと同等。
第02引数(略可)StringspreadMethod プロパティと同等。
第01引数(略可)StringinterpolationMethod プロパティと同等。
第02引数(略可)NumberfocalPointRatio プロパティと同等。
戻り値 GraphicsGradientFillGraphicsGradientFill オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
type Number グラデーションの種類 (GradientType.*)
colors Array グラデーションの RGB カラー (0xFFFFFF) リスト
alphas Array グラデーションの透明度 (0.0 ~ 1.0) リスト
ratios Array グラデーションの配分 (0 ~ 255) リスト
matrix Matrix グラデーションの姿勢を、行列で指定
spreadMethod String スプレッドの種類 (SpreadMethod.*)
interpolationMethod String 補間の種類 (InterpolationMethod.*)
focalPointRatio Number 焦点位置 (-1.0 ~ 1.0)
 

■ GraphicsBitmapFill クラスについて

 
GraphicsBitmapFill クラスは、面の描画スタイルの一種です。
 
テクスチャ塗りに該当します。
 
線のテクスチャ塗りとしても機能します。
 
■コンストラクタ
 
new GraphicsBitmapFill( bitmapData , matrix , repeat , smooth ) :GraphicsBitmapFill
第01引数(略可)BitmapDatabitmapData プロパティと同等。
第02引数(略可)Matrixmatrix プロパティと同等。
第03引数(略可)Booleanrepeat プロパティと同等。
第04引数(略可)Booleansmooth プロパティと同等。
戻り値 GraphicsBitmapFillGraphicsBitmapFill オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
bitmapData BitmapData テクスチャを BitmapData オブジェクトで指定
matrix Matrix テクスチャの姿勢を行列で指定
repeat Boolean テクスチャのタイリング描画の有無を指定
smooth Boolean スムージングの有無を指定
 

■ GraphicsShaderFill クラスについて

 
GraphicsShaderFill クラスは、面の描画スタイルの一種です。
 
シェーダー塗りに該当します。
 
線のシェーダー塗りとしても機能します。
 
■コンストラクタ
 
new GraphicsShaderFill( shader , matrix ) :GraphicsShaderFill
第01引数(略可)Shadershader プロパティと同等。
第02引数(略可)Matrixmatrix プロパティと同等。
戻り値 GraphicsShaderFillGraphicsShaderFill オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
shader Shader Shader オブジェクトを指定
matrix Matrix Shader の姿勢を、行列で指定
 

■ GraphicsPath クラスについて

 
GraphicsPath クラスは、drawPath() メソッドに該当します。
 
描画パス(線関連)をまとめて高速描画します。
 
■コンストラクタ
 
new GraphicsPath( commands , data , winding ) :GraphicsPath
第01引数(略可)Vector.<int>commands プロパティと同等。
第02引数(略可)Vector.<Number>data プロパティと同等。
第03引数(略可)Stringwinding プロパティと同等。
戻り値 GraphicsPathGraphicsPath オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
commands Vector.<int> コマンドのリスト (GraphicsPathCommand.*)
data Vector.<Number> 座標データのリスト(コマンドの順序通り)
winding String ワインディング規則を指定 (GraphicsPathWinding.*)
 
■メソッド一覧
 
以下の出力用メソッドを呼び出すと、リストデータを生成できます。
 
commands、data プロパティの最後尾に、1回分のデータが追加されます。
 
メソッド名 効果
moveTo() MOVE_TO コマンドを出力。引数は moveTo() メソッドと同等
lineTo() LINE_TO コマンドを出力。引数は lineTo() メソッドと同等
curveTo() CURVE_TO コマンドを出力。引数は curveTo() メソッドと同等
cubicCurveTo() CUBIC_CURVE_TO コマンドを出力。引数は cubicCurveTo() メソッドと同等
 
メソッド名 効果
wideMoveTo() WIDE_MOVE_TO コマンドを出力。引数は moveTo() メソッドと同等
wideLineTo() WIDE_LINE_TO コマンドを出力。引数は lineTo() メソッドと同等
 

■ GraphicsTrianglePath クラスについて

 
GraphicsTrianglePath クラスは、drawTriangles() メソッドに該当します。
 
トライアングルリストを描画します。
 
■コンストラクタ
 
new GraphicsTrianglePath( vertices , indices , uvtData , culling ) :GraphicsTrianglePath
第01引数(略可)Vector.<Number>vertices プロパティと同等。
第02引数(略可)Vector.<int>indices プロパティと同等。
第03引数(略可)Vector.<Number>uvtData プロパティと同等。
第04引数(略可)Stringculling プロパティと同等。
戻り値 GraphicsTrianglePathGraphicsTrianglePath オブジェクトが得られる
 
■プロパティ一覧
 
プロパティ名 効果
vertices Vector.<Number> 頂点バッファを指定する
indices Vector.<int> 頂点インデックスバッファを指定する
uvtData Vector.<Number> UVT データを指定する
culling String カリングを指定する (TriangleCulling.*)
 

■ GraphicsEndFill クラスについて

 
GraphicsEndFill クラスは、endFill() メソッドに該当します。
 
描画パスを閉じて、面の塗りつぶしを確定します。
 
■コンストラクタ
 
new GraphicsEndFill( ) :GraphicsEndFill
引数 voidなし
戻り値 GraphicsEndFillGraphicsEndFill オブジェクトが得られる