Создание границы изображения с изображением JavaFX

Question

Я должен сделать экран телевизора, используя Scenebulider в JavaFX.Я дошел до того, что два изображения накладываются вместе, и мы можем оба из них, но изображение границы должно быть закруглено, и должна быть видна нормальная граница.Первое фото - это то, что у меня уже есть, а второе - как оно должно выглядеть.Это стек в стеке.

Что у меня есть:

как это должно выглядеть:

.backgorund{/*main stackpane*/

    -fx-background-image: url("drewno.jpg");

}



.test{/*stackpane within stackpane*/

    -fx-background-image:url(szum.jpg);
    -fx-border-image-source: url(drewno.jpg);
    -fx-border-image-width: 50, 100;
    -fx-border-image-slice: 50, 20;
    -fx-border-width:60,110;
    -fx-border-color: black;


}

drewno2

szum

Answer 1

Простой подход заключается в размещении экрана за «границей» и обеспечении прозрачности «изображения границы» там, где должен отображаться экран (требуется тип изображения, поддерживающий прозрачность, например, png).

Выоднако можно также поместить экран поверх фона и применить Shape, охватывающий область, где экран должен быть виден как clip:

@Override
public void start(Stage stage) {
    ImageView border = new ImageView("https://image.freepik.com/free-photo/wood-texture-plank-background_1372-642.jpg");
    ImageView screen = new ImageView("https://ak9.picdn.net/shutterstock/videos/1137709/thumb/9.jpg");
    border.setFitWidth(500);
    border.setFitHeight(500);
    screen.setFitWidth(400);
    screen.setFitHeight(400);

    Path clip = new Path(new MoveTo(50, 400), new ArcTo(50, 200, 0, 50, 0, false, true), new HLineTo(350), new ArcTo(50, 200, 0, 350, 400, false, true), new ClosePath());
    clip.setFill(Color.BLACK);
    clip.setStroke(null);
    screen.setClip(clip);

    StackPane root = new StackPane(border, screen);

    Scene scene = new Scene(root);

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

Вы также можете получить этот результат через fxml, но afaikSceneBuilder не позволяет вам добавлять / редактировать клип:

<ImageView>
    <image>
        ...
    <image>
    <clip>
        <Path fill="BLACK">
            <elements>
                <MoveTo x="50" y="400" />
                <ArcTo radiusX="50" radiusY="200" x="50" sweep="true" />
                <HLineTo x="350" />
                <ArcTo radiusX="50" radiusY="200" x="350" y="400" sweep="true" />
                <ClosePath />
            </elements>
        </Path>
    /clip>
<ImageView>

Возможно, вам нужно немного изменить путь клипа, чтобы он выглядел именно так, как вы хотите ...