翻譯自??Applying Effects

創(chuàng)建視覺效果包含以下主題：

• 混合效果

• 綻放效果

• 模糊效果

• 投影效果

• 內(nèi)陰影效果

• 反射

• 照明效果

• 透視效果

• 創(chuàng)建一系列效果

介紹如何使用視覺效果來增強(qiáng)JavaFX應(yīng)用程序的外觀。

所有效果都位于javafx.scene.effect包中，并且是類的子Effect類。有關(guān)特定類，方法或其他功能的更多信息，請(qǐng)參閱API文檔。

混合效果

混合是一種效果，它使用一種預(yù)定義的混合模式將兩個(gè)輸入組合在一起。

在節(jié)點(diǎn)blend（node.setBlendMode()）的情況下，兩個(gè)輸入是：

• 正在渲染的節(jié)點(diǎn)（頂部輸入）

• 節(jié)點(diǎn)下面的所有內(nèi)容（底部輸入）

底部輸入的確定基于以下規(guī)則：

• 包括同一組中的所有較低Z階兄弟姐妹。

• 如果組具有已定義的混合模式，則該過程停止，并定義底部輸入。

• 如果該組具有默認(rèn)混合模式，則包含該組下面的所有內(nèi)容，使用相同的規(guī)則遞歸。

• 如果進(jìn)程遞歸返回到根節(jié)點(diǎn)，則包含場(chǎng)景的背景繪制。

注意：

如果場(chǎng)景的背景顏色（通常是不透明的顏色）包含在底部輸入中，則SRC_ATOP模式渲染在完全不透明的底部源上并且沒有效果。在這種情況下，SRC_ATOP模式相當(dāng)于SRC_OVER。

混合模式定義了對(duì)象混合在一起的方式。例如，在圖5-1中，您可以看到應(yīng)用于與方形分組的圓的某些混合模式的示例。

圖5-1不同的混合模式

示例5-1顯示了示例應(yīng)用程序中混合效果的代碼片段。

例5-1混合效果

static Node blendMode() {Rectangle r = new Rectangle();r.setX(590);r.setY(50);r.setWidth(50);r.setHeight(50);r.setFill(Color.BLUE);Circle c = new Circle();c.setFill(Color.RED);c.setCenterX(590);c.setCenterY(50);c.setRadius(25);c.setBlendMode(BlendMode.SRC_ATOP);Group g = new Group();g.setBlendMode(BlendMode.SRC_OVER);g.getChildren().add(r);g.getChildren().add(c);return g;}

綻放效果

基于可配置的閾值，布隆效果使圖像看起來發(fā)光的部分更亮。閾值從0.0到1.0不等。默認(rèn)情況下，閾值設(shè)置為0.3。

圖5-2顯示了默認(rèn)閾值和閾值1.0下的bloom效果。

圖5-2綻放效果

示例5-2顯示了使用bloom效果的示例應(yīng)用程序的代碼片段。

例5-2 Bloom示例

static Node bloom() {Group g = new Group();Rectangle r = new Rectangle();r.setX(10);r.setY(10);r.setWidth(160);r.setHeight(80);r.setFill(Color.DARKBLUE);Text t = new Text();t.setText("Bloom!");t.setFill(Color.YELLOW);t.setFont(Font.font("null", FontWeight.BOLD, 36));t.setX(25);t.setY(65);g.setCache(true);//g.setEffect(new Bloom());Bloom bloom = new Bloom();bloom.setThreshold(1.0);g.setEffect(bloom);g.getChildren().add(r);g.getChildren().add(t);g.setTranslateX(350);return g;}

模糊效果

模糊是可用于為所選對(duì)象提供更多焦點(diǎn)的常見效果。使用JavaFX，您可以應(yīng)用bo??xblur，運(yùn)動(dòng)模糊或高斯模糊。

BoxBlur

BoxBlur是一種模糊效果，它使用簡(jiǎn)單的盒式濾鏡內(nèi)核，在兩個(gè)維度中可單獨(dú)配置大小以控制應(yīng)用于對(duì)象的模糊量，以及Iterations控制結(jié)果模糊質(zhì)量的參數(shù)。

圖5-3顯示了兩個(gè)模糊文本樣本。

圖5-3 BoxBlur效果

示例5-3是使用BoxBlur效果的代碼段。

例5-3 BoxBlur示例

static Node boxBlur() {Text t = new Text();t.setText("Blurry Text!");t.setFill(Color.RED);t.setFont(Font.font("null", FontWeight.BOLD, 36));t.setX(10);t.setY(40);BoxBlur bb = new BoxBlur();bb.setWidth(5);bb.setHeight(5);bb.setIterations(3);t.setEffect(bb);t.setTranslateX(300);t.setTranslateY(100);return t;}

運(yùn)動(dòng)模糊

運(yùn)動(dòng)模糊效果使用高斯模糊，具有可配置的半徑和角度，以創(chuàng)建移動(dòng)對(duì)象的效果。

圖5-4顯示了運(yùn)動(dòng)模糊對(duì)文本的影響。

圖5-4運(yùn)動(dòng)模糊效果

示例5-4顯示了一個(gè)代碼片段，該示例代碼片段在示例應(yīng)用程序中創(chuàng)建半徑設(shè)置為15且角度設(shè)置為45的運(yùn)動(dòng)模糊效果。

例5-4運(yùn)動(dòng)模糊示例

static Node motionBlur() {Text t = new Text();t.setX(20.0f);t.setY(80.0f);t.setText("Motion Blur");t.setFill(Color.RED);t.setFont(Font.font("null", FontWeight.BOLD, 60));MotionBlur mb = new MotionBlur();mb.setRadius(15.0f);mb.setAngle(45.0f);t.setEffect(mb);t.setTranslateX(300);t.setTranslateY(150);return t;}

高斯模糊

高斯模糊是使用具有可配置半徑的高斯算法來模糊對(duì)象的效果。

圖5-5顯示了高斯模糊對(duì)文本的影響。

圖5-5高斯模糊

例5-5顯示了使用高斯模糊效果模糊文本的代碼片段。

例5-5高斯模糊

static Node gaussianBlur() {Text t2 = new Text();t2.setX(10.0f);t2.setY(140.0f);t2.setCache(true);t2.setText("Gaussian Blur");t2.setFill(Color.RED);t2.setFont(Font.font("null", FontWeight.BOLD, 36));t2.setEffect(new GaussianBlur());return t2;}

投影效果

投影是一種效果，可以呈現(xiàn)應(yīng)用它的內(nèi)容的陰影。您可以指定陰影的顏色，半徑，偏移和一些其他參數(shù)。

圖5-6顯示了不同對(duì)象的陰影效果。

圖5-6投影示例

例5-6顯示了如何在文本和圓上創(chuàng)建陰影。

例5-6帶陰影的文本和圓圈

import javafx.collections.ObservableList; import javafx.application.Application; import javafx.scene.*; import javafx.stage.*; import javafx.scene.shape.*; import javafx.scene.effect.*; import javafx.scene.paint.*; import javafx.scene.text.*;public class HelloEffects extends Application {Stage stage;Scene scene;@Override public void start(Stage stage) {stage.show();scene = new Scene(new Group(), 840, 680);ObservableList<Node> content = ((Group)scene.getRoot()).getChildren();content.add(dropShadow()); stage.setScene(scene);}static Node dropShadow() {Group g = new Group();DropShadow ds = new DropShadow();ds.setOffsetY(3.0);ds.setOffsetX(3.0);ds.setColor(Color.GRAY);Text t = new Text();t.setEffect(ds);t.setCache(true);t.setX(20.0f);t.setY(70.0f);t.setFill(Color.RED);t.setText("JavaFX drop shadow effect");t.setFont(Font.font("null", FontWeight.BOLD, 32));DropShadow ds1 = new DropShadow();ds1.setOffsetY(4.0f);ds1.setOffsetX(4.0f);ds1.setColor(Color.CORAL);Circle c = new Circle();c.setEffect(ds1);c.setCenterX(50.0f);c.setCenterY(325.0f);c.setRadius(30.0f);c.setFill(Color.RED);c.setCache(true);g.getChildren().add(t);g.getChildren().add(c);return g;}public static void main(String[] args) {Application.launch(args);} }

提示：

• 使陰影太寬，使元素看起來沉重。陰影的顏色應(yīng)該是真實(shí)的，通常比背景顏色淺一些。

• 如果您有多個(gè)具有陰影的對(duì)象，請(qǐng)為所有對(duì)象定義相同的陰影。投影會(huì)給出來自一個(gè)方向的光的外觀并在物體上投射陰影。

內(nèi)陰影效果

內(nèi)部陰影是一種效果，可以使用指定的顏色，半徑和偏移量在給定內(nèi)容的邊緣內(nèi)渲染陰影。

圖5-7顯示了純文本和應(yīng)用了內(nèi)部陰影效果的相同文本。

圖5-7內(nèi)陰影

例5-7顯示了如何在文本上創(chuàng)建內(nèi)部陰影。

例5-7內(nèi)陰影

static Node innerShadow() {InnerShadow is = new InnerShadow();is.setOffsetX(2.0f);is.setOffsetY(2.0f);Text t = new Text();t.setEffect(is);t.setX(20);t.setY(100);t.setText("Inner Shadow");t.setFill(Color.RED);t.setFont(Font.font("null", FontWeight.BOLD, 80));t.setTranslateX(300);t.setTranslateY(300);return t;}

反射

反射是一種效果，它將對(duì)象的反射版本呈現(xiàn)在實(shí)際對(duì)象下方。

注意：

具有反射效果的節(jié)點(diǎn)的反射將不響應(yīng)節(jié)點(diǎn)上的鼠標(biāo)事件或包含方法。

圖5-8顯示了應(yīng)用于文本的反射。使用此setFraction方法指定可見反射的量。

圖5-8反射效果

例5-8顯示了如何在文本上創(chuàng)建反射效果。

示例5-8帶反射的文本

import javafx.scene.text.*; import javafx.scene.paint.*; import javafx.scene.effect.*; public class HelloEffects extends Application {Stage stage;Scene scene;@Override public void start(Stage stage) {stage.show();scene = new Scene(new Group(), 840, 680);ObservableList<Node> content = ((Group)scene.getRoot()).getChildren();content.add(reflection());stage.setScene(scene);}static Node reflection() {Text t = new Text();t.setX(10.0f);t.setY(50.0f);t.setCache(true);t.setText("Reflection in JavaFX...");t.setFill(Color.RED);t.setFont(Font.font("null", FontWeight.BOLD, 30));Reflection r = new Reflection();r.setFraction(0.9);t.setEffect(r);t.setTranslateY(400);return t;}public static void main(String[] args) {Application.launch(args);} }

照明效果

照明效果模擬照射在給定內(nèi)容上的光源，其可用于使平面物體具有更逼真的三維外觀。

圖5-9顯示了文本的照明效果。

圖5-9照明效果

例5-9顯示了如何在文本上創(chuàng)建光照效果。

示例5-9帶有應(yīng)用光照效果的文本

import javafx.application.Application; import javafx.collections.ObservableList; import javafx.geometry.VPos; import javafx.scene.effect.Light.Distant; import javafx.scene.*; import javafx.stage.*; import javafx.scene.shape.*; import javafx.scene.effect.*; import javafx.scene.paint.*; import javafx.scene.text.*;public class HelloEffects extends Application {Stage stage;Scene scene;@Override public void start(Stage stage) {stage.show();scene = new Scene(new Group());ObservableList<Node> content = ((Group)scene.getRoot()).getChildren();content.add(lighting());stage.setScene(scene); }static Node lighting() {Distant light = new Distant();light.setAzimuth(-135.0f);Lighting l = new Lighting();l.setLight(light);l.setSurfaceScale(5.0f);Text t = new Text();t.setText("JavaFX"+"\n"+"Lighting!");t.setFill(Color.RED);t.setFont(Font.font("null", FontWeight.BOLD, 70));t.setX(10.0f);t.setY(10.0f);t.setTextOrigin(VPos.TOP);t.setEffect(l);t.setTranslateX(0);t.setTranslateY(320);return t;}public static void main(String[] args) {Application.launch(args);} }

透視效果

透視效果創(chuàng)建了二維對(duì)象的三維效果。

透視效果如圖5-10所示。

圖5-10透視效果

透視變換可以將任何正方形映射到另一個(gè)正方形，同時(shí)保持線條的直線度。與仿射變換不同，源中的行的并行性不一定保留在輸出中。

注意：

此效果不會(huì)調(diào)整輸入事件的坐標(biāo)或測(cè)量節(jié)點(diǎn)上的包含的任何方法。如果將透視效果應(yīng)用于節(jié)點(diǎn)，則鼠標(biāo)單擊和包含方法未定義。

示例5-10是示例應(yīng)用程序中的代碼片段，顯示了如何創(chuàng)建透視效果。

例5-10透視效果

static Node perspective() {Group g = new Group();PerspectiveTransform pt = new PerspectiveTransform();pt.setUlx(10.0f);pt.setUly(10.0f);pt.setUrx(210.0f);pt.setUry(40.0f);pt.setLrx(210.0f);pt.setLry(60.0f);pt.setLlx(10.0f);pt.setLly(90.0f);g.setEffect(pt);g.setCache(true);Rectangle r = new Rectangle();r.setX(10.0f);r.setY(10.0f);r.setWidth(280.0f);r.setHeight(80.0f);r.setFill(Color.DARKBLUE);Text t = new Text();t.setX(20.0f);t.setY(65.0f);t.setText("Perspective");t.setFill(Color.RED);t.setFont(Font.font("null", FontWeight.BOLD, 36));g.getChildren().add(r);g.getChildren().add(t);return g;}

圖5-11顯示了哪些坐標(biāo)會(huì)影響生成的圖像。

圖5-11透視效果的坐標(biāo)

?

創(chuàng)建一系列效果

某些效果具有可用于創(chuàng)建效果鏈的輸入屬性。效果鏈可以是樹狀結(jié)構(gòu)，因?yàn)橐恍┬Ч袃蓚€(gè)輸入而一些沒有任何輸入。

在圖5-12中，反射效果用作投影效果的輸入，這意味著首先由反射效果反射矩形，然后將陰影效果應(yīng)用于結(jié)果。

圖5-12陰影和反射

例5-11帶陰影和反射順序應(yīng)用的矩形

import javafx.application.Application; import javafx.collections.ObservableList; import javafx.scene.*; import javafx.stage.*; import javafx.scene.shape.*; import javafx.scene.effect.*; import javafx.scene.paint.*; import javafx.scene.text.*;public class HelloEffects extends Application {Stage stage;Scene scene;@Override public void start(Stage stage) {stage.show();scene = new Scene(new Group());ObservableList<Node> content = ((Group)scene.getRoot()).getChildren();content.add(chainEffects());stage.setScene(scene);}static Node chainEffects() {Rectangle rect = new Rectangle();rect.setFill(Color.RED);rect.setWidth(200);rect.setHeight(100);rect.setX(20.0f);rect.setY(20.0f);DropShadow ds = new DropShadow();ds.setOffsetY(5.0);ds.setOffsetX(5.0);ds.setColor(Color.GRAY);Reflection reflection = new Reflection();ds.setInput(reflection); rect.setEffect(ds);return rect;}public static void main(String[] args) {Application.launch(args);} }

注意：

如果將chainEffects()方法中的最后兩行更改為reflection.setInput(ds);和rect.setEffect(reflection);，則首先將陰影應(yīng)用于矩形，然后結(jié)果將反射效果反映出來。

有關(guān)特定類，方法或其他功能的更多信息，請(qǐng)參閱API文檔。

應(yīng)用文件

NetBeans項(xiàng)目?

• visual_effects.zip

總結(jié)

以上是生活随笔為你收集整理的JavaFX官方教程（十三）之应用效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。