(翻訳)5回目からJavaFX 200を使用します.

8057 ワード
appication Random Netbeans JavaFX 図 colors
原文の住所http://download.oracle.com/javafx/2.0/get_started/jfxpb-get_started.httm
 
JavaFXを使って、ユーザーが体験するアプリケーションを素早く開発したいなら、本文をよく読みましょう.簡単なアプリケーションを作成し、複雑なグラフィックス効果を少量のコードで実現するのはなんと容易なことかを知る.もちろん、JavaFXは非常に綺麗で生き生きとした形だけではないです.本文を読んでからサンプルを見に行くといいです.
Figure 1 Colorful Circure Application
Description of「Figure 1 Colorful Circurs Appplication」 
JavaFXシーンのグラフィックプログラミングモデルに詳しいなら、プログラムのコードを分かりやすいです.ステージはアプリケーションの最上位のコンテナで、シーンはアプリケーションの内容のグラフィック面です.内容はすべてシーンの図形に組織されて、1つのノードの階層の木です.
Figure 2 を選択します  ColorfulCircles 。 分岐ノードは  Group クラスの実装.非分岐ノード、すなわち葉っぱノードは、  Rectangle  Circle クラスの実装
Figure 2 Colorful Circure Scene Graph
Description of「Figure 2 Colorful Circurs Sciene Graph」 
アプリケーションを作成
Javaデザインを開発するためのツールを使ってjavaFXアプリケーションを構築することができます.私たちはNetBens IDEの使用を推奨します.開始前に、あなたのNBバージョンがJAvaFX 200をサポートしていることを確認してください.詳しくは System Requirements.
以下の手順でNBで開発を行います.
から ファイル メニューを選択し、New Projectを選択します. . JavaFXアプリ分類からJavaFXアプリアプリを選択します. , 次をクリックします . プロジェクト名を入力  ColorfulCircles 後点 Finish . 開く Colorful Cicrcles.java ファイルをコピーして、import宣言をコピーして、あなたのプロジェクトに貼り付けてNB自動生成の文を上書きします.またはNBのコードを使って、機能またはFix Imports命令にImport文を導入してもいいですが、カバンはすべてjavafxで始まることを確認してください.アプリケーションの基礎を作成
 NetBens IDEで生成されたColorful Circurs類を削除して併用します. Example 1 のコードを置換します.以下はjavaFXアプリケーションを実行するために必要な最小コードです.
Example 1 Baic Application
public class ColorfulCircles extends Application {
 
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        
        primaryStage.show();
    }
}
Colorful Circurles類は継承されました.  Application クラスには、二つの方法が含まれています.最初の方法は  main() メソッドを呼び出します.  launch() 方法.JavaFXの最適な実践として、launch() 方法は   main() メソッドコールの一意の方法.
そして、  ColorfulCircles クラスで抽象的な  start() 方法start() 方法のパラメータは応用の初期舞台である.最後の行使の舞台が見える.
今はColorful Circursをコンパイルして実行できます.一歩ごとに中間結果を確認してください.問題があったら調べてください. Colorful Cicarcles.javaファイルです.
シーンを追加
今は舞台にシーンを追加します.3行のコードを追加して、Example 2を参照してください. .これは2つの最適な実践があります.コードにはシーンのためにGroupノードを作成し、シーンの幅と高さを設定しました.
はい、  primaryStage.show() この行の前にシーンとそのすべての内容を追加します.これはもう一つの最良の実践です.
Example 2 Scene
@Override 
public void start(Stage primarystage) {
    Group root = new Group();




    Scene scene = new Scene(root, 800, 600, Color.BLACK);




    primaryStage.setScene(scene);




    primaryStage.show()
Figure 3 これまでの結果を示した.
Figure 3 Stage and Scene
Description of「Figure 3 Stage and Scene」 
図を追加
続いては  primaryStage.show()  Example 3 のコードで30個の円を作成します.
Example 3 30 Curcles
Group circles = new Group();
for (int i = 0; i < 30; i++) {
   Circle circle = new Circle(150, Color.web("white", 0.05));
   circle.setStrokeType(StrokeType.OUTSIDE);
   circle.setStroke(Color.web("white", 0.16));
   circle.setStrokeWidth(4);
   circles.getChildren().add(circle);
}
root.getChildren().add(circles);
これらのコードは作成されました.  circles のGroupを使用して、offサイクルを使用して30個の円を追加します.各円の半径は150までで、ホワイトカラーで塗りつぶします.また、不透明度は5%ですので、基本的に透明です.
これらの円の外枠を作成します.コードに含まれています.  StrokeType クラスですエッジタイプの  OUTSIDE StrokeWidth の値、つまり4です.描いた色は  white ,不透明度は16%で、円の色より薄いです.
最後の一行  circles ルートノードに加える.これは一時的な構造です.後でシーンパターンを変えてマッチさせます. Figure 2 展示通りです
Figure 4 現在のアプリケーションを示しました.コードは各円に対して特定の位置を指定していないので、それらは一緒に重畳され、ウィンドウの左上の角は円心である.重なり合う円の不透明度と黒い北京の役割により、円は灰色に見える.
Figure 4 Curcles
Description of「Figure 4 Circurs」 
視覚効果を高める
円の使い方を続けると、箱がぼかして柔らかく見えます.コードは Example 4 . primaryStage.show()で 前にこれらのコードを追加します.
Example 4 Box Blur Effect
circles.setEffect(new BoxBlur(10, 10, 3));
コードにはボケ半径が設定されています.幅と高さは10 3 ， 。です. このように丸い縁に滑らかな効果が現れて、Figure 5を見ます. .
Figure 5 Box Blur on Circules
Description of「Figure 5 Box Blur on Circules」 
背景のグラデーションを作成
長方形を作成し、線形グラデーションで塗りつぶします.コードは下記の通りです. Example 5 .
はい、  root.getChildren().add(circles) 前にこれらのコードを追加します.このように長方形は円の下にあります.
Example 5 Linear Graadient
Rectangle colors = new Rectangle(scene.getWidth(), scene.getHeight(),
     new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE, new 
         Stop[]{
            new Stop(0, Color.web("#f8bd55")),
            new Stop(0.14, Color.web("#c0fe56")),
            new Stop(0.28, Color.web("#5dfbc1")),
            new Stop(0.43, Color.web("#64c2f8")),
            new Stop(0.57, Color.web("#be4af7")),
            new Stop(0.71, Color.web("#ed5fc2")),
            new Stop(0.85, Color.web("#ef504c")),
            new Stop(1, Color.web("#f2660f")),}));
root.getChildren().add(colors);
コードが作成されました.colors 。といいます. 長方形と場面の幅は同じで、左下の(0,0)点から右上の(1,1)点までの直線グラデーションが適用されます.  true グラデーションが矩形に比例することを表します.NO_CYCLE 色の循環が繰り返されないことを示します.  Stop[] シーケンスはグラデーションのシーケンスを示しています. colors ルートノードに追加します.
今は縁があいまいな灰色の円が虹色の上に現れています. Figure 6 .
Figure 6 Linear Graadient
Description of「Figur 6 Linear Graadient」 
Figure 7 中間のシーン図が展示されています.今はcirclesです グループ colors 長方形は全部ルートの子供です.
Figure 7 Intermediate Scene Graph
Description of「Figure 7 Intermediate Sciene Graph」 
ハイブリッドモードを適用
現在は混合カバー効果を高めることで円に色を加え、シーンを暗くします.このタスクは少し家事が必要です.シーンから削除する必要があります.
次の2行のコードを削除します.circles ， 。 root.getChildren().add(colors); 追加 Example 6 のコードを上に削除します.
Example 6 Blend Mode
Group blendModeGroup = 
    new Group(new Group(new Rectangle(scene.getWidth(), scene.getHeight(),
        Color.BLACK), circles), colors);
colors.setBlendMode(BlendMode.OVERLAY);
root.getChildren().add(blendModeGroup);
  root.getChildren().add(circles); グループは混合カバーグループのための構造を確立した.組には子供が二人含まれています.第一は、新しい匿名blendModeGroupである. ,新しく作成された匿名の黒い長方形と以前に作成されたGroupが含まれています. グループです.二番目の子供は以前に作られたcirclesです. 長方形colors 方法はハイブリッドカバーをCOlors矩形に適用した.最後の行のコードはsetBlendMode()です. フィールドにルートノードとして追加された子供、例えばFigure 2.ミキシングカバー効果は、グラフィックデザインプログラムにおける従来の効果です.画像を暗化したり、ハイライトしたりすることができます.これは混合グループの色に依存します.ここでは線形グラデーションの長方形を覆いとして用い,黒い長方形を背景の暗さを保つために用い,透明に近い円を長方形から色を取ったが,依然として暗くなった.
Figure 8 結果を示しました.次のステップは円を活性化した後に完全な混合カバー効果が見られます.
Figure 8 Overlay Blend
Description of「Figure 8 Overlay Blend」 
アニメーションを追加
最後のステップは、javaFXアニメーションを使用して円を移動します.
準備ができていなかったら、増えます.  blendModeGroup インポート宣言に行きますはい、  import static java.lang.Math.random; 前にExample 7を追加します. の活性化コードです.
Example 7 Animation
Timeline timeline = new Timeline();
for (Node circle: circles.getChildren()) {
    timeline.getKeyFrames().addAll(
        new KeyFrame(Duration.ZERO, // set start position at 0
            new KeyValue(circle.translateXProperty(), random() * 800),
            new KeyValue(circle.translateYProperty(), random() * 600)
        ),
        new KeyFrame(new Duration(40000), // set end position at 40s
            new KeyValue(circle.translateXProperty(), random() * 800),
            new KeyValue(circle.translateYProperty(), random() * 600)
        )
    );
}
// play 40s of animation
timeline.play();
アニメーションはタイムラインによって駆動されるので、ここでタイムラインを作成し、primaryStage.show()を使用します. ループは30個の円で、2つのキーフレームを増加させる.最初のキーフレームは0秒でforを使用する.  translateXProperty 属性設定ウィンドウ内のランダムな位置.第二のキーフレームは40秒で同じです.このように、タイムラインがプレイすると、すべての円は40秒以内に一つのランダムな位置からもう一つの円になります. 
Figure 9 運動中の30個の円を示した.完了後に表示 Colorful Cicrcles.java ファイル..
Figure 9 Animed Circurs
Description of「Figure 9 Animed Circurs」
【サブ遅れに伴うアンダーラインscore】`void 0`で`undefined`の代わりに言ってください.