JavaFX Effect (2) Gradient

JavaFX的漸層 (Gradient) 效果分為線性漸層 (Linear Gradient) 與放射性漸層 (Radial Gradient) 兩種，分別由LinearGradient與RadialGradient類別處理，皆繼承自Paint抽象類別。Gradient原意為傾斜度，但其效果有如漸層一般，因此譯為漸層。漸層需由兩種以上的顏色組成，各漸層顏色的比例由Stop類別處理。

線性漸層將數種顏色以線性的方式依比例漸進填滿物件，其效果如下圖所示：

線性漸層由javafx.scene.effect.LinearGradient類別處理，其建構函式如下：

  public LinearGradient(double startX, double startY,
    double endX, double endY, boolean proportional,
    CycleMethod cycleMethod, List<Stop> stops)
  public LinearGradient(double startX, double startY,
    double endX, double endY, boolean proportional,
    CycleMethod cycleMethod, Stop... stops)

其中參數：

1. startX：設定漸層軸始點的水平座標，預設為0.0。
2. startY：設定漸層軸始點的垂直座標，預設為0.0。
3. endX：設定漸層軸終點的水平座標，預設為1.0。
4. endY：設定漸層軸終點的垂直座標，預設為1.0。
5. proportional：設定漸層是否以成正比的方式填滿物件。
6. stops：漸層需由兩種以上的顏色組成，此參數設定各漸層顏色的比例。
7. cycleMethod：設定漸層循環方法，為以下的常數值：

• CycleMethod.NO_CYCLE
• CycleMethod.REFLECT
• CycleMethod.REPEAT

請參考以下範例示範以LinearGradient類別處理線性漸層，其中漸層需由兩種以上的顏色組成，各漸層顏色的比例由Stop類別處理，範例分別以紅色、橘色與黃色三種顏色組成漸層：

// 設定各漸層顏色的比例 Stop[] stops = new Stop[] {    new Stop(0.0, Color.RED),   new Stop(0.5, Color.ORANGE),   new Stop(1.0, Color.YELLOW) };

接著以LinearGradient類別的建構函式分別設定上述線性漸層的相關參數：

// 設定線性漸層 LinearGradient lineargradient1 = new LinearGradient(   0.0, 0.0, 1.0, 0.0, true, CycleMethod.REFLECT, stops);

當完成上述設定之後，則以setFill()方法設定物件的漸層效果：

Text text1 = new Text(); text1.setText("Linear Gradient"); // 設定漸層效果 text1.setFill(lineargradient1); text1.setFont(Font.font("Arial Black", FontWeight.BOLD, 60));

需注意的是，LinearGradient類別只有getXXX()取得相關參數的方法，並沒有setXXX()設定參數的方法，因此只能以LinearGradient類別的建構函式設定。

【執行結果】

請比較漸層軸始點與終點的水平與垂直座標之差異。

接著說明放射性漸層。

放射性漸層將數種顏色以放射狀的方式依比例漸進填滿物件，各漸層顏色的比例由Stop類別處理，其效果如下圖所示：

放射性漸層由javafx.scene.effect.RadialGradient類別處理，其建構函式如下：

  public RadialGradient(double focusAngle, double focusDistance, 
    double centerX, double centerY, double radius, 
    boolean proportional, CycleMethod cycleMethod, List<Stop> stops)
  public RadialGradient(double focusAngle, double focusDistance, 
    double centerX, double centerY, double radius, 
    boolean proportional, CycleMethod cycleMethod, Stop... stops)

其中參數：

1. focusAngle：設定由漸層中心點至第一個漸層顏色焦點的角度。
2. focusDistance：設定由漸層中心點至第一個漸層顏色焦點的距離，介於0.0與1.0之間。
3. centerX：設定漸層中心點的水平座標，預設為0.0。
4. centerY：設定漸層中心點的垂直座標，預設為0.0。
5. radius：設定漸層的半徑，預設為1.0。
6. proportional：設定漸層是否以成正比的方式填滿物件。
7. stops：設定各漸層顏色的比例。
8. cycleMethod：設定漸層循環方法。

請參考以下範例示範以RadialGradient類別處理放射性漸層，其中漸層需由兩種以上的顏色組成，各漸層顏色的比例由Stop類別處理，範例分別以紅色、橘色與黃色三種顏色組成漸層：

// 設定各漸層顏色的比例 Stop[] stops = new Stop[] {    new Stop(0.0, Color.RED),   new Stop(0.5, Color.ORANGE),   new Stop(1.0, Color.YELLOW) };

接著以RadialGradient類別的建構函式分別設定上述放射性漸層的相關參數：

// 設定放射性漸層 RadialGradient radialgradient1 = new RadialGradient(   0.0, 0.0, 0.5, 0.5, 0.1, true, CycleMethod.REFLECT, stops);

當完成上述設定之後，則以setFill()方法設定物件的漸層效果：

Text text1 = new Text(); text1.setText("Radial Gradient"); // 設定漸層效果 text1.setFill(radialgradient1); text1.setFont(Font.font("Arial Black", FontWeight.BOLD, 60));

需注意的是，RadialGradient類別與LinearGradient類別一樣，只有getXXX()取得相關參數的方法，並沒有setXXX()設定參數的方法，因此只能以RadialGradient類別的建構函式設定。

【執行結果】

【參考資料】

[1] 黃嘉輝，深入研究JavaFX 2。
[2] 黃嘉輝，JavaFX遊戲程式設計。
[3] Java Official Web Site：http://www.oracle.com/technetwork/java/index.html
[4] JavaFX：http://www.oracle.com/technetwork/java/javafx
[5] JavaFX 8.0 API Specification.
[6] Java Platform, Standard Edition 8 API Specification.

© Chia-Hui Huang