●解説
Sprite.graphicsプロパティの参照するGraphicsオブジェクトに対してGraphics.drawCircle()やGraphics.drawEllipse()メソッドを呼出すと、円や楕円のベクターシェイプが描けます。また、Graphics.clear()メソッドは、参照するGraphicオブジェクトの描画をすべて消去します。なお、Sprite.graphicsプロパティについては、前述「直線を描きたい」をご参照ください。
→関連項目
「直線を描きたい」
|
Graphicsクラス |
|
パッケージ
|
flash.display
|
|
継承
|
Graphics → Object
|
|
drawCircle()メソッド |
ASタイプ |
M |
|
ランタイムバージョン
|
AIR 1.0/Flash Player 9
|
|
文法
|
drawCircle(x:Number, y:Number, radius:Number):void
|
|
意味
|
位置と半径を指定して円を描く。
|
|
引数
|
x:Number…親インスタンスの基準点を原点とする中心の水平ピクセル座標値。／y:Number…親インスタンスの基準点を原点とする中心の垂直ピクセル座標値。／radius:Number…円のピクセル単位の半径。
|
|
戻り値
|
なし。
|
|
drawEllipse()メソッド |
ASタイプ |
M |
|
ランタイムバージョン
|
AIR 1.0/Flash Player 9
|
|
文法
|
drawEllipse(x:Number, y:Number, width:Number, height:Number):void
|
|
意味
|
左上隅の位置と幅および高さを指定して楕円を描く。
|
|
引数
|
x:Number…親インスタンスの基準点を原点とする左隅ピクセル座標値。／y:Number…親インスタンスの基準点を原点とする上隅ピクセル座標値。／width:Number…楕円のピクセル単位の幅。／height:Number…楕円のピクセル単位の高さ。
|
|
戻り値
|
なし。
|
|
clear()メソッド |
ASタイプ |
M |
|
ランタイムバージョン
|
AIR 1.0/Flash Player 9
|
|
文法
|
clear():void
|
|
意味
|
参照するGraphicオブジェクトの描画をすべて消去し、線と塗りの設定をリセットする。
|
|
引数
|
なし。
|
|
戻り値
|
なし。
|
○記述例
以下のスクリプト03-03-01は、タイムラインに描画用のSpriteインスタンスを動的に配置し、Graphics.drawCircle()メソッドにより中心座標は(50, 50)で半径が50ピクセルの円を描きます(図03-03-01)。線や塗りを設定するGraphics.lineStyle()やGraphics.beginFill()メソッドなどについては、前述「直線を描きたい」および「直線で塗りの図形を描きたい」をご参照ください。
→関連項目
「直線を描きたい」「直線で塗りの図形を描きたい」
スクリプト03-03-01■動的に生成したSpriteインスタンスに円を描画
|
// フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
addChild(mySprite);
myGraphics.lineStyle(2);
myGraphics.beginFill(0x0000FF);
myGraphics.drawCircle(50, 50, 50);
myGraphics.endFill();
|
図03-03-01■描画された円【03_03_Graphics_drawCircle_001.png】
以下のスクリプト03-03-02は、対角線をドラッグすることにより、(その対角線をもつ長方形に内接する)楕円が描けます。マウスボタンを押したとき(InteractiveObject.mouseDownイベントで)そのマウス位置を対角線の一方の座標として記録し、ドラッグしてマウスを動かしている間(InteractiveObject.mouseMoveイベント)、記録された座標とマウス座標を対角線とする楕円をGraphics.drawEllipse()メソッドで描きます。マウスボタンを放せば(InteractiveObject.mouseUpイベントで)描画を終えます。
スクリプト03-03-02■マウスのドラッグで楕円を描く
|
// フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
var nThickness:Number = 2;
var nColor:uint = 0x0000FF;
var nX:Number;
var nY:Number;
addChild(mySprite);
stage.addEventListener(MouseEvent.MOUSE_DOWN, xBeginLine);
stage.addEventListener(MouseEvent.MOUSE_UP, xEndLine);
function xBeginLine(eventObject:MouseEvent):void {
nX = mouseX;
nY = mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE, xDrawEllipse);
}
function xDrawEllipse(eventObject:MouseEvent):void {
myGraphics.clear();
myGraphics.lineStyle(nThickness);
myGraphics.beginFill(nColor);
myGraphics.drawEllipse(nX, nY, mouseX - nX, mouseY - nY);
}
function xEndLine(eventObject:MouseEvent):void {
myGraphics.endFill();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, xDrawEllipse);
}
|
マウスをドラッグしている間、楕円はつねに描画し直されます。そこで、前に描いた残像を消すために、InteractiveObject.mouseMoveイベントのリスナー関数(xDrawEllipse())内で、毎回Graphics.clear()メソッドを呼出しています。すると、線や塗りの設定もリセットされますので、改めて設定しなければなりません。
図03-03-02■マウスでドラッグすると楕円が描かれる【03_03_Graphics_drawCircle_002.png】
|
※Graphics.drawEllipse()メソッドと負の幅・高さ
前掲スクリプト03-03-02を試すとわかるとおり、Graphics.drawEllipse()メソッドの第3引数の幅と第4引数の高さには負の値を渡すこともできます。負の幅は第1引数の水平座標から見て左方向、負の高さは第2引数の垂直座標から上方向と認識されて、楕円が描かれます。
|
作成者: 野中文雄
ドラフト作成: 2009年6月8日
