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

JavaFX Effect (1) Shadow

JavaFX之所以特殊，除了提供豐富的GUI物件、Builder、CSS樣式等之外，最重要的是JavaFX提供物件的特殊效果 (Effect)，更突顯物件的立體感與層次感，特殊效果分為陰影、漸層、模糊、反射、高光與深褐色調等。

JavaFX的陰影 (Shadow) 效果分為Drop Shadow與Inner Shadow兩種，分別由DropShadow與InnerShadow類別處理，皆繼承自Effect抽象類別，物件加入陰影效果，更能突顯物件的立體感。

Drop Shadow其陰影在物件的外圍，如同光由物件的上方照射所產生的陰影，因此稱為Drop，其效果如下圖所示：

Drop Shadow由javafx.scene.effect.DropShadow類別處理，其建構函式如下：

  public DropShadow()
  public DropShadow(double radius, Color color)
  public DropShadow(double radius, double offsetX, double offsetY,
    Color color)
  public DropShadow(BlurType blurType, Color color, double radius,
    double spread, double offsetX, double offsetY)

其中參數：

1. radius：設定陰影模糊核心的半徑。
2. color：設定陰影的顏色。
3. offsetX：設定陰影的水平偏移 (Offset) 位置。
4. offsetY：設定陰影的垂直偏移 (Offset) 位置。
5. spread：設定陰影模糊核心半徑的擴散比例，介於0.0與1.0之間。
6. blurType：設定模糊陰影的類型，為以下的常數值：

• BlurType.GAUSSIAN
• BlurType.ONE_PASS_BOX
• BlurType.TWO_PASS_BOX
• BlurType.THREE_PASS_BOX

請參考以下範例示範以DropShadow類別處理陰影，並介紹以下之方法：

• setColor()：設定陰影的顏色。
• setOffsetX()：設定陰影的水平偏移位置。
• setOffsetY()：設定陰影的垂直偏移位置。
• setRadius()：設定陰影模糊核心的半徑。

當完成上述設定之後，則以setEffect()方法設定物件的陰影效果：

DropShadow dropshadow = new DropShadow(); // 設定陰影的顏色 dropshadow.setColor(Color.GREY); // 設定陰影的水平偏移位置 dropshadow.setOffsetX(5.0); // 設定陰影的垂直偏移位置 dropshadow.setOffsetY(5.0); // 設定陰影模糊核心的半徑 dropshadow.setRadius(5.0); Text text = new Text(); // 設定陰影效果 text.setEffect(dropshadow); text.setText("Drop Shadow"); text.setFill(Color.BLACK); text.setFont(Font.font("Arial Black", FontWeight.BOLD, 60));

【執行結果】

接著說明Inner Shadow。

Inner Shadow其陰影在物件的內部，因此稱為Inner，其效果如下圖所示：

Inner Shadow與Drop Shadow的最大差別在於，除了Inner Shadow的陰影在物件內部之外，Drop Shadow以spread參數設定陰影模糊核心半徑的擴散 (Spread) 比例，而Inner Shadow則是以choke參數設定陰影模糊核心半徑的扼制 (Choke) 比例，扼制比例介於0.0與1.0之間，若為0.0，則陰影將全由模糊邏輯決定；若為1.0，則陰影將由物件內部擴散至物件邊緣，導致陰影幾乎佔據整個物件內部。

Inner Shadow由javafx.scene.effect.InnerShadow類別處理，其建構函式如下：

  public InnerShadow()
  public InnerShadow(double radius, Color color)
  public InnerShadow(double radius, double offsetX, double offsetY,
    Color color)
  public InnerShadow(BlurType blurType, Color color, double radius,
    double choke, double offsetX, double offsetY)

其中參數：

1. radius：設定陰影模糊核心的半徑。
2. color：設定陰影的顏色。
3. offsetX：設定陰影的水平偏移位置。
4. offsetY：設定陰影的垂直偏移位置。
5. choke：設定陰影模糊核心半徑的扼制比例，介於0.0與1.0之間。
6. blurType：設定模糊陰影的類型，為以下的常數值：

• BlurType.GAUSSIAN
• BlurType.ONE_PASS_BOX
• BlurType.TWO_PASS_BOX
• BlurType.THREE_PASS_BOX

請參考以下範例示範以InnerShadow類別處理陰影，並介紹以下之方法：

• setColor()：設定陰影的顏色。
• setChoke()：設定陰影模糊核心半徑的扼制比例。
• setOffsetX()：設定陰影的水平偏移位置。
• setOffsetY()：設定陰影的垂直偏移位置。
• setRadius()：設定陰影模糊核心的半徑。

當完成上述設定之後，則以setEffect()方法設定物件的陰影效果：

InnerShadow innershadow = new InnerShadow(); // 設定陰影的顏色 innershadow.setColor(Color.GREY); // 設定陰影模糊核心半徑的扼制比例 innershadow.setChoke(0.5); // 設定陰影的水平偏移位置 innershadow.setOffsetX(5.0); // 設定陰影的垂直偏移位置 innershadow.setOffsetY(5.0); // 設定陰影模糊核心的半徑 innershadow.setRadius(5.0); Text text = new Text(); // 設定陰影效果 text.setEffect(innershadow); text.setText("Inner Shadow"); text.setFill(Color.web("#BBBBBB")); text.setFont(Font.font("Arial Black", FontWeight.BOLD, 60));

【執行結果】

【參考資料】

[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