Прозрачный фон в WebView в JavaFX

Мне нужно показать содержимое веб-просмотра по шаблону родительского фона. Есть ли простой способ сделать это?

ОТВЕТЫ

Ответ 1

Это может быть полезно

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

Ответ 2

Webview transparent Я получаю хорошее решение здесь: 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 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) {
                }

            }
        }  
    } 
}

Ответ 3

Если у вас используется яркий фон

webView.setBlendMode(BlendMode.DARKEN);

и когда темный фон, то

webView.setBlendMode(BlendMode.LIGHTEN);

Это, вероятно, будет исправлено за какое-то время, эта функция запрашивается в отслеживателе ошибок JavaFX # RT-25004

Ответ 4

Вы можете Chroma Key использовать свой WebView над своим контентом, используя Blend.

Обновить

Я пробовал это, и реализация настоящего Chroma Key со встроенными эффектами Blend JavaFX 2.2 в JavaFX на самом деле довольно сложна (и превзошла мои возможности реализации). Мне удалось заставить эту технику работать с форматами видео в формате pre-chroma, а не с произвольными узлами, такими как WebView.

Тем не менее, на данный момент вы можете добиться чего-то похожего простым способом, используя темные и светлые эффекты, о которых говорит мартини в своем ответе. Это не идеально, но, вероятно, этого будет достаточно, пока не будет реализовано RT-25004 или платформа JavaFX предоставляет более полный набор операций альфа-компоновки.

Ответ 5

Я воскрешаю это, потому что нашел лучшее решение проблемы с 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> или загрузить их каким-либо другим способом для ясности, я полагаю, но это намного лучше, чем все, что я нашел в сети для этой проблемы.