Question

我必须使用JavaFX中的Scenebulider制作电视屏幕。我到达了两个图像重叠在一起的程度，我们都可以重叠，但是边框图像应该是圆角的，并且正常边框也应该可见。第一张照片是我已经拥有的照片，第二张照片是它的外观。它是堆栈窗格中的堆栈窗格。

我所拥有的：

外观如何：

.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生成此结果，但是afaik SceneBuilder不允许您添加/编辑剪辑：

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

您可能需要稍微修改剪辑路径以使其完全符合您的需求...

使用图像JavaFX创建图像边框

1 个答案: