シェイプを使ったベクターグラフィック (6/6)

もう１つ、複雑な図形を描く上で覚えておきたいのが「パス」です。パスは、一筆書きのようにして直線や曲線を描きたしていくことで図形を作成するものです。

これは「Path」クラスを利用して作成します。Pathインスタンスを作成し、そこに線分のグラフィックとなるインスタンスを作成して組み込んでいき、図形を作ります。Pathに組み込むことのできるグラフィック部品は、「PathElement」というクラスのサブクラスで、以下のようなものがあります。

●描画位置を移動する「MoveTo」

new MoveTo( 横位置 , 縦位置 )

一筆書きで描く描画の位置を移動するためのものです。引数で指定した位置に描画位置を移動します。

●直線を描く「LineTo」

new LineTo( 終端横位置 , 終端縦位置 )

現在の描画位置から、指定の地点まで直線を描きます。引数に線の終端となる位置を指定します。

●２次曲線を描く「QuadCurveTo」

new new QuadCurveTo( CP横位置 , CP縦位置 , 終端横位置 , 終端縦位置 )

現在の描画位置から、２次曲線を描きます。引数には、コントロールポイントの位置と終端の位置を指定します。

●３次曲線を描く「CubicCurveTo」

new new QuadCurveTo( CP横位置1 , 
        CP縦位置1 , CP横位置2 , CP縦位置2 , 終端横位置 , 終端縦位置 )

現在の描画位置から、３次曲線を描きます。引数には、２つのコントロールポイントの位置と終端の位置を指定します。

――では、実際の利用例を挙げておきましょう。下のリストは、先ほどのサンプルのcreateShapeメソッドを修正したものです。これで、２つの直線と１つの３次曲線からなるパス図形を作成し表示します。

ここでは、Pathインスタンスを作成し、MoveToやLineTo、CubicCurveToといったインスタンスを作成しては組み込んでいます。図形の組み込みは、

path.getElements().add(mt1);

このように行っていますね。Pathの「getElements」メソッドは、Pathに設定されているList（ObserbableList）インスタンスを得るものです。

Pathでは、このListで描画する図形のPathElementを管理しており、ここにaddメソッドでインスタンスを追加していくことで描く図形が追加されていきます。単純な図形の組み合わせでは描けないような複雑な形状の図形も、Pathを利用すれば描けることがわかるでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

public void createShape(Pane root){
    Path path = new Path();
    MoveTo mt1 = new MoveTo(50, 50);
    path.getElements().add(mt1);
    LineTo lt1 = new LineTo(250, 50);
    path.getElements().add(lt1);
    CubicCurveTo cc1 = new CubicCurveTo(250, 250,50, 50, 50, 250);
    path.getElements().add(cc1);
    LineTo lt2 = new LineTo(50, 50);
    path.getElements().add(lt2);
    path.setFill(Color.RED);
    root.getChildren().add(path);
}