HAKUHIN's home page
更新履歴
 
 



グラフィックスとは?
 


■ Graphics とは?

線を引いたり、面を塗りつぶしたりといった描画系の機能が集まったクラスです。

ムービークリップやスプライト、シェイプなどのクラスには、 graphics というプロパティがあります。 このプロパティにGraphics オブジェクトが保持されているので、そこからメソッドを呼び出して使用します。
 
 
スプライトから Graphics オブジェクトを取り出してメソッドを呼び出す

var sprite = new Sprite();
var graphic : Graphics = sprite.graphics;

graphic.clear();
 
■描画に最適な Shape クラス

描画メソッドの機能だけ使用するオブジェクトを作成したい場合は、Shape クラスが最も軽量になり最適です。
 
Shape クラスをインスタンス化する

var shape : Shape = new Shape();
stage.addChild(shape);
var g : Graphics = shape.graphics;
 
Shape は以下のクラスから派生しています。
 
Object
↓派生
EventDispatcher
↓派生
DisplayObject
↓派生
Shape
 
Graphics オブジェクトを graphics プロパティに保持しているクラス(主なクラスを抜粋)

MovieClip , Sprite , Shape , MainTimeline
 


 

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


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

描画したものをすべて消すには clear() メソッドを呼び出します。

このメソッドは、色や線の太さなどの スタイルの情報もすべてクリアされるので、このメソッドを呼び出した後はスタイルを再設定する必要があります。
 
グラフィックス.clear ();
第01引数 なし
戻り値 なし
 
描画したものをすべて消す

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// スタイルを設定
g.moveTo (20, 40);
g.lineTo (100, 200);		// 線を描画


g.clear ();			// すべてクリア
g.lineStyle (1, 0x000000, 1.0);	// スタイルを再設定
 


 

線のスタイルについて
 


■線のスタイルについて

線のスタイルは、線の太さを設定することができます。線のスタイルには単一カラーとグラデーションカラーの2種類あります。デフォルトでは null になっているため なんらかのスタイルを設定しないと、描画されません。
 


 



■単一色カラーのラインスタイル

単一色カラーのラインスタイル設定をするには、lineStyle() メソッドを使用します。
 
グラフィックス.lineStyle ( 太さ , 線の色 , 透明度 , ヒンディング , "スケールモード" , "線の先の種類" , "線の角の種類" , マイター限度 );
第01引数 線の太さ 0 ~ 255 ( 0 = 極細線)
第02引数(略可)カラー 0xFFFFFF
第03引数(略可)透明度 0.0 ~ 1.0
第04引数(略可)線をヒンティングするかをBoolean型で指定
第05引数(略可)スケールモード LineScaleMode.*
第06引数(略可)線の先の種類 LineScaleMode.*
第07引数(略可)角の種類 JointStyle.*
第08引数(略可)第07引数をマイターに設定した時に、角の切り取られる限度 (0 ~ 255)
戻り値 なし
 
■第05引数 スケールモードの種類

第05引数で設定するスケールモードの種類です。
 
定数文字説明
LineScaleMode.NORMAL"normal"拡大縮小で線の太さが変わります
LineScaleMode.HORIZONTAL"horizontal"横方向のみ拡大縮小で線の太さが変わります
LineScaleMode.VERTICAL"vertical"縦方向のみ拡大縮小で線の太さが変わります
LineScaleMode.NONE"none"拡大縮小で線の太さは変わりません
 
■第06引数 線の先の種類

第06引数で設定する線の先の種類です。
 
定数文字説明
CapsStyle.NONE"none"線の先にキャップなし
CapsStyle.ROUND"round"線の先に丸いキャップ
CapsStyle.SQUARE"square"線の先に四角いキャップ
 
"none""round""square"
 
■第07引数 角の種類

第06引数で設定する線の先の種類です。
 
定数文字説明
JointStyle.MITER"miter"角をマイター結合
JointStyle.BEVEL"bevel"角をベベル結合
JointStyle.ROUND"round"角をラウンド結合
 
"miter""bevel""round"
 
使用例です。
 
単一色でラインを描画

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (10, 0x000000, 1.0);	// 線のスタイル
g.moveTo (0, 0);
g.lineTo (100, 100);
 



■グラデーションカラーのラインスタイル

グラデーションカラーでラインスタイルの設定をするには、lineGradientStyle() メソッドを使用します。
 
このメソッドを使用する前に、事前にlineStyle() メソッドを呼び出してラインスタイルを設定しておく必要があります。ラインスタイルを設定してない状態で lineGradientStyle() メソッドを呼び出しても何も起こりません。
 
グラフィックス.lineGradientStyle (
"種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補完" , 焦点 );
第01引数 グラデーションの種類 GradientType.*
第02引数 カラーを配列にして指定 (0xFFFFFF)
第03引数 透明度を配列にして指定 (0.0 ~ 1.0)
第04引数 比率配分 (0 ~ 255、昇順にする)
第05引数(略可)Matrix オブジェクト
第06引数(略可)スプレッドの種類 SpreadMethod.*
第07引数(略可)補完の種類 InterpolationMethod.*
第08引数(略可)焦点位置 (-1.0 ~ 1.0)
戻り値 なし
 
■第01引数 グラデーションの種類

第 01 引数で設定するグラデーションの種類です。
 
定数文字説明
GradientType.LINEAR"linear"線状グラデーション
GradientType.RADIAL"radial"円状グラデーション
 
■第02引数 カラーの設定

グラデーションで使用するカラーの数だけ配列を確保して、0xFFFFFF 形式で指定します。例えば下の画像のように5つカラーを持つグラデーションを作りたい場合は以下のようなパラメータになります。
 
 
 
第02引数で設定するカラー成分

[0xFF3333, 0xFFFF33, 0x33FF33, 0x33FFFF, 0x3333FF]
 
■第03引数 透明度の設定

第02引数で設定したカラーと同じ順番で、今度は透明度を指定します。範囲は 0.0 ~ 1.0 となっています。
 
 
 
第03引数で設定する透明度成分

[     0.0 ,     0.25 ,      0.5 ,     0.75 ,      1.0]
 
■第04引数 レシオの設定

第02引数で設定したカラーと同じ順番で、今度はグラデーションの位置を指定します。下の画像のように、左であるほど 0 中央であるほど 127 右であるほど 255 として、 どのカラーがどの場所にくるかを指定します。順番は左から昇順になっている必要があります。
 
 
 
第04引数で設定するレシオ成分

[0, 64, 128, 196, 255]
 
■第05引数 行列の設定

正規化された行列では以下のようなカラーの姿勢をとることになります。赤い線が x 成分のベクトル、 青い線が y 成分のベクトル、線の接点が座標です。線形グラデーションでは、y 軸方向にグラデーションが伸びることがわかります。
 
線形グラデーション円形グラデーション
 
この行列情報を元にカラーグラデーションがFlash 上に配置されます。
 
正規化されている場合、原点に配置され、線状グラデーションの場合 x 方向の幅が 1638.4 ピクセルのサイズになり、 放射状グラデーションの場合直径 1638.4 ピクセルのサイズになります。
(※資料が無いので正確な数値は不明ですが 1638.4 でちょうど一致するようです)
 
四角形がFlashPlayerのサイズ、長細い円柱が今回描きたい線
 
そしてこの状態で図のように線を引いたとしたら、このグラデーション位置にくる色が写し取られるように描画されます。
 
実際に描画された状態
 
このスタイルを使って線をたくさん引いてみると、グラデーションが浮かび上がることからもわかります。
 
 
例えば、線状グラデーションで以下のような行列を指定した場合、描画されるグラデーションは下の図の円筒部分になります。
 
 
x方向に0.1倍 y 方向に1.0倍拡大して、60度回転し、座標(100,200)に移動する行列

var m : Matrix = new Matrix();
m.identity();			// 正規化
m.scale(0.1,1.0);			// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);	// 行列 *= 回転
m.translate(100,200);		// 行列 *= 平行移動

 
■第06引数 スプレッドの種類

第 06 引数で設定するスプレッドの種類です。
 
定数文字説明
SpreadMethod.PAD"pad"端のカラーを引き伸ばし
SpreadMethod.REFLECT"reflect"反転して繰り返し
SpreadMethod.REPEAT"repeat"同じカラーで繰り返し
 
"pad""reflect""repeat"
 
■第07引数 補完の種類

第 07 引数で設定する補完の種類です。
 
定数文字説明
InterpolationMethod.LINEAR_RGB"linearRGB"線形でRGB補間
InterpolationMethod.RGB"rgb"RGBの補間
 
"linearRGB""rgb"
 
■第08引数 焦点位置を設定

グラデーションの焦点位置を行列の x 成分方向にずらします。 -1.0 ~ 1.0 までの数値で指定します。
 
-1.0 ~~ 0.0 ~~ 1.0
 
使用例です。
 
グラデーションでラインを描画

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (10, 0x000000, 1.0);	// 線の太さ
g.lineGradientStyle (
	GradientType.LINEAR,
	[0xFF0000 , 0xFFFF00 , 0x00FF00 , 0x00FFFF , 0x0000FF],
	[     0.0 ,     0.25 ,      0.5 ,     0.75 ,      1.0],
	[       0 ,       64 ,      127 ,      192 ,      255],
	new Matrix(
		1 , 0 ,
		0 , 1 ,
		0 , 0
	),
	SpreadMethod.PAD,
	InterpolationMethod.LINEAR_RGB,
	0.0
);

g.moveTo (0, 0);
g.lineTo (100, 100);
 


 

塗りのスタイルについて
 


■塗りのスタイルについて

塗りのスタイルには単一カラーとグラデーションカラーとテクスチャの3種類あります。デフォルトでは null になっているため なんらかのスタイルを設定しないと、描画されません。
 



 



■単一色カラーのフィルスタイル

単一色カラーでフィルスタイルの設定をするには、beginFill メソッドを使用します。
 
グラフィックス.beginFill ( 色 , 透明度 );
第01引数 カラー 0xFFFFFF
第02引数(略可)透明度 0.0 ~ 1.0
戻り値 なし
 
単一カラーで面を描画

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.beginFill (0xFF0000, 1.0);	// 単一色のスタイル設定

g.drawRect(50, 100, 300, 100);	// 矩形を描画
 



■グラデーションカラーのフィルスタイル

グラデーションカラーでフィルスタイルの設定をするには、beginGradientFill メソッドを使用します。
 
グラフィックス.beginGradientFill ( "種類" , [カラー] , [透明度] , [配分] , 行列 , "スプレッド" , "補完" , 焦点 );
第01引数 グラデーションの種類 GradientType.*
第02引数 カラーを配列にして指定
第03引数 透明度を配列にして指定 (0.0 ~ 1.0)
第04引数 比率配分 (0 ~ 255を指定、昇順にする)
第05引数(略可)Matrix オブジェクト
第06引数(略可)スプレッドの種類 SpreadMethod.*
第07引数(略可)補完の種類 InterpolationMethod.*
第08引数(略可)焦点位置 (-1.0 ~ 1.0)
戻り値 なし
 
引数のパラメータは線のスタイルである lineGradientStyle メソッドとまったく同じになるため変わりにこちらをご覧ください。
 
グラデーションで面を描画

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.beginGradientFill (
	GradientType.LINEAR,
	[0xFF0000 , 0xFFFF00 , 0x00FF00 , 0x00FFFF , 0x0000FF],
	[       0 ,       25 ,       50 ,       75 ,      100],
	[       0 ,       64 ,      127 ,      192 ,      255],
	new Matrix(
		1 , 0 ,
		0 , 1 ,
		0 , 0
	),
	SpreadMethod.PAD,
	InterpolationMethod.LINEAR_RGB,
	0.0
);

g.drawRect(50, 100, 300, 100);	// 矩形を描画
 



■テクスチャ塗りのフィルスタイル

テクスチャ塗りでフィルスタイルの設定をするには、beginBitmapFill メソッドを使用します。
 
グラフィックス.beginBitmapFill ( BitmapData , Matrix , テクスチャの繰り返し , スムージング );
第01引数 テクスチャのソースとなるBitmapData インスタンスを指定
第02引数(略可)行列を指定
第03引数(略可)true = テクスチャを繰り返す、false = テクスチャの端の 1 ドットを引き伸ばす
第04引数(略可)true = スムージングあり(補間) , false = スムージングなし
戻り値 なし
 
■第02引数 行列の設定

正規化された行列では、テクスチャの左上の座標が原点に配置され、x 方向の成分と y 方向の成分の長さが 1 の状態で テクスチャが等倍のサイズになります。
 
 
例えば、以下のように行列を作成した場合に描画されるテクスチャは下の図のようになります。四角い枠がFlashの画面で円の枠が今回描きたい面の範囲です。

赤の線が行列のx方向の成分で青の線が行列の y 方向の成分です。赤と青の交点が、行列の座標成分になります。
 
 
x方向に2.0倍 y 方向に1.0倍拡大して、60度回転し、座標(300,100)に移動する行列

var m : Matrix = new Matrix();
m.identity();			// 正規化
m.scale(2.0,1.0);			// 行列 *= スケーリング
m.rotate(Math.PI / 180 * 60);	// 行列 *= 回転
m.translate(300,100);		// 行列 *= 平行移動
 
■第03引数 繰り返しの設定

テクスチャを繰り返して張るか、端の1ドットを引き伸ばして張るかを指定します。
 
truefalse
 
使用例です。
 
ビットマップデータを使って面を描画

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

var bmpData = new BitmapData(20,20,false,0xFF0000);
var matrix = new Matrix(
		1 , 0,
		0 , 1,
		0 , 0
	);
	

g.beginBitmapFill ( bmpData , matrix , false , true );

g.drawRect(50, 100, 300, 100);	// 矩形を描画
 


 

直線を引く
 

サンプルをダウンロード
 


1.線のスタイルを指定

まず事前処理として、
「線のスタイルについて」 から好きな線のスタイルを設定します。
 
2.開始位置を指定

moveTo() メソッドを呼び出すと、線の開始座標を指定することができます。
 
グラフィックス.moveTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
3.開始位置から指定した座標まで線を引く

lineTo() メソッドを呼び出すと終了座標を指定することができます。

このメソッドを呼び出した時点で開始点から終了点まで直線が描画されます。
 
そして、指定した終了座標が次の開始位置となります。この後 lineTo() メソッドを何度も呼び出す事で連続して直線を引くことができます。
 
グラフィックス.lineTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
使用例です。
 
座標(20,40)から(100,200)まで線を引く

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);
g.moveTo (20, 40);
g.lineTo (100, 200);
 
座標(0,0)から(100,200)まで、座標(100,200)から(400,300)まで線を引く

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (5, 0x000000, 1.0);
g.moveTo (0, 0);
g.lineTo (100, 200);
g.lineTo (400, 300);
 
線の方向にそってグラデーションを描画する

var p_x1 = 70;	// 開始座標
var p_y1 = 120;

var p_x2 = 240;	// 終了座標
var p_y2 = 190;

var border = 30;	// 線の太さ


var rad = Math.atan2(p_y2 - p_y1 , p_x2 - p_x1) - Math.PI / 2;
var m : Matrix = new Matrix();
m.identity();               	// 正規化
m.scale(1.0 / 1638.4 * border,1.0);	// 行列 *= スケーリング
m.rotate(rad);			// 行列 *= 回転
m.translate( p_x1,p_y1);		// 行列 *= 平行移動

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (border, 0x000000, 1.0);	// 線の太さ
g.lineGradientStyle (
	GradientType.LINEAR,
	[0xFF0000 , 0xFFFF00 , 0xFF0000],
	[     1.0 ,      1.0 ,      1.0],
	[       0 ,      127 ,      255],
	m
);

g.moveTo (p_x1, p_y1);
g.lineTo (p_x2, p_y2);
 


 

曲線を描画する
 

サンプルをダウンロード
 


■曲線を引く

曲線を引くには以下のメソッドを繰り返し呼び出します。アルゴリズムは二次ベジェ曲線となります。3つの制御点で曲線を描画します。
 
自前で曲線を描画したい場合はこちら(※AS1.0) を参考にどうぞ。
 
1.線のスタイルを指定

まず事前処理として、
「線のスタイルについて」 から好きな線のスタイルを設定します。
 
2.開始位置を指定

moveTo() メソッドを呼び出すと、線の開始点を指定することができます。
 
グラフィックス.moveTo ( x座標 , y座標 );
第01引数 描画の開始 x 座標
第02引数 描画の開始 y 座標
戻り値 なし
 
3.制御点と終了点を指定する

curveTo() を呼び出すと、制御座標、終了座標を設定できます。
 
このメソッドを呼び出した時点で、開始座標、制御座標、終了座標を通る曲線が描画されます。
 
終了座標が次の開始位置となります。この後 curveTo() メソッドを何度も呼び出すと連続して曲線を描画することができます。
 
グラフィックス.curveTo ( x 座標 , y 座標, x 座標 , y 座標 );
第01引数 コントロールポイントのx座標
第02引数 コントロールポイントのy座標
第03引数 曲線の終点であるx座標
第04引数 曲線の終点であるy座標
戻り値 なし
 
使用例です。
 
(50,40)から(100,80)を成分として(150,40)まで曲線を引く

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);
g.moveTo  ( 50, 40);
g.curveTo (100, 80, 150, 40);
 
(50,40)から(100,80)を成分として(150,40)まで、(150,40)から(200,0)を成分として(250,40)まで、曲線を引く

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (5, 0x000000, 1.0);
g.moveTo  (50, 40);
g.curveTo (100, 80, 150, 40);
g.curveTo (200,  0, 250, 40);
 


 

円を描画する
 

サンプルをダウンロード
 


■円を描画する

正円を描画するには以下のメソッドを使用します。
 
1.線と面のスタイルを指定

まず事前処理として、
「線のスタイルについて」 から好きな線のスタイルを設定します。
「面のスタイルについて」 から好きな面のスタイルを設定します。
 
2.円を描画する

drawCircle() メソッドを使用すると、指定した座標を中心にして半径分の正円が描画されます。
 
グラフィックス.drawCircle ( x 座標 , y 座標, 半径 );
第01引数 円の中心の x 座標
第02引数 円の中心の y 座標
第03引数 円の半径
戻り値 なし
 
使用例です。
 
(100,200)を中心とした半径 50 の円を描画する

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定


g.drawCircle  ( 100, 200 , 50);
 
グラデーションで円を描画する

var p_x = 70;	// 中心座標
var p_y = 120;

var radius = 30;	// 線の太さ


var scale = 1.0 / 1638.4 * radius * 2;
var m : Matrix = new Matrix();
m.identity();		// 正規化
m.scale(scale , scale);	// 行列 *= スケーリング
m.translate( p_x,p_y);	// 行列 *= 平行移動

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル
g.beginGradientFill (		// 面のスタイル
	GradientType.RADIAL,
	[0xFF0000 , 0xFFFF00 , 0x0000FF],
	[     1.0 ,      1.0 ,      1.0],
	[       0 ,      127 ,      255],
	m
);

g.drawCircle (p_x, p_y , radius);
 
この後、何らかの描画メソッドを呼び出して上に重ねて面を描画すると、『塗られていない』部分が『塗り』状態になり『塗り』部分が『塗られていない』状態になります。

この現象を回避するには面のスタイルを再設定するか、endFill() メソッドを呼び出して面描画を終了します。
 


 

楕円を描画する
 

サンプルをダウンロード
 


■楕円を描画する

楕円を描画するには以下のメソッドを使用します。
 
■1.線と面のスタイルを指定

まず事前処理として、
「線のスタイルについて」 から好きな線のスタイルを設定します。
「面のスタイルについて」 から好きな面のスタイルを設定します。
 
■2.楕円を描画する

drawEllipse() メソッドを呼び出すと、指定した左上座標から幅と高さでできる矩形の中に収まる楕円を描画します。
 
グラフィックス.drawEllipse ( x 座標 , y 座標 , 幅 , 高さ );
第01引数 円を矩形とした左上の x 座標
第02引数 円を矩形とした左上の y 座標
第03引数
第04引数 高さ
戻り値 なし
 
使用例です。
 
(100,200)を左上として幅 150 高さ 75 でできる楕円を描画する

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定


g.drawEllipse  ( 100, 200 , 150 , 75);
 
グラデーションで楕円を描画する

var p_x = 100;	// 左上座標
var p_y = 120;

var w = 150;	// 幅
var h = 75;	// 高さ


var d = 1.0 / 1638.4;
var m : Matrix = new Matrix();
m.identity();				// 正規化
m.scale(d * w , d * h);			// 行列 *= スケーリング
m.translate(p_x + w / 2 , p_y + h / 2);	// 行列 *= 平行移動

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル
g.beginGradientFill (		// 面のスタイル
	GradientType.RADIAL,
	[0xFF0000 , 0xFFFF00 , 0x0000FF],
	[     1.0 ,      1.0 ,      1.0],
	[       0 ,      127 ,      255],
	m
);

g.drawEllipse (p_x , p_y , w , h);
 
この後、何らかの描画メソッドを呼び出して上に重ねて面を描画すると、『塗られていない』部分が『塗り』状態になり『塗り』部分が『塗られていない』状態になります。

この現象を回避するには面のスタイルを再設定するか、endFill() メソッドを呼び出して面描画を終了します。
 


 

矩形を描画する
 

サンプルをダウンロード
 


■矩形を描画する

矩形を描画するには以下のメソッドを使用します。
 
1.線と面のスタイルを指定

まず事前処理として、
「線のスタイルについて」から好きな線のスタイルを設定します。
「面のスタイルについて」から好きな面のスタイルを設定します。
 
2.矩形を描画する

drawRect() メソッドを呼び出すと、指定した左上座標から幅と高さでできる矩形を描画します。
 
グラフィックス.drawRect ( x 座標 , y 座標 , 幅 , 高さ );
第01引数 左上の x 座標
第02引数 左上の y 座標
第03引数
第04引数 高さ
戻り値 なし
 
使用例です。
 
(100,200)を左上として幅 150 高さ 75 でできる矩形を描画する

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定


g.drawRect  ( 100, 200 , 150 , 75);
 
グラデーションで矩形を描画する

var p_x = 100;	// 左上座標
var p_y = 120;

var w = 150;	// 幅
var h = 75;	// 高さ


var d = 1.0 / 1638.4;
var m : Matrix = new Matrix();
m.identity();				// 正規化
m.scale(d * w , d * h);			// 行列 *= スケーリング
m.translate(p_x + w / 2 , p_y + h / 2);	// 行列 *= 平行移動

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル
g.beginGradientFill (		// 面のスタイル
	GradientType.RADIAL,
	[0xFF0000 , 0xFFFF00 , 0x0000FF],
	[     1.0 ,      1.0 ,      1.0],
	[       0 ,      127 ,      255],
	m
);

g.drawRect (p_x , p_y , w , h);
 
この後、何らかの描画メソッドを呼び出して上に重ねて面を描画すると、『塗られていない』部分が『塗り』状態になり『塗り』部分が『塗られていない』状態になります。

この現象を回避するには面のスタイルを再設定するか、endFill() メソッドを呼び出して面描画を終了します。
 


 

角丸矩形を描画する
 

サンプルをダウンロード
 


■角丸矩形を描画する

角丸矩形を描画するには以下のメソッドを使用します。
 
1.線と面のスタイルを指定

まず事前処理として、
「線のスタイルについて」から好きな線のスタイルを設定します。
「面のスタイルについて」から好きな面のスタイルを設定します。
 
2.角丸矩形を描画する

drawRoundRect() メソッドを呼び出すと、指定した左上座標から幅と高さでできる角丸矩形を描画します。
 
グラフィックス.drawRoundRect ( x 座標 , y 座標 , 幅 , 高さ , 角丸部分の幅 , 角丸部分の高さ );
第01引数 左上の x 座標
第02引数 左上の y 座標
第03引数
第04引数 高さ
第05引数 角丸部分の幅
第06引数 角丸部分の高さ
戻り値 なし
 
使用例です。
 
(100,200)を左上として幅 150 高さ 75 、角丸部分が 幅 20 高さ 20 でできる角丸矩形を描画する

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定


g.drawRoundRect  ( 100, 200 , 150 , 75 , 20 , 20);
 
グラデーションで角丸矩形を描画する

var p_x = 100;	// 左上座標
var p_y = 120;

var w = 150;	// 幅
var h = 75;	// 高さ


var d = 1.0 / 1638.4;
var m : Matrix = new Matrix();
m.identity();				// 正規化
m.scale(d * w , d * h);			// 行列 *= スケーリング
m.translate(p_x + w / 2 , p_y + h / 2);	// 行列 *= 平行移動

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル
g.beginGradientFill (		// 面のスタイル
	GradientType.RADIAL,
	[0xFF0000 , 0xFFFF00 , 0x0000FF],
	[     1.0 ,      1.0 ,      1.0],
	[       0 ,      127 ,      255],
	m
);

g.drawRoundRect (p_x , p_y , w , h , 20 , 20);
 
この後、何らかの描画メソッドを呼び出して上に重ねて面を描画すると、『塗られていない』部分が『塗り』状態になり『塗り』部分が『塗られていない』状態になります。

この現象を回避するには面のスタイルを再設定するか、endFill() メソッドを呼び出して面描画を終了します。
 


 

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

サンプルをダウンロード
 


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

直線と曲線を組み合わせて図形を作ります。囲まれた中の面を塗って描画することができます。
 
1.線と面のスタイルを指定

まず事前処理として、
「線のスタイルについて」から好きな線のスタイルを設定します。
「面のスタイルについて」から好きな面のスタイルを設定します。
 
2.開始位置を指定

moveTo() メソッドを呼び出すと、線の開始座標を指定することができます。
 
グラフィックス.moveTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
3.開始位置から指定した座標まで線を引く

lineTo() メソッドを呼び出すと、開始座標から終了座標まで直線が描画されます。
 
指定した終了座標が次の開始座標となり、 lineTo() メソッドを何度も呼び出すと連続して直線を引くことができます。
 
グラフィックス.lineTo ( x座標 , y座標 );
第01引数 x 座標
第02引数 y 座標
戻り値 なし
 
curveTo() を呼び出すと、開始座標から、制御座標、終了座標を通る二次ベジェ曲線が描画されます。
 
指定した終了座標が次の開始座標となり、 curveTo() メソッドを何度も呼び出すと連続して曲線を引くことができます。
 
グラフィックス.curveTo ( x 座標 , y 座標, x 座標 , y 座標 );
第01引数 コントロールポイントのx座標
第02引数 コントロールポイントのy座標
第03引数 曲線の終点であるx座標
第04引数 曲線の終点であるy座標
戻り値 なし
 
4.パスを閉じて囲まれた中の面を描画する

最後に endFill() を呼び出すと、線で囲まれた中の面が描画されます。

このメソッドを呼び出すと面のスタイル情報がクリアされるためスタイルを再設定する必要があります。

グラフィックス.endFill();
第01引数 なし
戻り値 なし
 
使用例です。
 
(100,50)から (200,150) まで矩形を描画する

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定

g.moveTo (100, 50);
g.lineTo (100, 150);
g.lineTo (200, 150);
g.lineTo (200, 50);	


g.endFill();
 
多角形を描画する

var i;
var px = 200;		// 中心 y 座標
var py = 100;		// 中心 x 座標
var radius = 100;		// 半径
var num = 10;		// 頂点数

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定

g.moveTo (px + radius, py);
for(i=0;i < num;i++){
	var rad = i / num * Math.PI * 2;
	g.lineTo(
		px + Math.cos(rad) * radius,
		py + Math.sin(rad) * radius
	);
}

g.endFill();
 
星を描画する

var i;
var px = 200;		// 中心 y 座標
var py = 100;		// 中心 x 座標
var radius = 100;		// 半径
var num = 10;		// 頂点数
var d = 0.5;		// 折り線の度合い(0.0~1.0)

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;

g.lineStyle (1, 0x000000, 1.0);	// 線のスタイル指定
g.beginFill (0xFF0000, 1.0);	// 面のスタイル設定

g.moveTo (px + radius, py);

var l = num * 2;
for(i=0;i < l;i++){
	var rad = i / l * Math.PI * 2;
	if(i % 2){
		g.lineTo(
			px + Math.cos(rad) * radius * d,
			py + Math.sin(rad) * radius * d
		);		
	}else{
		g.lineTo(
			px + Math.cos(rad) * radius,
			py + Math.sin(rad) * radius
		);
	}
}

g.endFill();
 


 

マウスで自由に線を引く
 

サンプルをダウンロード
 


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

マウスで線を自由に引くには、「 1 フレーム前のマウスカーソルの座標から現在のマウスカーソルまで直線を引く」という作業を毎フレーム繰り返す事で実現できます。
 
1.マウスが押されているか調べる

変数 m_on を用意して、

マウスが押された時に true
マウスが離された時に false

に変更します。
 
マウスが押されているか調べる

var m_on = false;	// マウスの状態


stage.addEventListener(MouseEvent.MOUSE_DOWN,function(){
	m_on = true;	// 押された
});
stage.addEventListener(MouseEvent.MOUSE_UP,function(){
	m_on = false;	// 離された
});
 
2.マウスカーソル移動中時にカーソルの座標を退避する

変数 x_old と y_old を用意し、マウスカーソルが移動中にマウスカーソルの座標を代入します。
 
マウスが押されているか調べる

var x_old = stage.mouseX;
var y_old = stage.mouseY;

stage.addEventListener(MouseEvent.MOUSE_MOVE,function(){
	x_old = stage.mouseX;
	y_old = stage.mouseY;
});
 
3.マウスクリック中に線を引く

さらにマウスカーソルが移動中にマウスが押されていれば、1 フレーム前のマウスカーソルの座標から現在のマウスカーソルの座標まで直線を描画します。
 
マウスが押されているか調べる

var m_on = false;	// マウスの状態


stage.addEventListener(MouseEvent.MOUSE_DOWN,function(){
	m_on = true;	// 押された
});
stage.addEventListener(MouseEvent.MOUSE_UP,function(){
	m_on = false;	// 離された
});

var x_old = stage.mouseX;
var y_old = stage.mouseY;

var shape = new Shape();
stage.addChild(shape);
var g = shape.graphics;
g.lineStyle (5, 0x000000, 100);	// 線のスタイル設定

stage.addEventListener(MouseEvent.MOUSE_MOVE,function(){
    // マウスが押された時
    if(m_on){
        g.moveTo (x_old, y_old);			// 前回の座標
        g.lineTo (stage.mouseX, stage.mouseY);	// 今回の座標
    }

    x_old = stage.mouseX;
    y_old = stage.mouseY;
});
 


 

HAKUHIN's home page バナー http://hakuhin.jp/
(c) Hakuhin & 日新礼符 2002-2011 解像度1024×768以上 IE8.0以上推奨
/ 閲覧中: