第2回で作成したHello, World!だけでは、
とはいうものの、
JavaFX Pluginのインストール
すでにインストールされているNetBeansに後からJavaFX Pluginをインストールする手順は、
インストールを行うには、
- JavaFX Source Debug
- JavaFX 1.
0 - JavaFX SDK for Windows
- JavaFX Weather Sample
3番目のJavaFX SDK for Windowsは、
図1のように、
![図1 JavaFX Pluginの選択 図1 JavaFX Pluginの選択](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_01.jpg)
すると、
![図2 プラグインの確認 図2 プラグインの確認](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_02.jpg)
次に表示されるのが、
![図3 ライセンス契約 図3 ライセンス契約](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_03.jpg)
インストールには数分かかりますので、
![図4 インストール画面 図4 インストール画面](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_04.jpg)
インストールが完了すると、
![図5 プラグインのインストール完了画面 図5 プラグインのインストール完了画面](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_05.jpg)
サンプルプロジェクトの実行
インストールが正常にできているか確かめるため、
まず、
![図6 プロジェクトの選択 図6 プロジェクトの選択](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_06.jpg)
[次へ >]
![図7 プロジェクトの名前およびロケーションの選択 図7 プロジェクトの名前およびロケーションの選択](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_07.jpg)
プロジェクトを作成すると、
![図8 PhotoEffectsプロジェクトの構成 図8 PhotoEffectsプロジェクトの構成](/assets/images/dev/serial/01/javafx/0004/08.jpg)
では、
プロジェクトが主プロジェクトであれば、
![図9 プロジェクトの実行 図9 プロジェクトの実行](/assets/images/dev/serial/01/javafx/0004/thumb/TH300_09.jpg)
実行すると図10に示すウィンドウが表示されます。このアプリケーションはキリンのイメージの明るさやコントラストを上部のスライダーで調節するアプリケーションです。実際にスライダーを動かして、
![図10 PhotoEffectsの実行結果 図10 PhotoEffectsの実行結果](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_10.jpg)
この連載ではこれ以降、
円、四角、文字…シェイプ
プロジェクトの生成
今回取りあげるのは、
- Arc 円弧、
扇形 - Circle 円
- CubicCurve 3次パラメトリック曲線
(ベジェ曲線) - Ellipse 楕円
- Line 直線
- Path 直線、
曲線からなるパス - Polygon 多角形
- PolyLine 複数の直線
- QuadCurve 2次パラメトリック曲線
(スプライン曲線) - Rectangle 四角形/
角丸四角
ここでは、
- サンプルコードはこちらからダウンロードしてください:circlesample.
zip
では、
![図11 プロジェクトの選択 図11 プロジェクトの選択](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_11.jpg)
次にプロジェクト名などを選択する画面に移ります。ここでは、
![図12 プロジェクトの設定 図12 プロジェクトの設定](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_12.jpg)
作成したプロジェクトは空のプロジェクトです。そこで、
![図13 JavaFX Scriptファイルの作成 図13 JavaFX Scriptファイルの作成](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_13.jpg)
すると、
![図14 スクリプトファイル作成ダイアログ 図14 スクリプトファイル作成ダイアログ](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_14.jpg)
コードパレットを使用したコードの作成
スクリプトファイルを作成すると、
![図15 コードパレット 図15 コードパレット](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_15.jpg)
コードパレットにはApplicationsやAction、
では、
![図16 Stageをドラッ 図16 Stageをドラッ](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_16.jpg)
Stageをドロップすると、
import javafx.stage.Stage;
import javafx.scene.Scene;
/*
* circlesample.fx
*
* Created on 2008/12/06, 15:13:59
*/
/**
* @author sakuraba
*/
// place your code here
Stage {
title: "MyApp"
scene: Scene {
width: 200
height: 200
content: [ ]
}
}
赤字で示した部分がStageをドロップしたことによるコードです。このコードはStageオブジェクトを生成し、
まずは、
このダイアログはメインスクリプトファイルを設定していない場合のみ表示されるので、
![図17 メインスクリプトファイルの選択 図17 メインスクリプトファイルの選択](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_17.jpg)
通常の方法で起動するのでもかまわないのですが、
スクリプトを実行した結果を図18に示しました。単に真っ白のウィンドウが表示されるだけです。
![図18 circlesample.fxの実行結果 図18 circlesample.fxの実行結果](/assets/images/dev/serial/01/javafx/0004/18.jpg)
では、
![図19 Circleのドラッ 図19 Circleのドラッ](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_19.jpg)
Circleをドロップすると、
Stage {
title: "MyApp"
scene: Scene {
width: 200
height: 200
content: [ Circle {
centerX: 100,
centerY: 100
radius: 40
fill: Color.BLACK
} ]
}
}
ちょっと見にくいので整形しましょう。コードの整形はエディタ部分を右クリックして表示されるポップアップメニューから
整形した結果を次に示します。
Stage {
title: "MyApp"
scene: Scene {
width: 200
height: 200
content: [
Circle {
centerX: 100,
centerY: 100
radius: 40
fill: Color.BLACK
}
]
}
}
円はjavafx.
コードパレットで生成されるコードではcenterXとcenterYが100、
では、
![図20 circlesample.fxの実行結果 図20 circlesample.fxの実行結果](/assets/images/dev/serial/01/javafx/0004/20.jpg)
コードのカスタマイズ
黒の円では味気ないので、
JavaFX Pluginは補完機能を持っているため、
![図21 コードの補完機能 図21 コードの補完機能](/assets/images/dev/serial/01/javafx/0004/thumb/TH800_21.jpg)
ここでは、
Stage {
title: "MyApp"
scene: Scene {
width: 200
height: 200
content: [
Circle {
centerX: 100,
centerY: 100
radius: 40
fill: Color.PALETURQUOISE
stroke: Color.SKYBLUE
}
]
}
}
さて、
![図22 プレビューアイコン 図22 プレビューアイコン](/assets/images/dev/serial/01/javafx/0004/thumb/TH216_22.jpg)
すると、
![図23 スクリプトのプレビュー 図23 スクリプトのプレビュー](/assets/images/dev/serial/01/javafx/0004/23.jpg)
複数の円を描画する
1つの円だけでなく、
Stage {
title: "Circle Sample"
scene: Scene {
width: 200
height: 200
content: [
for (i in [0..99]) {
// 乱数を使って場所や半径を決める
var rand = new Random();
Circle {
centerX: rand.nextInt(200)
centerY: rand.nextInt(200)
radius: rand.nextInt(30)
// RGBA で色を指定
fill: Color.rgb(175, 238, 238, 0.6)
stroke: Color.SKYBLUE
}
}
]
}
}
赤字で示したように、
ここでは、
![図24 複数の円の描画 図24 複数の円の描画](/assets/images/dev/serial/01/javafx/0004/24.jpg)
泡のように見えますか?
このサンプルでは直接中心座標と半径を乱数で設定していました。これ以外に、
transformsアトリビュートはjavafx.
- Affine : アフィン変換
- Rotate : 回転
- Scale : 拡大・
縮小 - Shear : シアー
- Translate : 移動
ここではtransformsアトリビュートを使用することにしましょう。まず、
Stage {
title: "Circle Sample"
scene: Scene {
width: 200
height: 200
content: [
for (i in [0..99]) {
// 乱数を使って場所や半径を決める
var rand = new Random();
Circle {
transforms: [
]
centerX: 0
centerY: 0
radius: 30
fill: Color.rgb(175, 238, 238, 0.6)
stroke: Color.SKYBLUE
}
}
]
}
}
円の位置は(0, 0)になるようにし、
そして、
Stage {
title: "Circle Sample"
scene: Scene {
width: 200
height: 200
content: [
for (i in [0..99]) {
// 乱数を使って場所や半径を決める
var rand = new Random();
Circle {
transforms: [
Translate {
x : 0.0,
y : 0.0 }
]
centerX: 0
centerY: 0
radius: 30
fill: Color.rgb(175, 238, 238, 0.6)
stroke: Color.SKYBLUE
}
}
]
}
}
Translateクラスはxアトリビュートとyアトリビュートで移動量を指定します。
次に、
Circle {
transforms: [
Translate {
x : 0.0,
y : 0.0 },
]
centerX: 0
centerY: 0
radius: 30
fill: Color.rgb(175, 238, 238, 0.6)
stroke: Color.SKYBLUE
}
そして、
Circle {
transforms: [
Translate {
x : 0.0,
y : 0.0 },
Scale {
x : 0.0,
y : 0.0 }
]
centerX: 0
centerY: 0
radius: 30
fill: Color.rgb(175, 238, 238, 0.6)
stroke: Color.SKYBLUE
}
赤字の部分が挿入された箇所です。Scaleクラスはx軸方向の拡大率を表すxアトリビュートと、
次に、
Stage {
title: "Circle Sample"
scene: Scene {
width: 200
height: 200
content: [
for (i in [0..99]) {
// 乱数を使って場所や半径を決める
var rand = new Random();
var transX = rand.nextInt(200);
var transY = rand.nextInt(200);
var scale = rand.nextDouble();
Circle {
transforms: [
Translate {
x : transX
y : transY
},
Scale {
x : scale
y : scale
}
]
centerX: 0
centerY: 0
radius: 30
fill: Color.rgb(175, 238, 238, 0.6)
stroke: Color.SKYBLUE
}
}
]
}
}
赤字で示した変数で移動量、
![図25 移動、縮小による複数円の描画 図25 移動、縮小による複数円の描画](/assets/images/dev/serial/01/javafx/0004/25.jpg)
グラデーションで塗る
先ほどのサンプルでは透明度を設定することで泡っぽく見せていましたが、
JavaFX Scriptでは2種類のグラデーションが用意されています。線形のグラデーションを表すjavafx.
LinearGradientクラスとRadialGradientクラスは、
色を指定するには、
環状のグラデーションの場合は中心点も指定します。ここでは、
![図26 RadialGradientの指定 図26 RadialGradientの指定](/assets/images/dev/serial/01/javafx/0004/thumb/TH216_26.jpg)
このように設定したRadialGradientオブジェクトをCircleオブジェクトのfillに指定します。スクリプトは次のようになりました。
Stage {
title: "Circle Sample"
scene: Scene {
width: 200
height: 200
content: [
for (i in [0..99]) {
// 乱数を使って場所や半径を決める
var rand = new Random();
var transX = rand.nextInt(200);
var transY = rand.nextInt(200);
var scale = rand.nextDouble();
Circle {
transforms: [
Translate {
x : transX
y : transY
},
Scale {
x : scale
y : scale
}
]
centerX: 0
centerY: 0
radius: 30
// 環状のグラデーションで色を塗る
fill: RadialGradient {
centerX: 0.25
centerY: 0.25
stops: [
Stop {
offset: 0.0
color: Color.WHITE
},
Stop {
offset: 0.6
color: Color.SKYBLUE
}
]
}
}
}
]
}
}
赤字の部分がRadialGradientオブジェクトの生成部分です。グラデーションの中心を示すcenterXアトリビュートとcenterYアトリビュートは共に0.
では、
![図27 グラデーションによる塗りつぶし 図27 グラデーションによる塗りつぶし](/assets/images/dev/serial/01/javafx/0004/27.jpg)
今回は、
また、
次回は、