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

【问题标题】：Create a Borderless Window with a drop shadow containing a WebView使用包含 WebView 的投影创建无边框窗口
【发布时间】：2016-08-03 12:17:10
【问题描述】：

我有一个包含两个节点的组。第一个节点是背景，一个渲染投影的简单矩形。第二个节点是呈现 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;
}

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

【问题讨论】：

标签： java css javafx webview

【解决方案1】：

事实证明，因为我将一个子类添加到自定义区域子类（浏览器），然后将该浏览器的一个实例添加到我的场景中，这导致渲染它出现问题。这是我用来解决问题的代码：

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

【讨论】：