親の背景パターンの上に webview コンテンツを表示する必要があります。それを行う簡単な方法はありますか?
6 に答える
明るい背景を使用している場合
webView.setBlendMode(BlendMode.DARKEN);
背景が暗い場合は、
webView.setBlendMode(BlendMode.LIGHTEN);
これはおそらく修正される予定です。この機能は JavaFX バグトラッカー#RT-25004でリクエストされています。
ブレンド効果を使用して、コンテンツに対して WebView のクロマ キーを設定できます。
アップデート
私はこれを試してみましたが、JavaFX 2.2 の組み込みの Blend エフェクトを使用して真のクロマ キーを JavaFX に実装することは、実際にはかなり困難です (そして、私の実装能力を上回りました)。私はこのテクニックをプレクロマキー FLV ビデオ形式で動作させることができましたが、WebView などの任意のノードでは動作しませんでした。
それでも、今のところ、マルティーニが彼の答えで示唆しているように、暗くする効果と明るくする効果を使用して、簡単な方法で似たようなことを実現できます。これは完璧ではありませんが、 RT-25004が実装されるか、JavaFX プラットフォームがアルファ合成操作のより包括的なセットを提供するまでは、おそらく十分である必要があります。
WebView
勾配を超えているという問題のより良い解決策を見つけたので、これを復活させています。このようなグラデーションがあり、その上に次のような白色の HTML 文字列を表示したいとします。
<p>Integer semper, est imperdiet mattis porttitor, massa vulputate ipsum</p>
秘訣は、グラデーションを Base64 文字列に変換することです。
iVBORw0KGgoAAAANSUhEUgAAAAEAAAHDCAYAAADlQnCCAAAAq0lEQVRIib2VwRWAMAhDaSdwCtd1No8uUzzp0ydBgjwvnmhCPrTKtKxbb73NXcaQLiL5j/olyhQH5JXu4H4sUGyWHAIa9VWjU9qtyAh6JGicIMJno2HcGSX3gJsCKH5EfUfHJUed+qFzekrpuVzM/oq4uFKGr/pI4B7wiP2Vgno0F/uCUQ9ZXWg4vM/JL1Hpt10Nt+hZjhCDKepxV8H3soZGWOqHP3ZSGYDdATTkg3iGU3JnAAAAAElFTkSuQmCC
WebView
任意の HTML 文字列をロードするため、これには背景が含まれる可能性があり<body>
ます。私の例ではWebView
、グラデーションでスペース全体を占有していなかったので、背景も配置する必要がありました。以下は、最初に上記の HTML 文字列に追加した HTML です。
<html>
<head>
</head>
<body style="margin: 0px; padding: 0px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAHDCAYAAADlQnCCAAAAq0lEQVRIib2VwRWAMAhDaSdwCtd1No8uUzzp0ydBgjwvnmhCPrTKtKxbb73NXcaQLiL5j/olyhQH5JXu4H4sUGyWHAIa9VWjU9qtyAh6JGicIMJno2HcGSX3gJsCKH5EfUfHJUed+qFzekrpuVzM/oq4uFKGr/pI4B7wiP2Vgno0F/uCUQ9ZXWg4vM/JL1Hpt10Nt+hZjhCDKepxV8H3soZGWOqHP3ZSGYDdATTkg3iGU3JnAAAAAElFTkSuQmCC); background-repeat: repeat-x; background-position: 0 -152px;">
<span style="font-family: Arial; font-size: 12px; color: white; display: block; margin:0px;">
そして最後に:
</span></body></html>
したがって、そのようなコードを生成します:
String desc = "<html><head></head><body style=\"margin: 0px; padding: 0px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAHDCAYAAADlQnCCAAAAq0lEQVRIib2VwRWAMAhDaSdwCtd1No8uUzzp0ydBgjwvnmhCPrTKtKxbb73NXcaQLiL5j/olyhQH5JXu4H4sUGyWHAIa9VWjU9qtyAh6JGicIMJno2HcGSX3gJsCKH5EfUfHJUed+qFzekrpuVzM/oq4uFKGr/pI4B7wiP2Vgno0F/uCUQ9ZXWg4vM/JL1Hpt10Nt+hZjhCDKepxV8H3soZGWOqHP3ZSGYDdATTkg3iGU3JnAAAAAElFTkSuQmCC); background-repeat: repeat-x; background-position: 0 -152px;\"><span style=\"font-family: Arial; font-size: 12px; color: white; display: block; margin:0px;\">" + description + "</span></body></html>";
wv_desc.getEngine().loadContent(desc);
<head>
わかりやすくするために、おそらくスタイルを に配置するか、別の方法でロードすることもできますが、これは、この問題についてネットで見つけた他の方法よりもはるかに優れた回避策です。