原文地址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 1 到Example 3 .
也可以使用javafx.scene.text.TextBuilder
类创建,见Example 4 .
设置字体和颜色
添加文本后就可以设置一些属性了。要设置使用的字体,实例化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 Text with a Linear Gradient Filling"
设置粗体和斜体
font
方法的 FontWeight
常数可以设置粗体,见Example 7 .
FontPosture
常数来设置斜体,见Example 8 .
应用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 .
模糊效果
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 .
外部阴影效果
要实现外部阴影效果,使用 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 .
内部阴影效果
内部阴影效果在内容的内边缘显示阴影。使用时也要指定颜色也偏移量。下面是在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 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 .
整合多做效果
前面学了如何使用单一效果,要丰富文本内容就要组合多种效果,应用一个效果链来获得特殊的视觉感触。看下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
控件的信息,查看第二十五回 。
相关推荐
【JavaFX2.0 体系结构和框架】深入解析 JavaFX2.0 是一个基于Java技术的丰富客户端平台,专为开发富互联网应用程序(RIAs)设计,它以其出色的动态画面和美观的用户界面而受到赞誉。尽管中文资料相对较少,但通过对...
### JavaFX 2.0 的 FXML 语言高级教程 #### 概述 JavaFX 2.0 引入了一种新的声明性标记语言——FXML(发音为 “fizz-le”),这是一种基于 XML 的语言,专门用于定义应用程序的用户界面。通过使用 FXML,开发者...
JavaFX 2.0 是一个强大的富互联网应用程序(RIA)平台,用于构建具有美观图形界面的应用程序。在JavaFX 2.0中,FXML(FXML Language)被引入,这是一种基于XML的声明性语言,专门用于定义应用程序的用户界面。这个...
javafx2.0,java,javafx,例子,代码 Sun公司(已于20092008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语 言开发富互联网应用程序(RIA)。JavaFX Script编程语言(以下称为JavaFX)是Sun微...
这个“javafx2.0 中文文档.zip”压缩包包含了关于JavaFX 2.0的中文文档,对于理解和学习这个技术至关重要。 首先,JavaFX 2.0的核心是它的 scenegraph 模型,这是一种基于节点的对象模型,用于构建复杂的用户界面。...
最新JavaFx 2.0 電子書 In Pro JavaFX 2: A Definitive Guide to Rich Clients with Java Technology, Jim Weaver, Weiqi Gao, Stephen Chin, Dean Iverson, and Johan Vos show you how you can use the JavaFX ...
JavaFX 2.0 入门指南是针对那些希望通过JavaFX快速开发富用户体验应用程序的开发者设计的。这个指南,源自Oracle官方,包含了中英文对照,旨在帮助初学者快速上手。在本文档中,你将学习如何利用JavaFX创建一个名为...
### JavaFX 2.0 内建控件教程 #### 1. UI控件概览 JavaFX 2.0 提供了一系列丰富的内置用户界面(UI)控件,这些控件可以帮助开发者快速构建美观且功能强大的应用程序。JavaFX UI 控件位于 `javafx.scene.control` ...
JavaFX 2.0 Introduction by Example.zip是javafx2.0的最新书籍《[JavaFX.2.0:Introduction.by.Example].Carl.Dea》上的源码!大家可以下载本书和源码一起看!我都上传了!
JavaFX 2.0 是 Oracle 公司推出的一个强大的富客户端开发平台,它允许开发者创建具有丰富图形用户界面和交互性的应用程序。NetBeans IDE 是一个流行的开源集成开发环境(IDE),支持多种编程语言,包括 Java。`...
- **JavaFX2.0中支持的UI控件**:详细列举了JavaFX2.0版本中提供的UI控件类型及其用途。 以上是对《JavaFX2.0基础教程》的主要知识点总结,希望能够帮助初学者快速了解JavaFX的基本概念和开发流程。
Javafx 2.0: Introduction by Example
JavaFX2.0平台是java客户端设计演进,使应用开发者易于创建和部署跨平台且表现一致的Rich Internet Application(RIAs)。JavafX是由Java技术构建,基于高性能硬件加速的媒体和图形引擎,JavaFX平台提供了一套丰富的...
根据给定文件的信息,我们可以提炼出关于JavaFX 2.0的重要知识点,这些知识点涵盖了JavaFX的基本概念、架构策略、发展历程以及其在图形用户界面(GUI)开发中的应用。 ### JavaFX 2.0:下一代GUI工具包 JavaFX 2.0...
JavaFX 2.0 Introduction by Example – PDF Books