サイトトップ

Director Flash 書籍 業務内容 プロフィール

Flash ActionScript 3.0 Reference

◎03 Graphics

☆01 ★直線を描きたい

解説
Sprite.graphicsプロパティはインスタンスのもつGraphicsオブジェクトを参照します。そのオブジェクトに対してGraphicsクラスの描画メソッドを使えば、さまざまなベクターシェイプが描けます。直線を引くには、Graphics.moveTo()およびGraphics.lineTo()メソッドを用います。また、線のスタイルはGraphics.lineStyle()メソッドで指定します。

Spriteクラス
パッケージ flash.display
継承 Sprite → DisplayObjectContainer → InteractiveObject → DisplayObject → EventDispatcher → Object
graphicsプロパティ ASタイプ P
ランタイムバージョン AIR 1.0/Flash Player 9
文法 graphics:Graphics
意味 インスタンスのもつGraphicオブジェクトを参照します。
プロパティ値 インスタンスがもつGraphicオブジェクト。Graphicsクラスの描画メソッドを使って、インスタンスにシェイプを描くことができます。読取り専用で、Graphicsインスタンスを設定することはできません。

Graphicsクラス
パッケージ flash.display
継承 Graphics → Object
lineStyle()メソッド ASタイプ M
ランタイムバージョン AIR 1.0/Flash Player 9
文法 lineStyle(thickness:Number = NaN, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3):void
意味 現在の描画位置以降の線のスタイルを指定します。
引数

thickness:Number ― 線の太さをポイントで示す整数。0から255までの値を指定します。0は極細線になります。

color:uint ― 線の色を示す正の整数。通常は16進数で表し、たとえば赤は0xFF0000で指定します。デフォルト値は0の黒(0x000000)です。

alpha:Number ― 線の色のアルファ値を示す数値。0が完全な透明で、1.0が完全な不透明です。デフォルト値は1.0です。

pixelHinting:Boolean ― trueに設定すると、ピクセルがフルに描線され、鮮明な線になります。falseではこの調整が行われないため、たとえば直線と曲線の継ぎ目が途切れて見えることもあります。デフォルト値はfalseです。

戻り値 なし。
moveTo()メソッド ASタイプ M
ランタイムバージョン AIR 1.0/Flash Player 9
文法 lineTo(x:Number, y:Number):void
意味 現在の描画位置を、指定したxy座標に移動します。
引数

x:Number ― 親インスタンスの基準点を原点とする水平ピクセル座標値。

y:Number ― 親インスタンスの基準点を原点とする垂直ピクセル座標値。

戻り値 なし。
lineTo()メソッド ASタイプ M
ランタイムバージョン AIR 1.0/Flash Player 9
文法 lineTo(x:Number, y:Number):void
意味 現在の描画位置から指定されたxy座標まで直線を描きます。
引数

x:Number ― 親インスタンスの基準点を原点とする水平ピクセル座標値。

y:Number ― 親インスタンスの基準点を原点とする垂直ピクセル座標値。

戻り値 なし。

記述例
以下のスクリプト03-01-001は、タイムラインに描画用のSpriteインスタンスを動的に配置し、座標(20, 20)を左上隅とする100ピクセル四方の正方形を直線で描きます。描画はGraphics.moveTo()メソッドで、(20, 20)の位置から始めています。線のスタイルはGraphics.lineStyle()メソッドにより、上と右の辺が2ポイントの赤(0xFF0000)、下と左の辺は8ポイントの青(0x0000FF)でアルファは50%(0.5)としました(図03-01-001)。

スクリプト03-01-001■動的に生成したSpriteインスタンスに直線を描画

// フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
addChild(mySprite);
myGraphics.lineStyle(2, 0xFF0000);
myGraphics.moveTo(20, 20);
myGraphics.lineTo(120, 20);
myGraphics.lineTo(120, 120);
myGraphics.lineStyle(8, 0x0000FF, 0.5);
myGraphics.lineTo(20, 120);
myGraphics.lineTo(20, 20);

図03-01-001■直線で描画した正方形【03_01_Graphics_lineTo_001.png】

タイムラインにシェイプを直接描くのでなく、上記スクリプト03-01-001のように描画用のSpriteインスタンスを作成・配置して、そのGraphicsオブジェクトを操作する方が、描画と他の処理とを干渉し合わないように分けられるので便利でしょう。

※Sprite.graphicsプロパティは変数に取る
Sprite.graphicsプロパティで取得するGraphicsオブジェクトの参照は、上記スクリプト03-01-001のようにGraphicsで型指定した変数に代入しましょう。変数に対してコードヒントが表示されますし、描画メソッドを使うたびにインスタンスのSprite.graphicsプロパティにアクセスするより処理が最適化されます。

上記スクリプト03-01-001の処理を分けて、マウスボタンを押したとき(InteractiveObject.mouseDownイベントで)直線の描画を開始し、ボタンを放したときに(InteractiveObject.mouseUpイベントで)終了するようにすると、マウスのドラッグで直線が引けます。さらにドラッグしてマウスを動かしている間(InteractiveObject.mouseMoveイベント)にも描画を続ければ、短い直線の連続として自由な線を描くことができます(図03-01-002)。そのように構成したのが、以下のスクリプト03-01-002です。

スクリプト03-01-002■マウスのドラッグで自由な線を描く

// フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
var nThickness:Number = 4;
var nColor:uint = 0x0000FF;
addChild(mySprite);
stage.addEventListener(MouseEvent.MOUSE_DOWN, xBeginLine);
stage.addEventListener(MouseEvent.MOUSE_UP, xEndLine);
function xBeginLine(eventObject:MouseEvent):void {
  myGraphics.lineStyle(nThickness, nColor);
  myGraphics.moveTo(mouseX, mouseY);
  stage.addEventListener(MouseEvent.MOUSE_MOVE, xDrawLine);
}
function xDrawLine(eventObject:MouseEvent):void {
  myGraphics.lineTo(mouseX, mouseY);
}
function xEndLine(eventObject:MouseEvent):void {
  myGraphics.lineTo(mouseX, mouseY);
  stage.removeEventListener(MouseEvent.MOUSE_MOVE, xDrawLine);
}

図03-01-002■マウスでドラッグすると自由に線が描ける【03_01_Graphics_lineTo_002.png】

なお、ステージ上のどこでもマウスイベントを受取りたいときには、EventDispatcher.addEventListener()メソッドはStageオブジェクト(DisplayObject.stageプロパティ)に対してイベントリスナーを登録する必要があります。

→関連項目
「直線で塗りの図形を描きたい」「矩形を描きたい」「曲線を描きたい」


作成者: 野中文雄
更新: 2009年5月15日 スクリプト03-01-002とその解説の追加。
ドラフト作成: 2009年4月9日


Copyright © 2001-2009 Fumio Nonaka.  All rights reserved.