web-dev-qa-db-ja.com

JavaFXシーンの背景画像の設定方法

シーンの背景画像を設定するにはどうすればよいですか？

javafxjavafx-2
37
John

アプローチの1つは次のようになります。

1）「style.css」という名前のCSSファイルを作成し、その中にIDセレクターを定義します。

#pane{
    -fx-background-image: url("background_image.jpg");
    -fx-background-repeat: stretch;   
    -fx-background-size: 900 506;
    -fx-background-position: center center;
    -fx-effect: dropshadow(three-pass-box, black, 30, 0.5, 0, 0); 
}

2）シーン内の最上位のコントロール（またはコントロール）のIDをCSSで定義された値で設定し、このCSSファイルをシーンにロードします。

  public class Test extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();
        root.setId("pane");
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().addAll(this.getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

FXMLファイルでコントロールにIDを与えることもできます：

<StackPane id="pane" prefHeight="200" prefWidth="320" xmlns:fx="http://javafx.com/fxml" fx:controller="demo.Sample">
    <children>
    </children>
</StackPane>

JavaFX CSSスタイリングの詳細については、この guide を参照してください。

37
Uluk Biy

これは古い質問です

ただし、プログラムで行う場合、またはJava方法

画像の背景; BackgroundImage classを使用できます

BackgroundImage myBI= new BackgroundImage(new Image("my url",32,32,false,true),
        BackgroundRepeat.REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.DEFAULT,
          BackgroundSize.DEFAULT);
//then you set to your node
myContainer.setBackground(new Background(myBI));

ペイントまたは塗りつぶしの背景。 BackgroundFill classを使用できます

BackgroundFill myBF = new BackgroundFill(Color.BLUEVIOLET, new CornerRadii(1),
         new Insets(0.0,0.0,0.0,0.0));// or null for the padding
//then you set to your node or container or layout
myContainer.setBackground(new Background(myBF));

Java alive && css dead ..

31
Elltz

.rootクラスを使用して、シーンのスタイルを直接変更できます。

.root {
    -fx-background-image: url("https://www.google.com/images/srpr/logo3w.png");
}

これをCSSに追加し、彼の答えで説明されている「Uluk Biy」としてロードします。

12
Sergey Grinev

@Elltzの答えに加えて、塗りつぶしと画像の両方を背景に使用できます。

someNode.setBackground(
            new Background(
                    Collections.singletonList(new BackgroundFill(
                            Color.WHITE, 
                            new CornerRadii(500), 
                            new Insets(10))),
                    Collections.singletonList(new BackgroundImage(
                            new Image("image/logo.png", 100, 100, false, true),
                            BackgroundRepeat.NO_REPEAT,
                            BackgroundRepeat.NO_REPEAT,
                            BackgroundPosition.CENTER,
                            BackgroundSize.DEFAULT))));
0
JeSa