Erstellen Sie ein randloses Fenster mit einem Schlagschatten, der ein WebView enthält

Question

Ich habe eine Gruppe, die zwei Knoten enthält. Der erste Knoten ist ein Hintergrund, ein einfaches Rechteck, das einen Schlagschatten darstellt. Der zweite Knoten ist eine Region, die ein WebView rendert. Ich möchte die WebView „enthalten“ innerhalb des Rechtecks ​​erscheinen, so dass es nicht den Schlagschatten nicht überlappt, wie in diesem Screenshot, im Grunde eine randlose Form mit einem Schlagschatten:

ich folgendes haben Code:

public void start(Stage stage) throws Exception { 
    stage.initStyle(StageStyle.TRANSPARENT); 
    Group region = new Group(); 
    scene = new Scene(region, 800, 600); 
    scene.setFill(Color.TRANSPARENT); 
    scene.getStylesheets().add(getClass().getResource("/root.css").toExternalForm()); 
    stage.setScene(scene); 
    stage.show(); 

    Browser browser = new Browser(); 

    Rectangle rectangle = new Rectangle(8, 8, stage.getWidth() - 16, stage.getHeight() - 16); 
    rectangle.setFill(Color.WHITE); 
    rectangle.setEffect(new DropShadow(12.0d, Color.color(0, 0, 0, 0.4))); 

    region.setOnMousePressed(event -> { 
     if (event.getSceneY() > 20) return; 
     moving = true; 
     xPos = event.getScreenX() - stage.getX(); 
     yPos = event.getScreenY() - stage.getY(); 
    }); 
    region.setOnMouseDragged(event -> { 
     if (!moving) return; 
     stage.setX(event.getScreenX() - xPos); 
     stage.setY(event.getScreenY() - yPos); 
    }); 
    region.setOnMouseReleased(event -> moving = false); 
    region.getChildren().addAll(rectangle, browser); 
} 

Und Browser.java:

class Browser extends Region { 

    private final WebView webView = new WebView(); 
    private final WebEngine webEngine = webView.getEngine(); 

    public Browser() { 
     setPadding(new Insets(20, 20, 20, 20)); 
     getStyleClass().add("browser"); 
     webEngine.load(getClass().getResource("/index.html").toExternalForm()); 
     webEngine.setUserStyleSheetLocation(getClass().getResource("/reset.css").toString()); 
     getChildren().add(webView); 
    } 
} 

Und root.css:

.browser{ 
    -fx-padding: 20; 
} 

Nichts scheint zu funktionieren. Ich kann nicht das Ergebnis bekommen, nach dem ich suche. Jede Hilfe wäre willkommen.

Answer 1

Es stellt sich heraus, dass, weil ich ein Kind zu einer benutzerdefinierten Region-Unterklasse (Browser) hinzufügte und dann eine Instanz dieses Browsers zu meiner Szene hinzufügte, Probleme beim Rendern verursachte. Hier ist der Code, den ich verwenden, um das Problem zu beheben:

@Override 
public void start(Stage stage) throws Exception { 
    stage.initStyle(StageStyle.TRANSPARENT); 

    BorderPane container = new BorderPane(); 

    // WebView instantiated elsewhere ... 
    container.setCenter(webView); 

    scene = new Scene(container, 800, 600); 
    scene.setFill(Color.TRANSPARENT); 
    scene.getStylesheets().add(getClass().getResource("/root.css").toExternalForm()); 

    stage.setScene(scene); 
    stage.show(); 

    webEngine.load(getClass().getResource("/index.html").toExternalForm()); 
    webEngine.setUserStyleSheetLocation(getClass().getResource("/reset.css").toString()); 

    // Mouse Events ... 
} 

Und meinen root.css:

.root { 
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 24, 0, 0, 0); 
    -fx-background-insets: 24; 
    -fx-padding: 24; 
}