JavaFX特效(1)陰影(Shadow)處理 by 黃嘉輝 | CodeData
top

JavaFX特效(1)陰影(Shadow)處理

分享:

JavaFX事件(4)手勢事件 << 前情

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

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

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

Drop Shadow

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

【執行結果】

4-3

請參考以下範例,除了以DropShadow類別處理陰影之外,並以顏色選擇器、滑動軸與複合方塊分別設定陰影顏色、陰影的水平與垂直偏移位置、陰影模糊核心半徑、擴散比例、模糊陰影類型。

當以顏色選擇器選擇顏色時,則以所選擇的顏色設定陰影顏色:

// Set Shadow Color
Label lblColor1 = new Label("Shadow Color:");
colorpicker1 = new ColorPicker(Color.GREY);
colorpicker1.setPrefWidth(90);

// Event with Lambda Expression
colorpicker1.setOnAction(e-> {
    // 設定陰影顏色
    dropshadow.setColor(colorpicker1.getValue());
});

當點選滑動軸時,則以滑動軸的目前值分別設定陰影的水平與垂直偏移位置、陰影模糊核心半徑、擴散比例:

// Set Offset X
Label title1 = new Label("Offset X:");
final Label lblValue1 = new Label(
  new DecimalFormat("0.0").format(dropshadow.getOffsetX()));
lblValue1.setPrefSize(100, 25);

final Slider slider1 = new Slider();
slider1.setOrientation(Orientation.HORIZONTAL);
slider1.setMin(-20.0);
slider1.setMax(20.0);
slider1.setValue(dropshadow.getOffsetX());
slider1.setMinorTickCount(1);
slider1.setMajorTickUnit(2.0);
slider1.setBlockIncrement(2.0);
slider1.setPrefSize(200, 25);
slider1.setSnapToTicks(true);

// Event with Lambda Expression
slider1.valueProperty().addListener(
  (ObservableValue<? extends Number> observable, 
  Number oldValue, Number newValue) -> {

    // 設定陰影的水平偏移位置
    dropshadow.setOffsetX(slider1.getValue());  
    lblValue1.setText(new DecimalFormat("0.0").format(
      slider1.getValue()));
});
...

【執行結果】

DropShadow3

接著說明Inner Shadow。

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

4-2

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

【執行結果】

4-4

【參考資料】
[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.

分享:
按讚!加入 CodeData Facebook 粉絲群

留言

留言請先。還沒帳號註冊也可以使用FacebookGoogle+登錄留言

關於作者

黃嘉輝副教授,目前任職於國立臺北商業大學企業管理學系,喜歡寫程式,特別愛Java,範例可參考教學網站

熱門論壇文章

熱門技術文章