JavaFXでのBackgroundImageの中央指定

Question

###JavaFXでのBackgroundImageの中央指定
今、JavaFXで簡単なアプリケーションを作成しているのですが画像を読み込めても中央に表示することができません。(画面を縮小すると画像が左寄りになってしまう)
BackgroundPosition.CENTERを追加したのですが画像が左寄りです。
これを中央に寄せられないでしょうか？
できなければ画面の横を縮めたら縦も比例して縮まるように設定などできないでしょうか。
どなたか教えてください。

該当のソースコード

public class Main extends Application {

@Override
public void start(Stage stage) throws MalformedURLException, URISyntaxException {
    Image img = new Image(new File(SFile.getApplicationPath(Main.class).getParent +File.separator +"data" + File.separator + "client" + File.separator + "image" + File.separator + "image.png").toURI().toURL().toString());

    BackgroundSize bs = new BackgroundSize(BackgroundSize.AUTO, BackgroundSize.AUTO, false,false, false, true);
    BackgroundImage bimg = new BackgroundImage(img, BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT, BackgroundPosition.CENTER, bs);
    Background background = new Background(bimg);
    
    StackPane root = new StackPane();
    root.setBackground(background);
    
    Scene scene = new Scene(root, 800, 500);
    
    stage.setScene(scene);
    stage.setFullScreen(true);
    stage.show();
}
public static void main(String[] args) {
    launch(args);
} 

}

Answer 1

BackgroundSizeのcovertをfalseにcontainをtrueにしてみてはいかがでしょうか？

---

追記：質問者さんの本来の期待(処理をごりごり書くのではなく、制約として記述すること？)はCSSあるいはCSS相当のBackgroundによる指定だと思うのですが、自分には指定方法がわかりません。

回避策として多少処理を書くのであれば次のようには書けると思います。背景画像ではなくStackPaneの一番底にImageViewを配置する方法です。ImageViewならfitWidth, fitHeight, viewportの各プロパティーを制御することで比較的自由度の高い配置がプログラミングできるかと思います。

public class FxImageTest extends Application {
  @Override
  public void start(Stage stage) throws Exception {
    Image img = new Image(FxImageTest.class.getResource("image2.jpg")
                            .toURI().toURL().toString());
    
    StackPane root = new StackPane();
    
    ImageView iv = new ImageView();
    iv.fitWidthProperty().bind(root.widthProperty());
    iv.fitHeightProperty().bind(root.heightProperty());
    Binding<Rectangle2D> viewport = Bindings.createObjectBinding(
      () -> {
        Image image = iv.getImage();
        if (image == null) return null;
        double vpWidth = Math.max(1, image.getWidth());
        double vpHeight = Math.max(1, image.getHeight());
        double imageRatio = vpWidth / vpHeight;
        Bounds bounds = root.getBoundsInLocal();
        double boundsRatio = Math.max(1, bounds.getWidth())
                           / Math.max(1, bounds.getHeight());
        if (boundsRatio > imageRatio) {
          // 元画像の上下をカット
          vpHeight = vpWidth / boundsRatio;
        } else {
          // 元画像の左右をカット
          vpWidth = vpHeight * boundsRatio;
        }
        return new Rectangle2D(
          (image.getWidth() - vpWidth) * 0.5,
          (image.getHeight() - vpHeight) * 0.5,
          vpWidth, vpHeight);
      },
      root.boundsInLocalProperty(), iv.imageProperty());
    iv.setImage(img); // viewportの初期値を設定するため。
    
    viewport.addListener((ob, ov, nv) -> iv.setViewport(nv)); // ※補足参照
    
    Button button = new Button("toggle background");
    button.setOnAction(ev -> iv.setImage(iv.getImage() == null ? img : null));
    button.setPrefSize(150, 30);
    
    root.getChildren().addAll(iv, button);
    
    Scene scene = new Scene(root, 800, 500);
    
    stage.setScene(scene);
    stage.show();
  }
}

---

※補足：
コード中の※の行ですが、本当は
iv.viewportProperty().bind(viewport);
と書きたいところですが、そうやってしまうとstack overflowが起きます。

JavaFXのプロパティーのバインドはObserverパターンを非常に簡単に利用できる点はよいのですが、ジオメトリー（ノードのレイアウト）にかかわるプロパティーに下手に依存関係を定義してしまうと内部のレイアウト処理の実装からの影響で、依存関係の循環が発生してしまう点に注意が必要です。

本件ではChangeListener経由でviewportプロパティーの設定をすることで一応回避できているように見えますが、ChangeListenerは万能ではなく、プロパティーの依存関係に本質的に巡回関係ができてしまうとどうやってもNGになる場合もあります。

Comments

[glat2238]

すみません聞き方が悪かったです。
containをtrueにすると中央になるのですが余白ができてしまって…
Swingを使っていたころは縦と横の小さいほうの割合に合わせて中央に配置していたので端は(見えないため)自動でカットされていたのですが、FXでそれをすると左端に寄ってしまうのですが他に解決する方法はないでしょうか？

[KSwordOfHaste]

失礼しました。
- 画像のアスペクト比を保ったまま
- 中央寄せで
- 空白部分がないように入りきらない部分を切り捨てる
といういうことですね。
目的にあってなかったので、BAは無理につけない方がよいです。他のよい回答がついたらBAの付け替えはお気遣いなくどうぞ。

[glat2238]

すいません。色々めんどくさくしてしまって…

[KSwordOfHaste]

「CSSのみを使って上記のようにするにはどうすればよいか？」という観点で調べてみてはいかがでしょう？JavaFXのBackgroundは要するにCSSの機能を表した一つの実装ですので完全に一致しないまでもCSSでできることならそのとおりにすれば実現できる可能性があると思います。

調べて分からなかったら、JavaFXのタグに加えてHTML/CSSのタグを追加してJavaFXが目的だけどHTML/CSSで背景画像をこうするにはどうしたらよいかという質問に拡張してみるとコメントがつきやすいかも知れません。JavaFXは使わなくてもHTML/CSSのエキスパートの方は多いと思います。
(自分は恥ずかしながらCSSド素人なんです...スミマセン)

[glat2238]

ありがとうございます。CSSについて調べてみます。
(私もCSS全然わからなくて困ってますw)

[glat2238]

出来ました！
ありがとうございます。

[KSwordOfHaste]

cssでできたかどうかに興味がありますが・・・ひょっとして自分の追記（回避策）ぐらいしかありませんでした？

[glat2238]

CSSでやっても同じ結果でしたw
何かのバグですかね？