DOC-03-40 为文字添加特效

在本章中你将学到如何为Text Node应用单个效果和多个效果。本章中还包含了用来说明被使用的API的样例程序。

JavaFX的SDK在javafx.scene.effect包中提供了非常多的特效。想要了解所有的效果,请参考API文档。在TextEffects演示程序中你可以看到一些效果所起的作用。该程序使用多种效果来显示Text。请下载TextEffectsSample.zip文件,解压并保存解压后的文件,然后使用NetBeans IDE打开一个NetBeans工程。

透视效果

PerspectiveTansform类可以让你2D内容模仿出3D效果来。透视变换(perspective transformation)可以将任意的四边形内容映射到其它的四边形之中。变换的输入即是你的Node。要定义透视变换,你需要指定四个角的输出位置的x和y坐标。在TextEffects程序中,PerspectiveTransform效果被应用到一组矩形(Rectangle)和Text上,如例40-1所示。

40-1

使用setCache(true)来设置cache属性可以在绘制Node时提高性能。

你可以见到透视变换的结果,如图40-1所示。

40-1 有透视效果的Text

3-40-1 perspective

模糊效果

GaussianBlur类提供了一个基于高斯卷积积分(Gaussian convolution kernel)的模糊效果。

例40-2展示了在TextEffects程序中应用了高斯模糊效果的Text Node。

40-2

模糊效果的结果如图40-2所示。

40-2 有模糊效果的Text

3-40-2 gauss_blur

阴影效果

如果要实现阴影效果,则可以使用DropShadow类。你可以为Text的阴影设置颜色和偏移量。在TextEffects程序中,阴影特性被应用给红色Text并设置了3像素宽的灰色阴影。代码如例40-3所示。

40-3

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

40-3 有阴影效果的Text

3-40-3 drop_shadow

内阴影效果

内阴影(Inner Shadow)效果会在目标内容的内边缘绘制一个阴影。对Text来说,你可以指定阴影的颜色和偏移量。例40-4展示了一个在X和Y方向上均是4像素宽的内阴影效果是如何被应用到Text Node上的。

40-4

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

40-4 带有内阴影效果的Text

3-40-4 inner_shadow

反射效果

Reflection类使你可以在原始文本的下方显示出该文本的镜像。你可以通过添加额外的参数来调整反射文本的外观,例如底部的不透明度、反射文本的显示部分比例、原始文本和反射文本之间的偏移量,以及顶部的不透明度。要了解更多细节,请参考API文档。

在TextEffects程序中实现了反射特效,如例40-5所示。

40-5

你可以在图40-5中看到带有反射效果的Text Node。

40-5 带有反射效果的Text

3-40-5 reflections

组合多种效果

在前面几节中你学会了如何给Text Node应用单一特效。如果要进一步丰富你的文本内容,你可以组合多种特效,并使用一连串特效来获得指定的可视化效果。请看图40-6中的NeonSign程序。

40-6 Neon Sign程序窗口

3-40-6 neon_sign

NeonSign程序由以下几部分组成:

· 一张作为背景图的砖墙图片一个提供放射渐变填充效果的矩形

· 一个带有一连串特效的Text

· 一个用来输入文本的TextField

背景图是在一个外部.css文件中定义的。

该程序使用了一种绑定机制来设置Text Node上的文本内容。Text Node的text属性绑定到了TextField的text属性上,如例40-6所示。

40-6

你可以在TextField中输入内容并同时观察Text Node的内容变化。

Text Node上应用了一连串的效果。主要效果是一种使用了MULTIPLY模式的混合(Blend)效果,该效果将两种输入混合到一起:一个阴影效果和另外一个混合效果blend1。同样,blend1效果也是由一个阴影效果(ds1)和一个混合效果(blend2)组成。blend2效果由两个内阴影效果组成。使用这一连串效果并且改变颜色参数,你就可以为Text对象应用精细复杂的颜色图案。代码请见例40-7。

40-7

在本章中,你学会了如何添加Text并为Text内容应用多种视觉效果。想要了解所有效果的信息,请参考API文档。

如果你需要在JavaFX程序中实现一个文本编辑区域,可以使用HTMLEditor组件。要了解关于HTMLEditor控件的更多信息,请参考第21章HTML Editor。

程序文件

源代码(见附录D):

• TextEffects.java
• NeonSign.java

NetBeans 工程:

• TextEffectsSample.zip
• NeonSignSample.zip

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_texteffect/
百度已收录