开发者社区> davelet> 正文

(翻译)第二十七回 JavaFX2.0 文本Text及其特效

简介: 原文地址http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm   文本讲述如何在JavaFX2.0应用中加入文本和如何为文本提供花俏的效果。
+关注继续查看

原文地址http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm

 

文本讲述如何在JavaFX2.0应用中加入文本和如何为文本提供花俏的效果。

引子

JavaFX 2.0应用的图形内容包含一些对象,它们被组织在一个成为场景图的类树结构中。场景图中的每个元素成为一个结点,结点可以管理很多不同种类的内容,包括文本。结点可以转换和移动,也可以应用多种效果。为所有结点类型使用共同特点使得可以提供复杂的文本内容来满足现在的富网络应用(RIAs).

JavaFX 2.0发布版提供了javafx.scene.text.Text类用来显示文本。 Text类继承自 Node 类,所以可以为其应用特效、动画、转换,和其他结点一样的。而又Node类继承自 Shape 类,可以像其他形状一样为其设置描边和填充效果。

 

添加Text

To add a text object to your application, 要添加文本,使用下面任一构造方法。Example 1Example 3 .

Example 1

Text t = new Text();
t.setText("This is a text sample");

Example 2

Text t = new Text("This is a text sample");

Example 3

Text t = new Text (10, 20, "This is a text sample");

也可以使用javafx.scene.text.TextBuilder 类创建,见Example 4 .

Example 4

Text t = TextBuilder.create().text("This is a text sample").build();

设置字体和颜色

添加文本后就可以设置一些属性了。要设置使用的字体,实例化javafx.scene.text.Font 类。Font.font()方法可以指定字体和字号,也可以像下面这样设置颜色 Example 5 .

Example 5

t.setText("This is a text sample");
t.setFont(Font.font ("Verdana", 20));
t.setFill(Color.RED);

或者使用系统字体,它是依赖于不同OS平台的。这样的话,使用Font.getDefault() 方法。

不使用单一颜色,也可以使用线性渐变填充,见Example 6 .

Example 6

Text text = TextBuilder.create().text("Stroke and Fill").
                    font(Font.font("Tahoma", 100)).build();
text.setFill(new LinearGradient(0, 0, 1, 2, true, CycleMethod.REPEAT, new
         Stop[]{new Stop(0, Color.AQUA), new Stop(0.5f, Color.RED)}));
text.setStrokeWidth(1);
text.setStroke(Color.BLACK);

效果如下 Figure 1 .

Figure 1 Text with a Linear Gradient Filling

Description of Figure 1 follows
Description of "Figure 1 Text with a Linear Gradient Filling"

设置粗体和斜体

font 方法的 FontWeight 常数可以设置粗体,见Example 7 .

Example 7

t.setFont(Font.font("Verdana", FontWeight.BOLD, 70));

 FontPosture 常数来设置斜体,见Example 8 .

Example 8

t.setFont(Font.font("Verdana", FontPosture.ITALIC, 20));

使用定制Font

如果需要使用某种独特的字体而其他机器上很可能没有安装,可以在 JavaFX 2.0应用中包含TrueType字体 (.ttf) 或OpenType字体 (.otf)。

要包含 TrueType或 OpenType字体,这样做:

  1. 在工程目录下创建 resources/fonts文件夹

  2. 把字体文件复制到fonts子文件夹下

  3. 在代码中找下面这样加载字体。Example 9 .

    Example 9

    text.setFont(Font.loadFont("file:resources/fonts/isadoracyr.ttf", 120));
    

该字体如下 Figure 2 .

 

应用Effect

JavaFX 2.0发布版在javafx.scene.effect 包中提供了大量特效。前面提到,可以为文本结点应用特效。完整的效果集合,查看API文档。可以通过TextEffects示例应用查看一些效果。该应用中文本结点使用了一系列效果。从http://download.oracle.com/javafx/2.0/text/TextEffects.java.html 下载 texteffects.zip 文件并解压到本地,用NB打开为工程。

 

透视效果

PerspectiveTransform类使得可以在二维内容中模拟三维效果。透视转换可以将一个任意的四边形映射为另一个四边形。输入就是一个结点,而输出依赖于指定的四个角的X和Y坐标。 在TextEffects 应用中,PerspectiveTransform 效果是为一组包含矩形和文本的group应用的,见Example 10 。

Example 10

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("Perspective");
t.setFill(Color.YELLOW);
t.setFont(Font.font(null, FontWeight.BOLD, 36));
 
g.getChildren().add(r);
g.getChildren().add(t);
return g;

效果如下 Figure 3 .

Figure 3 Text with a Perspective Effect

Description of Figure 3 follows
Description of "Figure 3 Text with a Perspective Effect"

 

模糊效果

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

Example 11 是一个应用了模糊效果的文本结点,见TextEffects 应用。

 

Example 11

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

 

效果如下 Figure 4 .

Figure 4 Text with a Blur Effect

Description of Figure 4 follows
Description of "Figure 4 Text with a Blur Effect "

外部阴影效果

要实现外部阴影效果,使用 DropShadow 类。可以为文本阴影指定一种颜色和偏移量。在TextEffects 应用中,文本是红色的,而外边阴影效果是3点的灰色。代码见Example 12 .

Example 12

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 drop shadow...");
t.setFont(Font.font(null, FontWeight.BOLD, 32));

效果如下 Figure 5 .

Figure 5 Text with a Drop Shadow Effect

Description of Figure 5 follows
Description of "Figure 5 Text with a Drop Shadow Effect"

内部阴影效果

内部阴影效果在内容的内边缘显示阴影。使用时也要指定颜色也偏移量。下面是在x和y方向都是4点偏移的内部阴影效果代码Example 13 .

Example 13

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("InnerShadow");
t.setFill(Color.YELLOW);
t.setFont(Font.font(null, FontWeight.BOLD, 80));
 
t.setTranslateX(300);
t.setTranslateY(300);
 
return t;

Figure 6 Text with an Inner Shadow Effect

Description of Figure 6 follows
Description of "Figure 6 Text with an Inner Shadow Effect"

反射

Reflection类呈现的是原始文本的倒影。也可以通过提供额外的参数来调整文本反射视图,如 底透明度、反射可见比、与原文距离、顶透明度。更多细节,查看API文档。

 TextEffects 应用中的反射效果实现见Example 14 .

Example 14

Text t = new Text();
t.setX(10.0f);
t.setY(50.0f);
t.setCache(true);
t.setText("Reflections on 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;

运行后见 Figure 7 .

Figure 7 Text with a Reflection Effect

Description of Figure 7 follows
Description of "Figure 7 Text with a Reflection Effect"

整合多做效果

 前面学了如何使用单一效果,要丰富文本内容就要组合多种效果,应用一个效果链来获得特殊的视觉感触。看下NeonSign 应用(点击下载) 的效果Figure 8 .

 NeonSign 应用的图形场景中包含了以下元素:

  • 背景使用的是一副砖墙图片

  • 一个矩形提供了放射渐变填充

  • 一个文本结点使用了效果链

  • 一个文本域用于输入数据

该应用使用了一个绑定机制来设置文本结点显示输入的文本值。文本结点的文本属性(textProperty)绑定到了文本域的文本属性,见Example 15 .

Example 15

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

可以看到文本框输入的变化会引起文本结点的变化

文本结点使用了效果链。主要的效果是一个混合效果,使用了MULTIPLY模式来结合两种输入:一个外部阴影效果和另一个混合效果 blend1。类似地, blend1 效果结合了一个外部阴影效果(ds1 )和一个混合效果 (blend2 )。blend2 效果结合了两种内部阴影效果。使用这个效果链和不同的颜色为文本对象应用了精细和复杂的颜色模式。下面是效果链的代码Example 16 .

Example 16

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();
is.setColor(Color.web("#f13a00"));
is.setRadius(5);
is.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文档。如果要在应用中实现一个文本编辑区,使用HTMLEditor组件。关于 HTMLEditor 控件的信息,查看第二十五回

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
18884 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
28094 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13102 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22089 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15567 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20164 0
+关注
davelet
擅长java开发,喜欢数学和物理。 现供职于永辉云创。
200
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载