使用包含WebView的投影创建无边框窗口

Question

我有一个包含两个节点的组。第一个节点是背景，一个呈现投影的简单矩形。第二个节点是呈现WebView的Region。我希望WebView出现＆＃34;包含＆＃34;在矩形内，它不会与投影重叠，就像在这个截图中一样，基本上是一个带阴影的无边框形式：

我有以下代码：

parse_dates=[0]

和Browser.java：

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

和root.css：

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

似乎没什么用。我似乎无法得到我正在寻找的结果。任何帮助将不胜感激。

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