2014年3月28日 星期五

JavaFX Effect (1) Shadow

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

JavaFX的陰影 (Shadow) 效果分為Drop Shadow與Inner Shadow兩種,分別由DropShadowInnerShadow類別處理,皆繼承自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


沒有留言:

張貼留言