JavaFX官方教程（十三）之应用效果

翻译自 Applying Effects

创建视觉效果包含以下主题：

混合效果
绽放效果
模糊效果
投影效果
内阴影效果
反射
照明效果
透视效果
创建一系列效果

介绍如何使用视觉效果来增强JavaFX应用程序的外观。

所有效果都位于javafx.scene.effect包中，并且是类的子Effect类。有关特定类，方法或其他功能的更多信息，请参阅API文档。

混合效果

混合是一种效果，它使用一种预定义的混合模式将两个输入组合在一起。

在节点blend（node.setBlendMode()）的情况下，两个输入是：

正在渲染的节点（顶部输入）
节点下面的所有内容（底部输入）

底部输入的确定基于以下规则：

包括同一组中的所有较低Z阶兄弟姐妹。
如果组具有已定义的混合模式，则该过程停止，并定义底部输入。
如果该组具有默认混合模式，则包含该组下面的所有内容，使用相同的规则递归。
如果进程递归返回到根节点，则包含场景的背景绘制。

注意：

如果场景的背景颜色（通常是不透明的颜色）包含在底部输入中，则SRC_ATOP模式渲染在完全不透明的底部源上并且没有效果。在这种情况下，SRC_ATOP模式相当于SRC_OVER。

混合模式定义了对象混合在一起的方式。例如，在图5-1中，您可以看到应用于与方形分组的圆的某些混合模式的示例。

图5-1不同的混合模式

示例5-1显示了示例应用程序中混合效果的代码片段。

例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;}

绽放效果

基于可配置的阈值，布隆效果使图像看起来发光的部分更亮。阈值从0.0到1.0不等。默认情况下，阈值设置为0.3。

图5-2显示了默认阈值和阈值1.0下的bloom效果。

图5-2绽放效果

示例5-2显示了使用bloom效果的示例应用程序的代码片段。

例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;}

模糊效果

模糊是可用于为所选对象提供更多焦点的常见效果。使用JavaFX，您可以应用boxblur，运动模糊或高斯模糊。

BoxBlur

BoxBlur是一种模糊效果，它使用简单的盒式滤镜内核，在两个维度中可单独配置大小以控制应用于对象的模糊量，以及Iterations控制结果模糊质量的参数。

图5-3显示了两个模糊文本样本。

图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;}

运动模糊

运动模糊效果使用高斯模糊，具有可配置的半径和角度，以创建移动对象的效果。

图5-4显示了运动模糊对文本的影响。

图5-4运动模糊效果

示例5-4显示了一个代码片段，该示例代码片段在示例应用程序中创建半径设置为15且角度设置为45的运动模糊效果。

例5-4运动模糊示例

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

高斯模糊

高斯模糊是使用具有可配置半径的高斯算法来模糊对象的效果。

图5-5显示了高斯模糊对文本的影响。

图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;}

投影效果

投影是一种效果，可以呈现应用它的内容的阴影。您可以指定阴影的颜色，半径，偏移和一些其他参数。

图5-6显示了不同对象的阴影效果。

图5-6投影示例

例5-6显示了如何在文本和圆上创建阴影。

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

提示：

使阴影太宽，使元素看起来沉重。阴影的颜色应该是真实的，通常比背景颜色浅一些。
如果您有多个具有阴影的对象，请为所有对象定义相同的阴影。投影会给出来自一个方向的光的外观并在物体上投射阴影。

内阴影效果

内部阴影是一种效果，可以使用指定的颜色，半径和偏移量在给定内容的边缘内渲染阴影。

图5-7显示了纯文本和应用了内部阴影效果的相同文本。

图5-7内阴影

例5-7显示了如何在文本上创建内部阴影。

例5-7内阴影

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

反射

反射是一种效果，它将对象的反射版本呈现在实际对象下方。

注意：

具有反射效果的节点的反射将不响应节点上的鼠标事件或包含方法。

图5-8显示了应用于文本的反射。使用此setFraction方法指定可见反射的量。

图5-8反射效果

例5-8显示了如何在文本上创建反射效果。

示例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);}
}

照明效果

照明效果模拟照射在给定内容上的光源，其可用于使平面物体具有更逼真的三维外观。

图5-9显示了文本的照明效果。

图5-9照明效果

例5-9显示了如何在文本上创建光照效果。

示例5-9带有应用光照效果的文本

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

透视效果

透视效果创建了二维对象的三维效果。

透视效果如图5-10所示。

图5-10透视效果

透视变换可以将任何正方形映射到另一个正方形，同时保持线条的直线度。与仿射变换不同，源中的行的并行性不一定保留在输出中。

注意：

此效果不会调整输入事件的坐标或测量节点上的包含的任何方法。如果将透视效果应用于节点，则鼠标单击和包含方法未定义。

示例5-10是示例应用程序中的代码片段，显示了如何创建透视效果。

例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显示了哪些坐标会影响生成的图像。

图5-11透视效果的坐标

创建一系列效果

某些效果具有可用于创建效果链的输入属性。效果链可以是树状结构，因为一些效果有两个输入而一些没有任何输入。

在图5-12中，反射效果用作投影效果的输入，这意味着首先由反射效果反射矩形，然后将阴影效果应用于结果。

图5-12阴影和反射

例5-11带阴影和反射顺序应用的矩形

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);，则首先将阴影应用于矩形，然后结果将反射效果反映出来。

有关特定类，方法或其他功能的更多信息，请参阅API文档。