文档



JavaFX:使用JavaFX UI组件

40 应用效果到文本

在本章中,您将学习如何将单个效果和一系列效果应用到文本节点上。其中包括演示示例来说明所使用的API。

JavaFX SDK提供了一系列广泛的效果,这些效果位于javafx.scene.effect包中。有关可用效果的完整集合,请参阅API文档。您可以在TextEffects演示应用程序中看到一些效果的实际应用。该应用程序显示带有各种效果的文本节点。下载TextEffectsSample.zip文件,解压文件,将其保存在计算机上,并在NetBeans IDE中打开一个NetBeans项目。

透视效果

PerspectiveTansform类使您能够为二维内容模拟三维效果。透视变换可以将任意四边形映射到另一个四边形。该变换的输入是您的节点。要定义透视变换,您需要指定所有四个角的输出位置的x和y坐标。在TextEffects应用程序中,透视变换效果被设置为由矩形和文本组成的组,如示例40-1所示。

示例40-1

PerspectiveTransform pt = new PerspectiveTransform();
pt.setUlx(10.0f);
pt.setUly(10.0f);
pt.setUrx(310.0f);
pt.setUry(40.0f);
pt.setLrx(310.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.BLUE);
 
Text t = new Text();
t.setX(20.0f);
t.setY(65.0f);
t.setText("透视");
t.setFill(Color.YELLOW);
t.setFont(Font.font(null, FontWeight.BOLD, 36));
 
g.getChildren().add(r);
g.getChildren().add(t);
return g;

使用setCache(true)属性可以提高渲染节点的性能。

您可以在图40-1中看到透视变换的结果。

图40-1 带有透视效果的文本

图40-1 带有透视效果的文本的描述
图40-1 带有透视效果的文本的描述

模糊效果

GaussianBlur类基于高斯卷积核提供了一个模糊效果。

示例40-2展示了一个应用了高斯模糊效果的文本节点,该效果在TextEffects应用程序中实现。

示例40-2

Text t2 = new Text();
t2.setX(10.0f);
t2.setY(140.0f);
t2.setCache(true);
t2.setText("模糊文本");
t2.setFill(Color.RED);
t2.setFont(Font.font(null, FontWeight.BOLD, 36));
t2.setEffect(new GaussianBlur());
return t2;

你可以在图40-2中看到高斯模糊效果的结果。

图40-2 带有模糊效果的文本

图40-2的描述
图40-2的描述

投影效果

要实现投影效果,使用DropShadow类。你可以为文本的阴影指定颜色和偏移量。在TextEffects应用程序中,投影效果应用于红色文本,并提供了一个三像素的灰色阴影。你可以在示例40-3中看到代码。

示例40-3

DropShadow ds = new DropShadow();
ds.setOffsetY(3.0f);
ds.setColor(Color.color(0.4f, 0.4f, 0.4f));
 
Text t = new Text();
t.setEffect(ds);
t.setCache(true);
t.setX(10.0f);
t.setY(270.0f);
t.setFill(Color.RED);
t.setText("JavaFX投影效果...");
t.setFont(Font.font(null, FontWeight.BOLD, 32));

你可以在图40-3中看到应用的效果。

图40-3 带有投影效果的文本

图40-3的描述
图40-3的描述

内阴影效果

内阴影效果在内容的边缘内部渲染阴影。对于文本内容,您可以指定颜色和偏移量。在示例40-4中,可以看到在x和y方向上具有四个像素偏移的内阴影效果应用于文本节点。

示例40-4

InnerShadow is = new InnerShadow();
is.setOffsetX(4.0f);
is.setOffsetY(4.0f);

Text t = new Text();
t.setEffect(is);
t.setX(20);
t.setY(100);
t.setText("内阴影");
t.setFill(Color.YELLOW);
t.setFont(Font.font(null, FontWeight.BOLD, 80));

t.setTranslateX(300);
t.setTranslateY(300);
 
return t;

应用效果后的结果如图40-4所示。

图40-4 带有内阴影效果的文本

图40-4的描述
图40-4的描述

反射

Reflection类使您能够在原始文本下方显示其反射版本。您可以通过提供额外的参数来调整反射文本的视图,例如底部不透明度值、在反射中可见的输入部分的比例、输入文本和其反射之间的偏移以及顶部不透明度值。有关详细信息,请参阅API文档。

反射效果在示例40-5中的TextEffects应用程序中实现。

示例40-5

Text t = new Text();
t.setX(10.0f);
t.setY(50.0f);
t.setCache(true);
t.setText("JavaFX的反射...");
t.setFill(Color.RED);
t.setFont(Font.font(null, FontWeight.BOLD, 30));
 
Reflection r = new Reflection();
r.setFraction(0.7f);
 
t.setEffect(r);
 
t.setTranslateY(400);
return t;

您可以在图40-5中看到带有反射效果的文本节点。

图40-5 带有反射效果的文本

图40-5的描述
图40-5的描述

组合多个效果

在前一节中,您学习了如何将单个效果应用于文本节点。为了进一步丰富您的文本内容,您可以组合多个效果,并应用一系列效果以实现特定的视觉效果。考虑图40-6中的NeonSign应用程序。

图40-6 Neon Sign应用程序窗口

图40-6的描述如下
"图40-6 Neon Sign应用程序窗口"的描述

NeonSign应用程序的图形场景包括以下元素:

  • 用作背景的砖墙图像

  • 提供径向渐变填充的矩形

  • 具有一系列效果的文本节点

  • 用于输入文本数据的文本字段

背景设置在外部的.css文件中。

该应用程序使用绑定机制将文本节点的文本内容设置为文本字段的文本属性,如示例40-6所示。

示例40-6

Text text = new Text();
TextField textField = new TextField();
textField.setText("Neon Sign");
text.textProperty().bind(textField.textProperty());

您可以在文本字段中输入文本,并查看文本节点的更改内容。

一系列效果被应用于文本节点。主要效果是混合效果,它使用“MULTIPLY”模式将两个输入混合在一起:一个投影效果和另一个混合效果“blend1”。类似地,“blend1”效果结合了一个投影效果(“ds1”)和一个混合效果(“blend2”)。“blend2”效果结合了两个内阴影效果。使用这个效果链和不同的颜色参数,您可以将细微而复杂的颜色模式应用于文本对象。请参见示例40-7中的效果链代码。

示例40-7

Blend blend = new Blend();
blend.setMode(BlendMode.MULTIPLY);

DropShadow ds = new DropShadow();
ds.setColor(Color.rgb(254, 235, 66, 0.3));
ds.setOffsetX(5);
ds.setOffsetY(5);
ds.setRadius(5);
ds.setSpread(0.2);

blend.setBottomInput(ds);

DropShadow ds1 = new DropShadow();
ds1.setColor(Color.web("#f13a00"));
ds1.setRadius(20);
ds1.setSpread(0.2);

Blend blend2 = new Blend();
blend2.setMode(BlendMode.MULTIPLY);

InnerShadow is = new InnerShadow();
is.setColor(Color.web("#feeb42"));
is.setRadius(9);
is.setChoke(0.8);
blend2.setBottomInput(is);

InnerShadow is1 = new InnerShadow();
is1.setColor(Color.web("#f13a00"));
is1.setRadius(5);
is1.setChoke(0.4);
blend2.setTopInput(is1);

Blend blend1 = new Blend();
blend1.setMode(BlendMode.MULTIPLY);
blend1.setBottomInput(ds1);
blend1.setTopInput(blend2);

blend.setTopInput(blend1);

text.setEffect(blend);

在本文中,您学习了如何添加文本并应用各种效果到文本内容。有关可用效果的完整集合,请参阅API文档。

如果您需要在JavaFX应用程序中实现一个文本编辑区域,请使用HTMLEditor组件。有关HTMLEditor控件的更多信息,请参阅HTML编辑器

应用程序文件

源代码 

NetBeans项目 

关闭窗口

目录

JavaFX:使用JavaFX UI组件

展开 折叠