39 JavaFXでのテキストの使用
この章では、JavaFXアプリケーションにテキストを追加する方法について説明します。
これには、使用されているAPIを表すコード・サンプルも含まれます。
概要
JavaFXアプリケーションのグラフィカル・コンテンツは、シーン・グラフと呼ばれるツリー状の構造に編成されたオブジェクトで構成されています。 シーン・グラフ内の単一の要素はノードと呼ばれます。 ノードは、テキストを含む様々なタイプのコンテンツを処理できます。 ノードは変換およびアニメーション化が可能です。 また、ノードには様々な効果を適用できます。 すべてのノード・タイプに共通する機能を使用すると、最新のリッチ・インターネット・アプリケーション(RIA)の需要を満たす洗練されたテキスト・コンテンツを実現できます。
JavaFX SDKには、テキストを表示するために使用されるjavafx.scene.text.Textクラスが用意されています。 Textクラスは、Nodeクラスから継承されます。 このため、他の任意のノードの場合と同じようにテキスト・ノードに効果、アニメーションおよび変換を適用できます。 NodeクラスはShapeクラスから継承されるため、他の任意の形状の場合と同じようにテキスト・ノードに描画を設定したり、塗りつぶし設定を適用できます。
テキストの追加
アプリケーションにテキスト・オブジェクトを追加するには、例39-1から例39-3までに示す任意のコンストラクタを使用します。
例39-3のコンストラクタでは、最初の2つのパラメータを使用して指定した座標でテキスト・オブジェクトを作成しています。
テキストのフォントと色の設定
テキストを追加する場合、そのプロパティをいくつか設定することもできます。 フォントを設定するには、javafx.scene.text.Fontクラスのインスタンスを使用できます。 Font.font()メソッドを使用すると、フォント・ファミリの名前とサイズを指定できます。 また、例39-4に示すように、テキストの色を設定することもできます。
例39-4
t.setText("This is a text sample");
t.setFont(Font.font ("Verdana", 20));
t.setFill(Color.RED);
また、プラットフォームに応じて異なるシステム・フォントを使用することもできます。 これを行うには、Font.getDefault()メソッドをコールします。
本番コードでは、カスケード・スタイル・シート(CSS)を使用してスタイルを設定することをお薦めします。 たとえば、線形グラデーション塗りつぶしをテキスト・オブジェクトに適用するには、例39-5に示すように、必要なルールが適用されたスタイルをCSSに追加します。
例39-5
#fancytext {
-fx-font: 100px Tahoma;
-fx-fill: linear-gradient(from 0% 0% to 100% 200%, repeat, aqua 0%, red 50%);
-fx-stroke: black;
-fx-stroke-width: 1;
}
例39-6に示すように、コード内でテキスト・オブジェクトを作成し、CSSのスタイルを適用します。
このコードにより、図39-1に示すテキストが作成されます。
JavaFXアプリケーションでのCSSの使用の詳細は、「CSSによるJavaFXアプリケーションのスキニング」を参照してください。
テキストの太字またはイタリック設定
テキストを太字で表示するには、例39-7に示すように、fontメソッドのFontWeight定数を使用します。
テキストをイタリックで表示するには、例39-8に示すように、FontPosture定数を使用します。
カスタム・フォントの使用
別のコンピュータにはインストールできない可能性がある一意のフォントを使用する必要がある場合は、JavaFXアプリケーションにTrueType (.ttf)またはOpenType (.otf)フォントを組み込むことができます。
TrueTypeまたはOpenTypeフォントをカスタム・フォントに組み込むには、次の手順を使用します。
-
プロジェクト・フォルダ内に
resources/fontsフォルダを作成します。 -
プロジェクト内の
fontsサブフォルダにフォント・ファイルをコピーします。 -
ソース・コード内で、例39-9に示すようにカスタム・フォントをロードします。
このコードにより、図39-2に示すテキストのフォントが表示されます。
LCDテキストのサポートの設定
LCD (液晶ディスプレイ)テキストは、アンチエイリアス処理されたテキストで、LCDパネルのプロパティを利用してよりなめらかなテキストをレンダリングします。 例39-10に示すAPIを使用することにより、テキスト・ノードでLCDテキストを利用できます。
また、例39-11に示す構文を使用することにより、この設定を.cssファイルに指定することもできます。
リッチ・テキストと双方向のサポート
TextFlowレイアウト・ペインを使用することにより、複数のTextノードを作成し、これらを単一のテキスト・フローで配置できます。 TextFlowオブジェクトは、各Textノードのテキストとフォントを採用しますが、子の折返し幅とxおよびyプロパティは無視します。 TextFlowオブジェクトは、独自の幅とテキスト位置合せを使用して、それぞれの子の場所を決定します。 例39-12に、TextFlowペイン内で異なるフォントとテキストがレイアウトされた3つのTextノードを示します。
例39-12
String family = "Helvetica";
double size = 50;
TextFlow textFlow = new TextFlow();
textFlow.setLayoutX(40);
textFlow.setLayoutY(40);
Text text1 = new Text("Hello ");
text1.setFont(Font.font(family, size));
text1.setFill(Color.RED);
Text text2 = new Text("Bold");
text2.setFill(Color.ORANGE);
text2.setFont(Font.font(family, FontWeight.BOLD, size));
Text text3 = new Text(" World");
text3.setFill(Color.GREEN);
text3.setFont(Font.font(family, FontPosture.ITALIC, size));
textFlow.getChildren().addAll(text1, text2, text3);
Group group = new Group(textFlow);
Scene scene = new Scene(group, 500, 150, Color.WHITE);
stage.setTitle("Hello Rich Text");
stage.setScene(scene);
stage.show();
このコードにより、図39-3に示す出力が生成されます。
例39-13に示すように、テキスト・ノードとともに形状やイメージなどのオブジェクトをTextFlowオブジェクトに埋め込んだり、双方向サポートを使用してテキストを作成できます。
例39-13
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;
public class JavaFXBidiText extends Application {
@Override
public void start(Stage stage) throws Exception {
TextFlow textFlow = new TextFlow();
Font font = new Font("Tahoma", 48);
Text text1 = new Text("He said \u0627\u0644\u0633\u0644\u0627\u0645");
text1.setFill(Color.RED);
text1.setFont(font);
Text text2 = new Text(" \u0639\u0644\u064a\u0643\u0645 to me.");
text2.setFill(Color.BLUE);
text2.setFont(font);
textFlow.getChildren().addAll(text1, text2);
Group group = new Group(textFlow);
Scene scene = new Scene(group, 650, 150, Color.WHITE);
stage.setTitle("Hello Bidi Text");
stage.setScene(scene);
stage.show();
}
このコードにより、図39-4に示す出力が生成されます。
この例は、双方向の並替えのためにTextノードのコンテンツを分割してTextFlowオブジェクト上の異なる場所に配置する方法を示しています。
TextFlowオブジェクトのデフォルトの方向は左から右ですが、アラビア文字は右から左にレンダリングされます。 一緒にレンダリングするアラビア文字が2語あります。赤い単語が最初に一番右の位置でレンダリングされ、その左に青い単語が続きます。
次を呼び出すことにより、TextFlowオブジェクトのデフォルトの方向を変更できます。
textFlow.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
TextオブジェクトとTextFlowオブジェクトは両方とも、次の場所にある『Bidirectional Algorithm Annex #9』の「Unicode Consortium」に定義されているとおり双方向の並替えをサポートしていることに注意してください。
