線と曲線の描画

Graphics インスタンスを使用して行うすべての描画は、線と曲線の基本的な描画に基づいています。そのため、すべての ActionScript 描画は同じ一連の手順で実行される必要があります。

サブトピック

線と塗りのスタイルの定義

Shape、Sprite、または MovieClip インスタンスの graphics プロパティを使用して描画するには、まず、描画に使用するスタイル (線のサイズと色、塗りの色) を定義する必要があります。Adobe Flash CS3 Professional などの描画アプリケーションで描画ツールを使用するときと同様に、ActionScript を使用して描画するときも、境界線や塗りの色の有無を指定して描画できます。境界線の外観は lineStyle() メソッドまたは lineGradientStyle() メソッドを使用して指定します。単色の線を作成するには lineStyle() メソッドを使用します。このメソッドを呼び出す場合に指定する最も一般的な値は、最初の 3 つのパラメータである、線の太さ、色、およびアルファです。たとえば、次のコード行は、myShape という名前の Shape に、線の太さが 2 ピクセルで、色が赤 (0x990000)、不透明度が 75 % の線を描画するよう指定しています。

myShape.graphics.lineStyle(2, 0x990000, .75);

アルファパラメータのデフォルト値は 1.0 (100%) であるため、完全に不透明な線を描画する場合はこのパラメータを指定しないこともできます。lineStyle() メソッドは、ピクセルのヒンティングと拡大 / 縮小モードの 2 つの追加パラメータも受け取ります。これらのパラメータの使用方法の詳細については、『ActionScript 3.0 コンポーネントリファレンスガイド』の Graphics.lineStyle() メソッドの説明を参照してください。

グラデーションの線を作成するには、lineGradientStyle() メソッドを使用します。このメソッドについては、グラデーションの線と塗りの作成を参照してください。

塗りのシェイプを作成する場合、描画を開始する前に、beginFill() メソッド、beginGradientFill() メソッド、または beginBitmapFill() メソッドを呼び出します。これらのメソッドの中で最も基本的な beginFill() メソッドは、塗りの色と塗りの色のアルファ値 (オプション) の 2 つのパラメータを受け取ります。たとえば、単色の緑の塗りでシェイプを描画するには、次のコードを使用します (myShape という名前のオブジェクトに描画すると仮定)。

myShape.graphics.beginFill(0x00FF00);

塗りメソッドを呼び出すと、新しい塗りを開始する前に、暗黙的に前の塗りを終了します。境界線のスタイルを指定したメソッドを呼び出すと、前の境界線が置き換えられますが、前に指定した塗りは変更されません。逆の場合も同様です。

線のスタイルと塗りのプロパティを指定したら、次に描画の開始点を指定します。Graphics インスタンスには、用紙上のペン先のような描画ポイントがあります。描画ポイントが位置するところから、次の描画アクションが開始されます。初期状態では、Graphics オブジェクトは、描画するオブジェクトの座標空間のポイント 0, 0 という描画ポイントから描画を開始します。別のポイントから描画を開始するには、まず moveTo() メソッドを呼び出してから、いずれかの描画メソッドを呼び出します。これは、ペン先を用紙から上げて新しい場所に移動するのと似ています。

描画ポイントを適切な場所に配置してから、lineTo() メソッド (直線の描画) や curveTo() メソッド (曲線の描画) に対する一連の呼び出しを使用して描画します。

塗りの色を指定している場合、描画中に endFill() メソッドを呼び出して塗りを終了するように指定できます。閉じたシェイプを描画していない場合 (つまり、endFill() を呼び出したときに描画ポイントがそのシェイプの開始点にない場合)、endFill() メソッドを呼び出した時点で、現在の描画ポイントから最後に moveTo() 呼び出しで指定した位置まで自動的に直線が描画され、閉じたシェイプが描画されます。塗りを開始して endFill() を呼び出していない場合、beginFill() (または他のいずれかの塗りメソッド) を呼び出すと、現在の塗りが終了し、新しい塗りが開始されます。

直線の描画

lineTo() メソッドを呼び出すと、Graphics オブジェクトは現在の描画ポイントからこのメソッド呼び出しの 2 つのパラメータで指定した座標まで、指定した線のスタイルで直線を描画します。たとえば、次のコード行では、描画ポイントをポイント 100, 100 に配置し、ポイント 200, 200 まで線を描画します。

myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);

次の例では、高さ 100 ピクセルの赤と緑の三角形を描画します。

var triangleHeight:uint = 100;
var triangle:Shape = new Shape();

// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight/2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight/2, 0);

// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight/2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight/2, 0);

this.addChild(triangle);

曲線の描画

curveTo() メソッドは、二次ベジェ曲線を描画します。このメソッドでは、2 つのポイント (アンカーポイント) をつなぐ弧を、3 番目のポイント (コントロールポイント) に向けて曲げながら描画します。Graphics オブジェクトは現在の描画位置を最初のアンカーポイントとして使用します。curveTo() メソッドを呼び出す場合、コントロールポイントの x 座標と y 座標、2 番目のアンカーポイントの x 座標と y 座標の順に、4 つのパラメータを渡します。たとえば、次のコードでは、ポイント 100, 100 から始まりポイント 200, 200 で終わる曲線を描画します。コントロールポイントがポイント 175, 125 にあるため、まず右に、その後下に移動する曲線を作成します。

myShape.graphics.moveTo(100, 100);
myShape.graphics.curveTo(175, 125, 200, 200);

次の例では、幅と高さが 100 ピクセルの赤と緑の丸いオブジェクトを作成します。二次ベジェ曲線の特徴として、これらのオブジェクトは完全な円ではありません。

var size:uint = 100;
var roundObject:Shape = new Shape();

// red circular shape
roundObject.graphics.beginFill(0xFF0000);
roundObject.graphics.moveTo(size / 2, 0);
roundObject.graphics.curveTo(size, 0, size, size / 2);
roundObject.graphics.curveTo(size, size, size / 2, size);
roundObject.graphics.curveTo(0, size, 0, size / 2);
roundObject.graphics.curveTo(0, 0, size / 2, 0);

// green circular shape
roundObject.graphics.beginFill(0x00FF00);
roundObject.graphics.moveTo(200 + size / 2, 0);
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2);
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size);
roundObject.graphics.curveTo(200, size, 200, size / 2);
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0);

this.addChild(roundObject);