2012-09-14 20 views

Respuesta

1

Puede Chroma Key su WebView sobre su contenido usando Blend efectos.

actualización

yo probamos este y ejecución de un verdadero Chroma Key con los efectos Blend incorporadas de JavaFX 2.2 en JavaFX es realmente muy difícil (y superó mis capacidades de implementación). Pude hacer que la técnica funcionara con formatos de video flv con clave previa a la croma, pero no con nodos arbitrarios como WebView.

Aún así, por ahora, puede lograr algo similar de una manera simple usando los efectos de oscurecimiento y aclaración como sugiere Martini en su respuesta. No es perfecto, pero probablemente será suficiente hasta que se implemente RT-25004 o la plataforma JavaFX proporcione un conjunto más completo de operaciones de composición alfa.

4

Si u tiene un fondo brillante utilizar

webView.setBlendMode(BlendMode.DARKEN); 

y cuando fondo oscuro, entonces

webView.setBlendMode(BlendMode.LIGHTEN); 

Esto probablemente se fijará en algún tiempo, se solicita esta función en el JavaFX seguimiento de errores #RT-25004

+0

Se trabaja para mí con JDK 8 (1.8.0_40-EA), pero no con JDK 7 (1.7.0_65) –

-1

Estoy resucitando esto porque encontré una mejor solución para el problema de tener un WebView en un gradien t. Suponga que tiene un gradient like this y desea mostrar una cadena HTML sobre ella de color blanco que se ve algo como esto:

<p>Integer semper, est imperdiet mattis porttitor, massa vulputate ipsum</p> 

El truco está en convertir su gradiente de cadena Base64:

iVBORw0KGgoAAAANSUhEUgAAAAEAAAHDCAYAAADlQnCCAAAAq0lEQVRIib2VwRWAMAhDaSdwCtd1No8uUzzp0ydBgjwvnmhCPrTKtKxbb73NXcaQLiL5j/olyhQH5JXu4H4sUGyWHAIa9VWjU9qtyAh6JGicIMJno2HcGSX3gJsCKH5EfUfHJUed+qFzekrpuVzM/oq4uFKGr/pI4B7wiP2Vgno0F/uCUQ9ZXWg4vM/JL1Hpt10Nt+hZjhCDKepxV8H3soZGWOqHP3ZSGYDdATTkg3iGU3JnAAAAAElFTkSuQmCC 

Como WebView carga cualquier cadena HTML, esto puede implicar <body> que tiene un fondo. En mi caso, el WebView no ocupaba todo el espacio con el degradado, por lo que tuve que posicionar el fondo también. A continuación se muestra el código HTML He añadido a la cadena de HTML anterior en el beggining:

<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;"> 

Y al final:

</span></body></html> 

Por lo tanto la producción de dicho código:

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); 

Probablemente se podría poner los estilos en el <head> o cargarlos de alguna otra manera para mayor claridad, supongo, pero este es un trabajo mucho mejor para cualquier cosa que encontré en la red para este problema.

7

Webview transparente consigo una buena solución a este problema: https://javafx-jira.kenai.com/browse/RT-29186 leer los comentarios de 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) { 
       } 

      } 
     } 
    } 
} 
+0

¡Eso es genial! –

+0

'WebEngine.page' es final, por lo que puede ejecutar la reflexión sin la necesidad de escuchar los cambios en el documento directamente en la creación de webView. Aunque mi versión (JDK 1.7.80) usa 'com.sun.webpane.platform', pero probablemente sea la misma. – TWiStErRob

8

Esto podría ser útil

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

perfecto. para hacer que WebView sea transparente, solo necesita dos líneas de código. o puede hacer que sea un trazador de líneas 'com.sun.javafx.webkit.Accessor.getPageFor (webviewgetEngine()). setBackgroundColor (0)' – Vishrant