Canvasを使ったグラフィックの描画は、SwingやAWTなどと感覚的には近いものがあります。すなわち、グラフィックコンテキストを取得し、描画用のメソッドを呼び出して画面に描く、という考え方ですね。描いたグラフィックは、ただのビットマップグラフィックです。それ自体は、描いたらもうそれで終わりです。

が、こうしたビットマップグラフィックとは別に、ベクターグラフィックを扱うための機能もJavaFXには用意されています。ベクターグラフィックというのは、位置や大きさなどのグラフィックの情報を保持している図形ですね。描いた後でそれを変更して位置や大きさなどを操作することができます。またデータとして作成され必要に応じて描き直されるので、拡大縮小してもビットマップグラフィクのように図形が荒れたりすることもありません。

このベクターグラフィックは、javafx.scene.shapeというパッケージに用意されています。これは、FXMLでタグとして利用することができます。では、実際に簡単な利用例を見てみましょう。

下のリストは、四角形と円のシェイプを表示するものです。これをFXMLのファイルに記述し、JavaからロードしてScneに表示します。例えば、app.fxmlというファイルとして用意したなら、こんな感じで実行すればよいでしょう。

Scene scene = new Scene(FXMLLoader.load(getClass()
        .getResource("app.fxml")),300,300);
stage.setScene(scene);
stage.show();

ここでは、赤い四角形と、グリーンの円がウインドウに表示されます。今回はシェイプを使ってウインドウ内に自由にグラフィックを配置するので、<BorderLayout>のようなレイアウト用コンテナは使う意味がないでしょう。そこで、<Pane>というコンテナをルートのタグに指定しています。<Pane>は、何のレイアウト機能もない、もっともシンプルなコンテナです。シェイプのようにレイアウトする必要がない部品を配置する際に利用するとよいでしょう。

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<Pane xmlns="http://javafx.com/javafx" 
    xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.tuyano.libro.AppController">
    <Rectangle x="50" y="50" width="100" height="100" 
        fill="RED" stroke="BLUE" strokeWidth="5"/>
    <Circle centerX="150" centerY="150" radius="50"
        fill="GREEN" stroke="CYAN" strokeWidth="5"/>
</Pane>