JavaFX中WebView中的透明背景

时间:2012-09-14 09:02:28

标签: webview javafx-2

我需要在父级背景模式上显示我的webview内容。有没有直接的方法呢?

6 个答案:

答案 0 :(得分:11)

这可能很有用

final com.sun.webkit.WebPage webPage = com.sun.javafx.webkit.Accessor.getPageFor(engine);
webPage.setBackgroundColor(0);

答案 1 :(得分:8)

Webview透明我在这里得到了一个很好的解决方案:https://javafx-jira.kenai.com/browse/RT-29186阅读评论Harry Hur

    import java.lang.reflect.Field;
    import javafx.application.Application;
    import javafx.beans.value.ChangeListener;
    import javafx.beans.value.ObservableValue; 
    import javafx.scene.Scene;
    import javafx.scene.web.WebEngine;
    import javafx.scene.web.WebView;
    import javafx.stage.Stage;
    import javafx.stage.StageStyle; 
    import org.w3c.dom.Document; `

    public class TestTranparentApps extends Application { 

    @Override
    public void start(Stage primaryStage) {
        new WebPage(primaryStage);
        primaryStage.show(); 
    } 

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

    class WebPage{

        WebView webview;
        WebEngine webengine;
        public WebPage(Stage mainstage){
            webview = new WebView();
            webengine = webview.getEngine();

            Scene scene = new Scene(webview);
            scene.setFill(null);

            mainstage.setScene(scene);
            mainstage.initStyle(StageStyle.TRANSPARENT);
            mainstage.setWidth(700);
            mainstage.setHeight(100);

            webengine.documentProperty().addListener(new DocListener());
            webengine.loadContent("<body style='background : rgba(0,0,0,0);font-size: 70px;text-align:center;'>Test Transparent</body>");
        }

        class DocListener implements ChangeListener<Document>{  
            @Override
            public void changed(ObservableValue<? extends Document> observable, Document oldValue, Document newValue) {
                try {

                    // Use reflection to retrieve the WebEngine's private 'page' field. 
                    Field f = webengine.getClass().getDeclaredField("page"); 
                    f.setAccessible(true); 
                    com.sun.webkit.WebPage page = (com.sun.webkit.WebPage) f.get(webengine);  
                    page.setBackgroundColor((new java.awt.Color(0, 0, 0, 0)).getRGB()); 

                } catch (Exception e) {
                }

            }
        }  
    } 
} 

答案 2 :(得分:5)

如果你有明亮的背景使用

webView.setBlendMode(BlendMode.DARKEN);

当黑暗的背景时,那么

webView.setBlendMode(BlendMode.LIGHTEN);

这可能会在一段时间内修复,在JavaFX错误跟踪器上#RT-25004

请求此功能

答案 3 :(得分:1)

您可以使用Chroma Key效果{/ 3}}对您的内容进行Web Blend

更新

我试过这个并且在JavaFX中使用JavaFX 2.2的内置Blend效果实现真正的Chroma Key实际上非常困难(并且超出了我的实现能力)。我设法使该技术适用于预色度键控flv视频格式,但不能使用任何节点,如WebView。

但是,就目前而言,正如马丁尼在答案中所暗示的那样,你可以通过使用变暗和变亮效果的简单方式来实现某种类似的效果。它并不完美,但在实现RT-25004或JavaFX平台提供更全面的alpha合成操作集之前可能需要足够。

答案 4 :(得分:0)

您需要将“网页背景”设置为0。但是,您可能需要做其他一些事情才能使它在滚动时不会中断。以下GitHub Gist是一个Java代理,可以添加到我们的应用中,并且可以将WebPages透明化。 https://gist.github.com/riccardobl/18603f9de508b1ab6c9e或更高版本https://github.com/FAForever/downlords-faf-client/blob/develop/webview-patch/src/main/java/com/faforever/client/webviewpatcher/TransparentWebViewPatch.java

只有我找到并可以正常使用的解决方案。

答案 5 :(得分:-1)

我正在复活这个因为我找到了一个更好的解决方案来解决在梯度上WebView的问题。假设您有一个gradient like this并希望在其上显示一个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>中,或者为了清晰起见我可以用其他方式加载它们,但是对于我在网上发现的其他任何问题,这是一个更好的解决办法。