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

原文地址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 控件的信息,查看第二十五回

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章