JavaFX学习之道：文本Text及其特效

冷不防 2021-09-10 09:18 538阅读 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 1][] 到[Example 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"][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][] .

Figure 2 Custom Font

![Description of Figure 2 follows][]  
[Description of "Figure 2 Custom Font"][Description of _Figure 2 Custom Font]

## 应用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]

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"][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 "][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"][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"][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"][Description of _Figure 7 Text with a Reflection Effect]

## 整合多做效果 ##

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

Figure 8

![Description of Figure 8 follows][]  
[Description of "Figure 8 "][Description of _Figure 8]

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

*  背景使用的是一副砖墙图片
 *  一个矩形提供了放射渐变填充
 *  一个文本结点使用了效果链
 *  一个文本域用于输入数据

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

Example 18

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 19

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组件。`

[Example 1]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDBDIBI
[Example 3]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDJIEBB
[Example 4]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDDADCE
[Example 5]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDBADEI
[Example 6]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDDAEBG
[Figure 1]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDCJHBA
[Description of Figure 1 follows]: /images/20210825/ddd09c22e263423b8b5f34ca3d8da625.png
[Description of _Figure 1 Text with a Linear Gradient Filling]: http://download.oracle.com/javafx/2.0/text/img_text/stroke_fill.htm
[Example 7]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDJBFFA
[Example 8]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDHDIHD
[Example 9]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDDHDBF
[Figure 2]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDCJBHE
[Description of Figure 2 follows]: /images/20210825/e74a36e61f874e8fbd608c1690fbb8d7.png
[Description of _Figure 2 Custom Font]: http://download.oracle.com/javafx/2.0/text/img_text/custom_font.htm
[Example 10]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDFIFGE
[Figure 3]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDFHIIC
[Description of Figure 3 follows]: /images/20210825/9f0add0b0ff1444dabce4346e1b17990.png
[Description of _Figure 3 Text with a Perspective Effect]: http://download.oracle.com/javafx/2.0/text/img_text/perspective.htm
[Example 11]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDFJIGI
[Figure 4]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDFCDBB
[Description of Figure 4 follows]: /images/20210825/0a5f109313aa40899d5f15bbc7e90aff.png
[Description of _Figure 4 Text with a Blur Effect]: http://download.oracle.com/javafx/2.0/text/img_text/gauss_blur.htm
[Example 12]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDBBFHC
[Figure 5]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDBBDAI
[Description of Figure 5 follows]: /images/20210825/2a968cbd54c3416f95db08435602edf9.png
[Description of _Figure 5 Text with a Drop Shadow Effect]: http://download.oracle.com/javafx/2.0/text/img_text/drop_shadow.htm
[Example 13]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDCAIGA
[Description of Figure 6 follows]: /images/20210825/7f64cd0589064096bccfcd0b4e4c8d22.png
[Description of _Figure 6 Text with an Inner Shadow Effect]: http://download.oracle.com/javafx/2.0/text/img_text/inner_shadow.htm
[Example 14]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDJFAHB
[Figure 7]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDFHJCF
[Description of Figure 7 follows]: /images/20210825/37d57993105746dfade716c44c8ef94c.png
[Description of _Figure 7 Text with a Reflection Effect]: http://download.oracle.com/javafx/2.0/text/img_text/reflections.htm
[NeonSign]: http://download.oracle.com/javafx/2.0/text/NeonSign.java.html
[Figure 8]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDDIDCG
[Description of Figure 8 follows]: /images/20210825/d1708b6f65284a4491c8a46d0c987f7e.png
[Description of _Figure 8]: http://download.oracle.com/javafx/2.0/text/img_text/neon_sign.htm
[Example 15]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDBDIFF
[Example 16]: http://download.oracle.com/javafx/2.0/text/jfxpub-text.htm#CHDDHDGJ