JavaFX特效（1）陰影（Shadow）處理

JavaFX事件（4）手勢事件 << 前情

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

【執行結果】

請參考以下範例，除了以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()));
});
...

【執行結果】

接著說明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：https://www.oracle.com/technetwork/java/index.html
[4] JavaFX：https://www.oracle.com/technetwork/java/javafx
[5] JavaFX 8.0 API Specification.
[6] Java Platform, Standard Edition 8 API Specification.