WebView가 포함 된 그림자가있는 경계선없는 창 만들기

Question

두 개의 노드가있는 그룹이 있습니다. 첫 번째 노드는 그림자, 그림자를 렌더링하는 간단한 사각형입니다. 두 번째 노드는 WebView를 렌더링하는 Region입니다.

나는 다음과 같은 한 : 나는 그림자와 함께,이 스크린 샷처럼, 기본적으로 경계선 양식을 그림자를 중복되지 않도록 웹보기가 사각형 안에 "포함"표시 할 코드 :

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

사용자 지정 지역 하위 클래스 (브라우저)에 하위 항목을 추가 한 다음 해당 장면의 인스턴스를 내 장면에 추가했기 때문에 렌더링하는 데 문제가있는 것으로 나타났습니다.

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

여기에 내가 문제를 해결하는 데 사용되는 코드는