40 テキストへの効果の適用
この章では、単一の効果および効果の連鎖をテキスト・ノードに適用する方法について学習します。これには、使用されているAPIを表すデモ・サンプルが含まれます。
JavaFX SDKでは、javafx.scene.effectパッケージ内に広範な効果が用意されています。使用可能な効果の完全セットは、APIドキュメントを参照してください。作用中の効果のいくつかはTextEffectsデモ・アプリケーションで確認できます。このアプリケーションには、様々な効果が適用されたテキスト・ノードが表示されます。TextEffectsSample.zipファイルをダウンロードし、ファイルを抽出し、これらのファイルをコンピュータに保存し、NetBeans IDEでNetBeansプロジェクトを開きます。
パースペクティブ効果
PerspectiveTansformクラスを使用すると、2次元のコンテンツの3次元の効果をシミュレートできます。パースペクティブ変換を使用すると、任意の四角形を別の四角形にマップできます。この変換にはノードを入力します。パースペクティブ変換を定義するには、四隅すべての出力場所のxおよびy座標を指定します。TextEffectsアプリケーションでは、例40-1に示すように、四角形とテキストで構成されたグループにPerspectiveTransform効果が設定されます。
例40-1
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;
setCache(true)プロパティを使用すると、ノードのレンダリング時にパフォーマンスを改善できます。
パースペクティブ変換の結果は図40-1で確認できます。
ぼかし効果
GaussianBlurクラスは、ガウス・コンボリューション・カーネルに基づいてぼかし効果を実現します。
例40-2に、TextEffectsアプリケーションに実装されたガウスぼかし効果が適用されたテキスト・ノードを示します。
例40-2
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;
ガウスぼかし効果の結果は図40-2で確認できます。
ドロップ・シャドウ効果
ドロップ・シャドウ効果を実装するには、DropShadowクラスを使用します。テキストのシャドウの色とオフセットを指定できます。TextEffectsアプリケーションでは、赤いテキストにドロップ・シャドウ効果が適用され、3ピクセルのグレー・シャドウが適用されます。このコードは例40-3で確認できます。
例40-3
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));
適用された効果の結果は図40-3で確認できます。
インナー・シャドウ効果
インナー・シャドウ効果により、コンテンツの端の内側でシャドウをレンダリングします。テキスト・コンテンツの場合、色とオフセットを指定できます。例40-4で、xおよびy方向に4ピクセルのオフセットが適用されたインナー・シャドウ効果がテキスト・ノードにどのように適用されるかを確認してください。
例40-4
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;
適用された効果の結果を図40-4に示します。
リフレクション
Reflectionクラスを使用すると、テキストのリフレクション・バージョンを元のテキストの下に表示できます。下部の不透明度値、リフレクションに表示する入力部分、入力テキストとリフレクションの間のオフセット、および上部の不透明度値などの追加パラメータを指定することにより、リフレクション・テキストのビューを調整できます。詳細は、APIドキュメントを参照してください。
リフレクション効果は、例40-5に示すようにTextEffectsアプリケーションに実装されます。
例40-5
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;
リフレクション効果が適用されたテキスト・ノードは図40-5で確認できます。
複数の効果の組合せ
前の項では、単一の効果をテキスト・ノードに適用する方法について学習しました。テキストのコンテンツをさらに修飾するには、複数の効果を作成し、効果の連鎖を適用して特定のビジュアル結果を実現します。図40-6に示すNeonSignアプリケーションについて考えてみます。
NeonSignアプリケーションのグラフィカル・シーンは、次の要素で構成されています。
-
背景として使用される煉瓦壁のイメージ
-
放射グラデーション塗りつぶしを提供する四角形
-
効果の連鎖が適用されたテキスト・ノード
-
テキスト・データを入力するためのテキスト・フィールド
背景は外部の.cssファイルに設定されます。
このアプリケーションでは、テキスト・ノードにテキスト・コンテンツを設定するためにバインディング・メカニズムを使用します。テキスト・ノードのテキスト・プロパティは、例40-6に示すように、テキスト・フィールドのテキスト・プロパティにバインドされます。
例40-6
Text text = new Text();
TextField textField = new TextField();
textField.setText("Neon Sign");
text.textProperty().bind(textField.textProperty());
テキスト・フィールドに入力し、変更されたテキスト・ノードのコンテンツを表示できます。
効果の連鎖がテキスト・ノードに適用されます。主な効果は、MULTIPLYモードを使用するブレンド効果です。このモードでは、ドロップ・シャドウ効果と別のブレンド効果(blend1)の2つの入力を混合します。同様に、blend1効果は、ドロップ・シャドウ効果(ds1)と別のブレンド効果(blend2)を組み合せます。blend2効果は、2つのインナー・シャドウ効果を組み合せます。この効果の連鎖を使用し、色パラメータを変更することにより、繊細かつ巧妙な色パターンをテキスト・オブジェクトに適用できます。例40-7で効果の連鎖のコードを参照してください。
例40-7
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();
is1.setColor(Color.web("#f13a00"));
is1.setRadius(5);
is1.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ドキュメントを参照してください。
JavaFXアプリケーションでテキストの編集領域を実装するには、HTMLEditorコンポーネントを使用します。HTMLEditorコントロールの詳細は、「HTMLエディタ」を参照してください。
