1      JavaFX開發入門

如果想使用JavaFX快速開發豐富用戶體驗的應用，那么這個入門教程適合你。你將通過創建一個如圖-1所示的簡單應用，就能學知用少許代碼就能獲 得復雜圖形效果。當然，JavaFX不止乎漂亮的動畫圖形。在你完成這個學習教程后，看下JavaFX系列應用示例，以便帶你進入更豐富的開發之旅。

圖-1 多彩圓形（ColorfulCircles）應用

這個圖形展示了彩色應用效果。圖中有30個圓跨越黑色背景而活動。這些圓有個模糊的白邊，5%的不透明度。這些圓圈顯示于黃、藍、綠、粉及紅色的陰影內。

如果熟悉JavaFX場景圖編程模式，將更容易理解這個應用程序代碼。舞臺（Stage）是應用的頂層容器，布景供應用內容描繪界面之需。內容是由層次節點樹構成的場景圖。

圖-2展示了ColorfulCircles應用的場景圖。應用中分支檢點是Group類的實例，無分支節點即葉子節點時是Rectange和Circle類的實例。

 

圖-2ColorfulCircles布景圖

這個圖形展示了以Stage為頂層容器的ColorfulCirlces應用，布景為應用內容描繪界面只用。Group節點時場景的根節點。根節點 有一個子節點，即命名為blendModeGroup的分組節點。這個blendModeGroup有一個分組未命名子節點，包括一個黑色矩形和一個有 30個圓圈的圓組。稱之為colors的矩形也是lendModeGroup的一個子節點。

 

1.1  建立應用

你可以用任何創建Java應用的工具開發JavaFX應用。這個教程中開發工具使用的NetBeans IDE。在開始前，請確定你所使用的NetBeans IDE的版本，要求支持JavaFX 2.0.

1.        在NB IDE中建立JavaFX工程如下：

2.        在File菜單中選擇“new Project”（新工程）；

3.        在JavaFX應用類別中選擇JavaFX Application。點擊“next”（下一步）；

4.        把工程命名為ColorCircles，并點擊“Finish”（完成）；

5.        打開ColorCircles.java文件，復制導入語句，粘貼到工程中，重寫NB IDE生成的語句。或者按照你自己工作方式來完成這些代碼。

1.2  創建應用基礎

刪除NetBeans 生成的Colorcircles類的代碼，用示例-1代碼替換。這是運行JavaFX應用需求的最少代碼。

public classColorfulCircles extends Application {

    public static void main(String[] args) {

        launch(args);

    }   

    @Override

    public void start(Stage primaryStage){       

        primaryStage.show();

    }

}

（示例-1）

這個Colorcircles類擴展自Application類，并包括兩個方法。第一個方法是main()方法，并調用了launch()方法。JavaFX的一個最佳實踐是：在main()中只調用launch()方法。

接下來，Colorcircles類覆蓋了Application類中抽象的start()方法。這個start()方法需要一個基本的應用級舞臺（stage）作為參數。最后一行代碼確保舞臺效果（stage）可見。

現在可以編譯運行這個應用了（在教程的每一步中，為了立即看到結果都可這樣做）。如果碰到問題，請查看Colorcircles.java文件。

 

1.3  增加布景

現在可以在primaryStage.show()行前增加布景以及其所有相關內容。如示例-2所示。

@Override 

public void start(Stage primarystage) {

    Group root = new Group();

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

    primaryStage.setScene(scene);

（示例-2）

    primaryStage.show()

此時運行了本應用，你將可看到全黑的布景。

 

1.4  添加圖形

接下來，創建30個圓形。在primaryStage.show()行前添加示例-3代碼

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);

（示例-3）

這兒的代碼創建了一個circles組，然后通過for循環向組中添加了30個圓。每個圓半徑為150，白色填充，不透明等級為5%（意味著大部分透明）。

為了創建圓邊框，代碼中包含了StrokeType類。OUTSIDE描邊類型意味著圓邊界由內向外擴張了StrokeWidth值的大小。描邊演示是白色，不透明度為16%，以便比圓的色彩更亮。

最后一行是把圓組天劍到根節點。這是臨時性結構。后面將可改變布景圖以匹配圖-2展示。

圖-3展示的應用程序。由于代碼并沒指定每個圓的位置，這些圓都以左上角為中心點繪制在另外圓的上方。覆蓋圓的不透明度與黑色背景交互，產生了灰色圓效果。

圖-3

這幅圖展示了一個黑色背景，并在左上角帶四分之一圓的情形。圓是白邊灰色。

 

1.5  增加可視效果

把模糊效果應用到應用示例的圓上，使其些許的模糊不清。把示例-4的代碼增加到primaryStage.show()代碼行前，來看看效果。

circles.setEffect(new BoxBlur(10, 10, 3));

示例-4 模糊效果

上述代碼設置模糊半徑為10像素寬10像素高以及模糊迭代為3，使其近似高斯模糊。這個模糊效果產生了一個圓滑的邊緣效果。如圖-4所示。

圖-4 圓的盒模糊

這幅圖展示了一個黑色背景，并在左上角帶四分之一圓的情形。圓的邊是圓滑、模糊效果。

 

1.6  創建漸變背景

創建一個矩形，并以線性漸變填充。如示例-5代碼所示。為了使漸變矩形在圓后，把示例代碼增加到root.getChildren().add(circles)代碼行前。

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);

示例-5 線性漸變

這部分代碼創建了一個命名為colors的矩形。這個矩形寬和高與布景一樣，并以線性漸變填充，同時線性漸變開始于左手邊(0,1)，結束于右手邊 (1,0)。值true意味著漸變與矩形是成比例的，NO_CYCLE說明顏色循環不再進行。Stop[]序列說明在特定點漸變色應該是什么。代碼最后一 行把colors矩形加入根節點。

模糊邊線的灰色圓呈現在彩虹色上方，如圖-5所示。

圖-5 線性漸變色

圖形說明：這幅圖在漸變色上展示了左上角模糊圓的四分之一。漸變從左下方黃色到右上角紅色結束。

圖-6展示了內部場景結構。在這點，Circles組和colors矩形是根節點的子節點。

圖-6 內部場景結構

圖-6說明：內部場景結構展示了帶有兩個子節點的根節點：一個circles組和一個colors矩形。Circles組包含30個圓形。

1.7  應用混合模式

現在向圓形添加色彩，并通過增加疊加混合效果暗化布景。這項任務需要些內務處理，及需要從場景圖上移走circles組和漸變矩形，并把它們添加到新的層疊混合組。

1．  移走下面兩行代碼：root.getChildren().add(colors);root.getChildren().add(circles);

2．  把示例-6的代碼添加到你移走代碼的地方；

GroupblendModeGroup =

   new Group(new Group(newRectangle(scene.getWidth(), scene.getHeight(),

        Color.BLACK), circles), colors);

colors.setBlendMode(BlendMode.OVERLAY);

3． root.getChildren().add(blendModeGroup);

示例-6 混合模式

blendModeGroup組設定了層疊混合結構。這組包含兩個子節點。第一個子節點是個新的未命名組，并容納了一個未命名的黑色矩形和前邊創建的circles組。第二個子節點是前面創建的colors矩形。

setBlendMode()方法把層疊混合模式應用到colors矩形。最后代碼行把blendModeGroup作為根節點的孩子增加到布局圖內，如圖-2描述。

層疊混合是圖形設計應用中普通的效果它們可以暗化或量化一副圖片，或者兼有，這依賴于混合模式中的色彩。在這個案例中，線性漸變矩形擁有層疊。黑色 矩形用于保持背景黑暗，即使當幾乎透明的圓從這漸變色中撿取色彩，但也是暗化的。如圖-7所示結果。當下一步中是這些圓動態化時，你將可看到完整的層疊混 合效果。

圖-7 層疊混合

1.8  添加動畫

教程最后一步是使用JavaFX動畫移動這些圓：

1.      如果還沒導入“import static java.lang.Math.randow;”到引入列表，請增加；

2.      把代碼示例-7中的動畫代碼增加到primaryStage.show()行前；

Timelinetimeline = new Timeline();

for (Nodecircle: circles.getChildren()) {

    timeline.getKeyFrames().addAll(

        new KeyFrame(Duration.ZERO, // setstart position at 0

            newKeyValue(circle.translateXProperty(), random() * 800),

            newKeyValue(circle.translateYProperty(), random() * 600)

        ),

        new KeyFrame(new Duration(40000), //set end position at 40s

            newKeyValue(circle.translateXProperty(), random() * 800),

            newKeyValue(circle.translateYProperty(), random() * 600)

        )

    );

}

// play 40s ofanimation

timeline.play();

動畫有時間線驅動，因此這些代碼創建時間線，并運用for循環增加兩個關鍵幀到每個圓中（共30個圓）。第一個關鍵幀在0秒時使用 translateXproperty和translateYProperty兩屬性設置窗口內隨機位置。第二個關鍵幀在40秒時，做和第一幀同樣的事 情。這樣，當時間線播放時，它將所有圓從一個隨機位置，40秒后變化到另一個隨機位置。

圖-8展示了30個彩色圓的動畫狀態，至此，完成了整個應用程序的工作。

圖-8 動畫圓形

 

1.9  部署應用

當在NetbeansIDE中運行此應用或使用Clean&Build命令，應用可打包為各種JavaFX部署類型（可以通過工程屬性設定選項）。然后進入ColorfulCircles工程的dist目錄下，可雙擊下3個文件的每一個：

• l  ColorfulCircles.jar以單機模式運行；
• l  ColorfulCircles.jnlp以Web Start模式運行；
• l  ColorfulCircles.html打開一頁面，含有一個Web Start連接，并且也能在運行在瀏覽器中。

更多的部署信息，可以查看“部署JavaFX應用”相關描述。

至此，本開發入門教程完畢。
轉自：http://blog.csdn.net/s_ghost/article/details/7336073