JavaFX 效果 · ZetCode 中文系列教程

# JavaFX 效果 > 原文： [http://zetcode.com/gui/javafx/effects/](http://zetcode.com/gui/javafx/effects/) JavaFX 包含`javafx.scene.effect`包，該包具有執行各種視覺效果的一組或類。在本章中，我們創建`DropShadow`，`Reflection`，`Lighting`，`GaussianBlur`，`SepiaTone`和`PerspectiveTransform`效果。我們還將展示如何組合多種效果。通過`setEffect()`方法將效果應用于節點的`effectProperty`。 ## 陰影 `DropShadow`是一種高級效果，可使用指定的顏色，半徑和偏移量在內容后面渲染陰影。 `DropShadowEx.java` ```java package com.zetcod; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.effect.DropShadow; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program applies a DropShadow effect * on a Rectangle. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class DropShadowEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); Rectangle rect = new Rectangle(0, 0, 100, 100); rect.setFill(Color.GREENYELLOW); DropShadow ds = new DropShadow(15, Color.DARKGREEN); rect.setEffect(ds); root.getChildren().add(rect); Scene scene = new Scene(root, 250, 200, Color.WHITESMOKE); stage.setTitle("DropShadow"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例在矩形周圍創建陰影。 ```java Rectangle rect = new Rectangle(0, 0, 100, 100); rect.setFill(Color.GREENYELLOW); ``` 構造一個綠色黃色矩形。 ```java DropShadow ds = new DropShadow(15, Color.DARKGREEN); ``` 創建`DropShadow`效果。構造器接受半徑和顏色。 ```java rect.setEffect(ds); ``` 通過`setEffect()`方法應用效果。 ![DropShadow](https://img.kancloud.cn/1b/fd/1bfd8380313e524f7c657bd89be48d97_252x226.jpg) 圖：`DropShadow` ## 反射 `Reflection`是一種將輸入的反射版本呈現在實際輸入內容之下的效果。 `ReflectionEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.effect.Reflection; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program applies a Reflection effect * on a Text node. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class ReflectionEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); Text text = new Text(); text.setText("ZetCode"); text.setFill(Color.STEELBLUE); text.setFont(Font.font("Serif", FontWeight.BOLD, 60)); Reflection ref = new Reflection(); text.setEffect(ref); root.getChildren().add(text); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Reflection"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 本示例在`Text`節點上應用`Reflection`效果。 ```java Text text = new Text(); text.setText("ZetCode"); text.setFill(Color.STEELBLUE); text.setFont(Font.font("Serif", FontWeight.BOLD, 60)); ``` 創建一個`Text`控件。它的油漆是`STEELBLUE`。字體變為粗體和放大。 ```java Reflection ref = new Reflection(); text.setEffect(ref); ``` 將創建默認的`Reflection`并將其應用于文本控件。 ![Reflection](https://img.kancloud.cn/e1/dc/e1dcb676e377e11ba6a16ac8a43d8f54_302x276.jpg) 圖：反射 ## 燈光 `Lighting`模擬照在給定內容上的光源，該光源可用于為平面對象提供更逼真的三維外觀。 `Light`源的`setAzimuth()`方法設置方位角-光源的方向角。 `LightingEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.beans.property.DoubleProperty; import javafx.beans.property.SimpleDoubleProperty; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Slider; import javafx.scene.effect.Light; import javafx.scene.effect.Lighting; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program applies a Lighting effect on * a Text control. The azimuth of the light is * controlled by a Slider. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class LightingEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { VBox root = new VBox(30); root.setPadding(new Insets(10)); DoubleProperty azimuth = new SimpleDoubleProperty(0); Light.Distant light = new Light.Distant(); light.setAzimuth(0); Lighting lighting = new Lighting(light); lighting.setSurfaceScale(5.0); Text text = new Text(); text.setText("ZetCode"); text.setFill(Color.LIGHTSKYBLUE); text.setFont(Font.font(null, FontWeight.BOLD, 60)); Slider slider = new Slider(1, 360, 0); azimuth.bind(slider.valueProperty()); slider.valueProperty().addListener(event -> { light.setAzimuth(azimuth.get()); lighting.setLight(light); text.setEffect(lighting); }); text.setEffect(lighting); root.getChildren().addAll(slider, text); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Lighting"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 本示例對`Text`控件應用`Lighting`效果。光的方位角由`Slider`控制。 ```java Light.Distant light = new Light.Distant(); light.setAzimuth(0); ``` 創建一個`Light`源。 ```java Lighting lighting = new Lighting(light); ``` 該行使用指定的光源創建`Lighting`的新實例。 ```java Text text = new Text(); text.setText("ZetCode"); text.setFill(Color.LIGHTSKYBLUE); text.setFont(Font.font(null, FontWeight.BOLD, 60)); ``` 這是在其上設置了`Lighting`效果的`Text`控件。 ```java Slider slider = new Slider(1, 360, 0); azimuth.bind(slider.valueProperty()); slider.valueProperty().addListener(event -> { light.setAzimuth(azimuth.get()); lighting.setLight(light); text.setEffect(lighting); }); ``` `Slider`控件管理光源的方位角。 ![Lighting](https://img.kancloud.cn/9e/34/9e34bd7a65d239090b498e1a3ac4684d_302x276.jpg) 圖：`Lighting` ## 高斯模糊 `GaussianBlur`是使用具有可配置半徑的高斯卷積核的模糊效果。 `GaussianBlurEx.java` ```java package com.zetcode; import javafx.application.Application; import static javafx.application.Application.launch; import javafx.beans.property.DoubleProperty; import javafx.beans.property.SimpleDoubleProperty; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.control.Slider; import javafx.scene.effect.GaussianBlur; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.text.Font; import javafx.scene.text.Text; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program applies a GaussianBlur effect on * a Text control. The radius of the blur is * controlled by a Slider. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class GaussianBlurEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { VBox root = new VBox(30); root.setPadding(new Insets(10)); DoubleProperty radius = new SimpleDoubleProperty(0); Text blurredText = new Text("Inception"); blurredText.setFont(Font.font(38)); Slider slider = new Slider(1, 20, 1); radius.bind(slider.valueProperty()); slider.valueProperty().addListener(event -> { blurredText.setEffect(new GaussianBlur(radius.get())); }); root.getChildren().addAll(slider, blurredText); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Blur effect"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 本示例對`Text`控件應用`GaussianBlur`效果。模糊的半徑由`Slider`控制。 ```java Text blurredText = new Text("Inception"); blurredText.setFont(Font.font(38)); ``` 模糊效果將應用于此文本控件。 ```java Slider slider = new Slider(1, 20, 1); radius.bind(slider.valueProperty()); slider.valueProperty().addListener(event -> { blurredText.setEffect(new GaussianBlur(radius.get())); }); ``` `Slider`控件管理`GaussianBlur`效果的`radius`屬性。 ![GaussianBlur](https://img.kancloud.cn/2d/d3/2dd334097b1d601fab558a302207776d_302x276.jpg) 圖：`GaussianBlur` ## 棕褐色調 `SepiaTone`是產生棕褐色調效果的濾鏡，類似于古董照片。 `SepiaToneEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.beans.binding.Bindings; import javafx.scene.CacheHint; import javafx.scene.Scene; import javafx.scene.effect.ColorAdjust; import javafx.scene.effect.Effect; import javafx.scene.effect.SepiaTone; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program applies a SepiaTone effect * on an Image when a mouse pointer is over * the image. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class SepiaToneEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); Image image = new Image("file:mushroom.png"); ImageView iw = new ImageView(image); SepiaTone sepia = new SepiaTone(); iw.effectProperty().bind( Bindings .when(iw.hoverProperty()) .then((Effect) sepia) .otherwise((Effect) null) ); iw.setCache(true); iw.setCacheHint(CacheHint.SPEED); root.getChildren().add(iw); Scene scene = new Scene(root); stage.setTitle("SepiaTone"); scene.setFill(Color.WHITESMOKE); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 當鼠標指針懸停在圖像上時，該示例在`Image`上應用`SepiaTone`效果。 ```java Image image = new Image("file:mushroom.png"); ImageView iw = new ImageView(image); ``` 我們從磁盤加載`Image`并創建一個`ImageView`控件。 ```java SepiaTone sepia = new SepiaTone(); iw.effectProperty().bind( Bindings .when(iw.hoverProperty()) .then((Effect) sepia) .otherwise((Effect) null) ); ``` 當鼠標指針位于`ImageView`控件的邊界上時，將設置`SepiaTone`效果。 ```java iw.setCache(true); iw.setCacheHint(CacheHint.SPEED); ``` 出于性能原因，將緩存節點渲染。 ## 透視變換 `PerspectiveTransform`提供輸入內容的非仿射變換。它通常用于在二維內容上創建三維效果。 `PerspectiveEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.effect.PerspectiveTransform; import javafx.scene.layout.Pane; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program creates a chessboard * with a PerspectiveTransform effect. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class PerspectiveEx extends Application { private final int SIZE = 50; @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); Pane board = new Pane(); for (int row = 0; row < 8; row++) { for (int col = 0; col < 8; col++) { Rectangle r = new Rectangle(col * SIZE, row*SIZE, SIZE, SIZE); if ((col+row) % 2 == 0) { r.setFill(Color.WHITE); } else { r.setFill(Color.BLACK); } board.getChildren().add(r); } } PerspectiveTransform e = new PerspectiveTransform(); e.setUlx(30); // Upper-left point e.setUly(170); e.setUrx(370); // Upper-right point e.setUry(170); e.setLlx(0); // Lower-left point e.setLly(300); e.setLrx(400); // Lower-right point e.setLry(300); board.setEffect(e); root.getChildren().add(board); Scene scene = new Scene(root, Color.WHITESMOKE); stage.setTitle("ChessBoard"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例形成具有`PerspectiveTransform`效果的棋盤。 ```java for (int row = 0; row < 8; row++) { for (int col = 0; col < 8; col++) { Rectangle r = new Rectangle(col * SIZE, row*SIZE, SIZE, SIZE); if ((col+row) % 2 == 0) { r.setFill(Color.WHITE); } else { r.setFill(Color.BLACK); } board.getChildren().add(r); } } ``` 此代碼產生 64 個矩形。矩形具有黑色和白色。 ```java PerspectiveTransform e = new PerspectiveTransform(); e.setUlx(30); // Upper-left point e.setUly(170); e.setUrx(370); // Upper-right point e.setUry(170); e.setLlx(0); // Lower-left point e.setLly(300); e.setLrx(400); // Lower-right point e.setLry(300); board.setEffect(e); ``` 實例化一個`PerspectiveTransform`并將其應用于該節點。我們提供四個角點的 x 和 y 坐標。這些點形成一個矩形，在其中渲染效果。 ![Chessboard](https://img.kancloud.cn/69/4b/694b922d8deb5af11c25b9a150970f9d_402x426.jpg) 圖：`Chessboard` ## 組合效果可以組合效果。如果已經設置了一種效果，則`setEffect()`方法將替換一種效果。為了組合多種效果，我們使用`Effect`的`setInput()`方法。 `CombiningEffectsEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.effect.Light; import javafx.scene.effect.Lighting; import javafx.scene.effect.Reflection; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.stage.Stage; /** * ZetCode JavaFX tutorial * * This program combines a Reflection effect * with a Lighting effect on a Text node. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: June 2015 */ public class CombiningEffectsEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { StackPane root = new StackPane(); Light.Distant light = new Light.Distant(); light.setAzimuth(50); Lighting lighting = new Lighting(); lighting.setLight(light); lighting.setSurfaceScale(5); Text text = new Text(); text.setText("ZetCode"); text.setFill(Color.CADETBLUE); text.setFont(Font.font(null, FontWeight.BOLD, 60)); Reflection ref = new Reflection(); ref.setInput(lighting); text.setEffect(ref); root.getChildren().add(text); Scene scene = new Scene(root, 300, 250, Color.WHITESMOKE); stage.setTitle("Combining effects"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例程序在`Text`節點上結合了`Reflection`效果和`Lighting`效果。 ```java Light.Distant light = new Light.Distant(); light.setAzimuth(50); Lighting lighting = new Lighting(); lighting.setLight(light); lighting.setSurfaceScale(5.0); ``` 這些行創建`Lighting`效果。 ```java Text text = new Text(); text.setText("ZetCode"); text.setFill(Color.CADETBLUE); text.setFont(Font.font(null, FontWeight.BOLD, 60)); ``` 創建一個`Text`控件。字體是放大和粗體。文本的顏色是`CADETBLUE`。 ```java Reflection ref = new Reflection(); ref.setInput(lighting); ``` 構造了`Reflection`效果。使用`setInput()`方法將其與照明效果結合在一起。 ```java text.setEffect(ref); ``` 效果的最終組合通過`setEffect()`方法應用于節點。 ![Combining effects](https://img.kancloud.cn/a3/57/a35752e5c018a06b7da005752673693c_302x276.jpg) 圖：組合效果在本章中，我們創建了幾種視覺效果。