DOC-08-05 应用视觉特效

本教程将描述如何使用视觉特效来改进你的JavaFX应用程序的外观。

所有的特效都位于javafx.scene.effect包中,且都是Effect类的子类。关于更多详细的类、方法或者附加资源的信息,请查看API文档。

混合特效(Blend Effect)

混合(Blend)是一种使用预定义的混合模式将两个输入组合到一起的特效。

如果一个node要应用混合特效(node.setBlendMode()),其两个输入如下:

● 将要被渲染的node (顶层输入)

● 位于node下面的所有东西(底层输入)

底层输入内容的决定基于以下规则:

● 在同一个Group中具有更低Z-order的所有内容都包括在内。

● 如果对应的Group具有明确定义的混合模式,则终止底层输入查找过程,之前所找到的内容都会包括在内作为底层输入

● 如果Group具有默认的混合模式,则所有在Group之下的节点都包括在内,并且继续递归应用此规则。

● 如果处理过程递归回到了根节点,那么scene的背景图也包括在内

注意:Scene的背景图往往是不透明的颜色,而如果它被作为底层输入,则SRC_ATOP模式会渲染在一个完全不透明的源上,它就不会有任何效果。这种情况下,SRC_ATOP 模式等同于SRC_OVER。

一个混合模式定义了对象被混合在一起的方式。如图5-1所示,你可以看到在几种不同混合模式下一个圆形与一个正方形的组合在一起效果。

5-1 几种不同的混合模式

8_5_1 blend_examples

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

5-1 混合特效

发光特效(Bloom Effect)

发光特效使图像中较亮的部分发光,发光效果基于一个可配置的阀值。阀值范围是0.0到1.0,默认是0.3。

图5-2显示了默认阀值和阀值为1.0两种情形的发光特效。

5-2 发光特效

8_5_2 bloom
例5-2展示了样例应用程序中发光特效的代码片段。

5-2 发光特效样例

模糊特效(Blur Effects)

模糊(Blurring)是一种常见的特效,可用于为选定对象提供焦点。在JavaFX中,你可以应用方框模糊、运动模糊或者高斯模糊。

方框模糊(BoxBlur)

方框模糊(BoxBlur)是一种使用了简单方框过滤器内核的模糊特效。你可以分别在两个维度上定义大小,以此来控制应用到对象上的模糊量,以及指定一个Iterations参数用来控制模糊结果的质量。

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

5-3方框模糊特效

8_5_3 boxblur
例5-3展示了方框模糊特效的代码片段。

5-3 方框模糊样例

动感模糊(Motion Blur)

动感模糊特效使用了高斯模糊,它可以配置半径和角度来创建移动对象的效果。

图5-4显示了动感模糊应用在一个文本上的效果。

5-3 动感模糊特效

8_5_4 motionblur

例5-4 展示了一个代码片段,在样例应用程序中创建了一个半径设置为15并且角度设置为45的动感模糊特效。

5-4 动感模糊样例

高斯模糊(Gaussian Blur)

高斯模糊是一种使用高斯算法并指定一个半径来实现对象模糊的特效。

图5-5显示了高斯模糊应用到一个文本上的效果。

5-5 高斯模糊

8_5_5 gaussianblur

例5-5展示了高斯模糊应用到一个文本上的代码片段。

5-5 高斯模糊

阴影特效(Drop Shadow Effect)

阴影是一种为内容渲染一个阴影的特效。你可以指定颜色、半径、位移以及阴影的一些其它参数。

图5-6显示了阴影特效应用在不同对象上的效果。

5-6 阴影特效样例

8_5_6 effect

例5-6展示了如何为一个文本和圆形创建阴影特效。

5-6 带阴影效果的文本和圆形

小窍门:

● 将阴影设置得太宽会给对应的元素一种沉重的感觉。阴影应选择逼真的颜色,一般是比元素自身的背景色浅一些。

● 如果你有多个带阴影特效的对象,让所有对象的阴影朝向一个方向。阴影特效给人一种光线从一个方向照射过来并形成了阴影的感觉。

内阴影特效(Inner Shadow Effect)

内阴影是一种使用特定的颜色、半径和偏移量为指定的内容在其边界之内渲染出一个阴影的特效。

图5-7显示了一个纯文本以及为它应用了内阴影特效后的效果。

5-7 内阴影

8_5_7 inner

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

5-7 内阴影

倒影(Reflection)

倒影是一种在实际对象之下渲染一个倒影的特效。

注意:节点的倒影不会响应节点的鼠标事件以其他控制方法。

图5-8显示了一个应用在文本上的倒影特效。使用setFraction方法来指定倒影的可见范围。

5-8 倒影特效

8_5_8 reflection

例5-8展示了如何在文本上创建倒影。

5-8 带倒影特效的文本

光照特效(Lighting Effect)

光照特效模拟一个光源照射在一个给定的内容上,它主要用来给扁平的对象一种逼真的三维立体效果。

图5-9显示了应用在文本上的光照特效。

5-9 光照特效

8_5_9 lighting

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

5-9 应用了光照特效的文本

透视特效(Perspective Effect)

透视特效为二维对象创建三维特效。

图5-10显示了透视特效。

5-10 透视特效

8_5_10 perspective

透视变换能将一个方形映射到另一个方形,并同时保持线条的直线性。但与仿射变换不同,线条的平行性在输出结果中不会被保持。

注意:这个特效不会调整节点的输入事件坐标,也不会调整任何在节点上测量拓扑包含关系的方法。如果为一个节点应用了透视特效,那么它的鼠标点击和包含关系相关方法就会变成未定义的。

例5-10展示了样例应用程序中关于如何创建透视特效的代码片段。

5-10 透视特效

图5-11显示了哪些坐标影响了结果图像。

5-11 透视特效的坐标

8_5_11 perspective_expl

创建一个特效链

一些特效带有一个input属性,你可以用它来创建一个特效链。这个特效链类似于树形结构,因为有的特效允许两个input参数,而有的则一个都没有。

图5-12的倒影特效被当作input参数传给了阴影特效,这意味着矩形首先被应用倒影特效,然后再在结果上应用阴影特效。

5-12 阴影和倒影

8_5_12 chain

5-11 依次应用了倒影特效和阴影特效的矩形

注意:如果你将chainEffects()方法中最后的两行代码修改为reflection.setInput(ds); 和rect.setEffect(reflection);,那么阴影特效会首先应用到矩形上,然后才是应用倒影特效。

关于更多详细的类、方法或者附加资源的信息,请查看API文档。

应用程序文件

NetBeans 工程

visual_effects.zip

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