Graphics クラスについて
・ | Graphics クラスについて |
・ | 描画した物をすべてクリアする |
・ | 線の描画スタイルについて |
・ | 面の描画スタイルについて |
・ | 描画パスを使って線を描画する |
・ | 描画パスで囲んで面を描画する |
・ | 図形を描画する |
・ | トライアングルリストを描画する |
・ | GraphicsData について |
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 オブジェクトを取得する
■描画機能をサポートする表示オブジェクト
一部の表示オブジェクトは、描画機能をサポートしています。
■ 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 オブジェクトを作成する
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. | 0 | 何もしません |
GraphicsPathCommand. | 1 | moveTo() に相当 |
GraphicsPathCommand. | 2 | lineTo() に相当 |
GraphicsPathCommand. | 3 | curveTo() に相当 |
GraphicsPathCommand. | 6 | cubicCurveTo() に相当 |
■第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. | "evenOdd" | デフォルトの描画規則です。 面が偶数回重なった場合、塗りは無しに変化します。 面が奇数回重なった場合、塗りは有りに変化します。 |
GraphicsPathWinding. | "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" | 拡大縮小で線の太さが変わります |
LineScaleMode. | "horizontal" | 横方向のみ拡大縮小で線の太さが変わります |
LineScaleMode. | "vertical" | 縦方向のみ拡大縮小で線の太さが変わります |
LineScaleMode. | "none" | 拡大縮小で線の太さは変わりません |
■第06引数 線先の種類
線先の種類です。
デフォルトは、CapsStyle.ROUND です。
定数 | 文字列 | 説明 |
CapsStyle. | "none" | 線の先にキャップなし |
CapsStyle. | "round" | 線の先に丸いキャップ |
CapsStyle. | "square" | 線の先に四角いキャップ |
NONE | ROUND | SQUARE |
■第07引数 角の種類
角(結合部)の種類です。
デフォルトは、JointStyle.ROUND です。
定数 | 文字列 | 説明 |
JointStyle.MITER | "miter" | 角をマイター結合 |
JointStyle.BEVEL | "bevel" | 角をベベル結合 |
JointStyle.ROUND | "round" | 角をラウンド結合 |
MITER | BEVEL | ROUND |
■第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" | 円状グラデーション |
LINEAR | RADIAL |
■第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" | 端のカラーを引き伸ばし |
SpreadMethod. | "reflect" | 反転して繰り返し |
SpreadMethod. | "repeat" | 同じカラーで繰り返し |
PAD | REFLECT | REPEAT |
■第07引数 補間の種類
補間の種類です。
デフォルトは、InterpolationMethod.RGB です。
定数 | 文字列 | 説明 |
InterpolationMethod. | "linearRGB" | 線形でRGB補間 |
InterpolationMethod. | "rgb" | RGBの補間 |
LINEAR_RGB | RGB |
■第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引数 | Shader | Shader オブジェクトを指定。 |
第02引数(略可) | Array | Shader の姿勢を、行列で指定。 |
戻り値 | 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 );
}
■線の描画スタイルをリセットする
■使用例
線の描画スタイルをリセットする
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" | 円状グラデーション |
LINEAR | RADIAL |
■第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" | 端のカラーを引き伸ばし |
SpreadMethod. | "reflect" | 反転して繰り返し |
SpreadMethod. | "repeat" | 同じカラーで繰り返し |
PAD | REFLECT | REPEAT |
■第07引数 補間の種類
補間の種類です。
デフォルトは、InterpolationMethod.RGB です。
定数 | 文字列 | 説明 |
InterpolationMethod. | "linearRGB" | 線形でRGB補間 |
InterpolationMethod. | "rgb" | RGBの補間 |
LINEAR_RGB | RGB |
■第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引数 | Shader | Shader オブジェクトを指定。 |
第02引数(略可) | Array | Shader の姿勢を、行列で指定。 |
戻り値 | 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引数 | Number | x 座標を指定する |
第02引数 | Number | y 座標を指定する |
戻り値 | 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" | すべての三角形は描画される。 |
TriangleCulling. | "positive" | 囲み方向が時計回りである三角形は描画しない。 |
TriangleCulling. | "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引数(略可) | Number | thickness プロパティと同等。 |
第02引数(略可) | Boolean | pixelHinting プロパティと同等。 |
第03引数(略可) | String | scaleMode プロパティと同等。 |
第04引数(略可) | String | caps プロパティと同等。 |
第05引数(略可) | String | joints プロパティと同等。 |
第06引数(略可) | Number | miterLimit プロパティと同等。 |
第07引数(略可) | IGraphicsFill | fill プロパティと同等。 |
戻り値 | GraphicsStroke | GraphicsStroke オブジェクトが得られる |
■プロパティ一覧
プロパティ名 | 型 | 効果 |
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引数(略可) | uint | color プロパティと同等。 |
第02引数(略可) | Number | alpha プロパティと同等。 |
戻り値 | GraphicsSolidFill | GraphicsSolidFill オブジェクトが得られる |
■プロパティ一覧
プロパティ名 | 型 | 効果 |
color | uint | 塗りの色 (RGBカラー値) |
alpha | Number | 塗りの透明度 (0.0 ~ 1.0) |
■ GraphicsGradientFill クラスについて
GraphicsGradientFill クラスは、面の描画スタイルの一種です。
グラデーション塗りに該当します。
線のグラデーション塗りとしても機能します。
■コンストラクタ
new GraphicsGradientFill( type , colors , alphas , ratios , matrix , spreadMethod , interpolationMethod , focalPointRatio ) :GraphicsGradientFill
第01引数(略可) | String | type プロパティと同等。 |
第02引数(略可) | Array | colors プロパティと同等。 |
第01引数(略可) | Array | alphas プロパティと同等。 |
第02引数(略可) | Array | ratios プロパティと同等。 |
第01引数(略可) | Matrix | matrix プロパティと同等。 |
第02引数(略可) | String | spreadMethod プロパティと同等。 |
第01引数(略可) | String | interpolationMethod プロパティと同等。 |
第02引数(略可) | Number | focalPointRatio プロパティと同等。 |
戻り値 | GraphicsGradientFill | GraphicsGradientFill オブジェクトが得られる |
■プロパティ一覧
プロパティ名 | 型 | 効果 |
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引数(略可) | BitmapData | bitmapData プロパティと同等。 |
第02引数(略可) | Matrix | matrix プロパティと同等。 |
第03引数(略可) | Boolean | repeat プロパティと同等。 |
第04引数(略可) | Boolean | smooth プロパティと同等。 |
戻り値 | GraphicsBitmapFill | GraphicsBitmapFill オブジェクトが得られる |
■プロパティ一覧
プロパティ名 | 型 | 効果 |
bitmapData | BitmapData | テクスチャを BitmapData オブジェクトで指定 |
matrix | Matrix | テクスチャの姿勢を行列で指定 |
repeat | Boolean | テクスチャのタイリング描画の有無を指定 |
smooth | Boolean | スムージングの有無を指定 |
■ GraphicsShaderFill クラスについて
GraphicsShaderFill クラスは、面の描画スタイルの一種です。
シェーダー塗りに該当します。
線のシェーダー塗りとしても機能します。
■コンストラクタ
new GraphicsShaderFill( shader , matrix ) :GraphicsShaderFill
第01引数(略可) | Shader | shader プロパティと同等。 |
第02引数(略可) | Matrix | matrix プロパティと同等。 |
戻り値 | GraphicsShaderFill | GraphicsShaderFill オブジェクトが得られる |
■プロパティ一覧
■ GraphicsPath クラスについて
■コンストラクタ
new GraphicsPath( commands , data , winding ) :GraphicsPath
第01引数(略可) | Vector.<int> | commands プロパティと同等。 |
第02引数(略可) | Vector.<Number> | data プロパティと同等。 |
第03引数(略可) | String | winding プロパティと同等。 |
戻り値 | GraphicsPath | GraphicsPath オブジェクトが得られる |
■プロパティ一覧
プロパティ名 | 型 | 効果 |
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 クラスについて
■コンストラクタ
new GraphicsTrianglePath( vertices , indices , uvtData , culling ) :GraphicsTrianglePath
第01引数(略可) | Vector.<Number> | vertices プロパティと同等。 |
第02引数(略可) | Vector.<int> | indices プロパティと同等。 |
第03引数(略可) | Vector.<Number> | uvtData プロパティと同等。 |
第04引数(略可) | String | culling プロパティと同等。 |
戻り値 | GraphicsTrianglePath | GraphicsTrianglePath オブジェクトが得られる |
■プロパティ一覧
プロパティ名 | 型 | 効果 |
vertices | Vector.<Number> | 頂点バッファを指定する |
indices | Vector.<int> | 頂点インデックスバッファを指定する |
uvtData | Vector.<Number> | UVT データを指定する |
culling | String | カリングを指定する (TriangleCulling.*) |
■ GraphicsEndFill クラスについて
■コンストラクタ
new GraphicsEndFill( ) :GraphicsEndFill
引数 | void | なし |
戻り値 | GraphicsEndFill | GraphicsEndFill オブジェクトが得られる |