Создайте окно без полей с тенью, содержащей WebView

Question

У меня есть группа, которая содержит два узла. Первый узел - это фон, простой прямоугольник, отображающий тень. Второй узел - это Region, который отображает WebView. Я хочу WebView появляться «содержатся» в прямоугольнике, так что он не перекрывает тень падения, как на этом скриншоте, в основном без полей формы с тенью:

Я следующее код:

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

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

И root.css:

.browser{ 
    -fx-padding: 20; 
} 

Ничто не работает. Я не могу получить результат, который я ищу. Любая помощь будет оценена по достоинству.

Answer 1

Получается, что, поскольку я добавлял ребенка к пользовательскому подклассу Region (Browser), а затем добавлял экземпляр этого браузера к моей сцене, это вызывало проблемы с его рендерингом. Вот код, который я использовал, чтобы решить проблему:

@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 ... 
} 

И мой root.css:

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