Java 學習之路
JavaFX特效（2）漸層（Gradient）處理
|
JavaFX 3D（3）PhongMaterial 貼圖處理 << 前情 JavaFX的漸層 (Gradient) 效果分為線性漸層 (Linear Gradient) 與放射性漸層 (Radial Gradient) 兩種，分別由LinearGradient與RadialGradient類別處理，皆繼承自Paint抽象類別。Gradient原意為傾斜度，但其效果有如漸層一般，因此譯為漸層。漸層需由兩種以上的顏色組成，各漸層顏色的比例由Stop類別處理。 線性漸層將數種顏色以線性的方式依比例漸進填滿物件，其效果如下圖所示：
線性漸層由javafx.scene.effect.LinearGradient類別處理，其建構函式如下： public LinearGradient(double startX, double startY, 1. startX：設定漸層軸始點的水平座標，預設為0.0。
請參考以下範例示範以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, 其中參數： 1. focusAngle：設定由漸層中心點至第一個漸層顏色焦點的角度。 請參考以下範例示範以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類別的建構函式設定。 【執行結果】
請參考以下範例以移動滑動軸設定漸層中心點的水平與垂直座標，產生如同移動光源照射球的效果，以模擬立體球與光源移動的效果： Label titleX = new Label("Light Pos. X:");
final Label lblValueX = new Label(
new DecimalFormat("0.0").format(circle.getCenterX() - 20));
lblValueX.setPrefSize(50, 25);
final Slider sliderX = new Slider();
...
sliderX.valueProperty().addListener(new ChangeListener() {
@Override public void changed(
ObservableValue<? extends Number> observable,
Number oldValue, Number newValue) {
circle.setFill(new RadialGradient(0, 0.1,
circle.getCenterX() + sliderX.getValue(),
circle.getCenterY() + sliderY.getValue(),
80, false, CycleMethod.NO_CYCLE, stops));
lblValueX.setText(new DecimalFormat("0.0").format(
sliderX.getValue()));
}
});
...
【執行結果】
【參考資料】 [1] 黃嘉輝，深入研究JavaFX 2。 |
關於作者
