パスの描画

Flash Player 10 以降、Adobe AIR 1.5 以降

直線と曲線の描画に関する節(線と曲線の描画を参照)では、1 つの直線を描画するコマンド(Graphics.lineTo())および曲線を描画するコマンド(Graphics.curveTo())と、線を別の位置に移動してシェイプを形成するコマンド(Graphics.moveTo())を紹介しました。ActionScript における描画 API の拡張機能の一部(Graphics.drawPath() および Graphics.drawTriangles() など)は、既存の描画コマンドをパラメーターとして使用します。これにより、一連の Graphics.lineTo()Graphics.curveTo()、または Graphics.moveTo() コマンドが、Flash ランタイムで単一のステートメントとして実行されます。

2 つの描画 API 拡張機能のうち 1 つは、Graphics.drawPath()Graphics.drawTriangles() による既存コマンド群の統合を実現するものです。

  • GraphicsPathCommand 列挙クラス:GraphicsPathCommand クラスは複数の描画コマンドに定数値を関連付けます。これらの値は、Graphics.drawPath() メソッドに渡すパラメーターとして使用します。これにより、1 つのコマンドで、シェイプ全体または複数のシェイプをレンダリングできます。また、これらのメソッドに渡す値を動的に変えて、既存のシェイプを変更することもできます。

  • ベクター配列:特定のデータ型の一連の値を格納します。一連の GraphicsPathCommand 定数を 1 つの Vector オブジェクトに格納し、一連の座標を別の Vector オブジェクトに格納します。Graphics.drawPath() または Graphics.drawTriangles() はこれらの値を一緒に割り当てて、パスまたはシェイプを生成します。

シェイプのセグメントごとに異なるコマンドを使用する必要はなくなりました。例えば、Graphics.drawPath() メソッドは、Graphics.moveTo()Graphics.lineTo()、および Graphics.curveTo() を 1 つのメソッドに統合します。各メソッドを個別に呼び出す代わりに、メソッドは GraphicsPathCommand クラスで定義されている数値識別子に抽象化されています。moveTo() 操作は 1 で表され、lineTo() 操作は 2 で表されます。これらの値の配列を、Vector.<int> オブジェクトに格納し、commands パラメーターで使用します。次に、座標を含む別の配列を Vector.<Number> オブジェクトに作成し、data パラメーターに使用します。GraphicsPathCommand の各値は、data パラメーターに格納されている座標値に対応します。data パラメーターでは、2 つの連続する数値が、ターゲット座標空間内の 1 つの位置を定義します。

注意: ベクター内の値は Point オブジェクトではありません。ベクターを一連の数値であり、2 つの数値からなる各グループが、1 つの x/y 座標ペアを表します。

Graphics.drawPath() メソッドは、各コマンドとそれに対応するポイントの値(2 つまたは 4 つの値のコレクション)を一致させて、Graphics オブジェクトにパスを生成します。

package{ 
import flash.display.*; 
 
public class DrawPathExample extends Sprite { 
    public function DrawPathExample(){ 
 
    var square_commands:Vector.<int> = new Vector.<int>(5,true); 
    square_commands[0] = 1;//moveTo 
    square_commands[1] = 2;//lineTo 
    square_commands[2] = 2; 
    square_commands[3] = 2; 
    square_commands[4] = 2; 
 
    var square_coord:Vector.<Number> = new Vector.<Number>(10,true); 
    square_coord[0] = 20; //x 
    square_coord[1] = 10; //y 
    square_coord[2] = 50; 
    square_coord[3] = 10; 
    square_coord[4] = 50; 
    square_coord[5] = 40; 
    square_coord[6] = 20; 
    square_coord[7] = 40; 
    square_coord[8] = 20; 
    square_coord[9] = 10; 
 
    graphics.beginFill(0x442266);//set the color 
    graphics.drawPath(square_commands, square_coord); 
    } 
} 
}

上記の例では、座標のペアとコマンドをそれぞれ個別に割り当てて配列に位置を表示していますが、単一のステートメントで割り当てることもできます。次の例では、単一の push() ステートメント内で各配列に値を割り当てることにより、同じ星を描画しています。

package{ 
import flash.display.*; 
 
public class DrawPathExample extends Sprite { 
    public function DrawPathExample(){ 
 
    var square_commands:Vector.<int> = new Vector.<int>(); 
    square_commands.push(1, 2, 2, 2, 2); 
    var square_coord:Vector.<Number> = new Vector.<Number>(); 
    square_coord.push(20,10, 50,10, 50,40, 20,40, 20,10); 
 
    graphics.beginFill(0x442266); 
    graphics.drawPath(square_commands, square_coord); 
    } 
} 
}