如何居中一個javafx 8滾動頁面的內容

Question

我有一個ScrollPane，它包含一個GridPane，它包含一個ImageView，它包含一個Image。我想要的是圖像在GridPane中居中。

如果沒有ScrollPane，我可以用setAlignment（Pos.TOP_CENTER）完成此操作，但是一旦我將GridPane添加到ScrollPane中，圖像顯示在左上角。

如何讓ScrollPane使用setAlignment（）值或手動居中圖像？

---例如編輯---

代碼而不滾動窗格：

public class ImageDB extends Application 
{ 
    @Override 
    public void start(Stage root) 
    { 
    Image image = new Image("0.jpg"); 
    ImageView view = new ImageView(); 
    view.setImage(image); 

    GridPane grid = new GridPane(); 
    grid.getChildren().add(view); 

    grid.setAlignment(Pos.TOP_CENTER); 

    BorderPane border = new BorderPane(); 
    border.setCenter(grid); 

    root.setScene(new Scene(border)); 
    root.setMaximized(true); 
    root.show(); 
    } 
} 

結果： https://i.imgur.com/eWvBQy6.png

代碼與滾動窗格：

public class ImageDB extends Application 
{ 
    @Override 
    public void start(Stage root) 
    { 
    Image image = new Image("0.jpg"); 
    ImageView view = new ImageView(); 
    view.setImage(image); 

    ScrollPane scroll = new ScrollPane(); 
    scroll.setContent(view); 

    GridPane grid = new GridPane(); 
    grid.getChildren().add(scroll); 

    grid.setAlignment(Pos.TOP_CENTER); 

    BorderPane border = new BorderPane(); 
    border.setCenter(scroll); 

    root.setScene(new Scene(border)); 
    root.setMaximized(true); 
    root.show(); 
    } 
} 

結果： https://i.imgur.com/1aJDX4m.png

Answer 1

發生了什麼事情是，當網格窗格居中滾動窗格時，圖像視圖位於滾動窗格的左上角。

一個解決辦法是包裝在一個堆窗格（默認情況下中心）的圖像視圖，並確保堆窗格是至少一樣寬滾動窗格的視口：

SSCCE：

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.geometry.HPos; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.ScrollPane; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.Priority; 
import javafx.scene.layout.StackPane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Rectangle; 
import javafx.stage.Stage; 

public class ImageDB extends Application 
{ 
    @Override 
    public void start(Stage root) 
    { 
// Image image = new Image("0.jpg"); 
    Image image = createImage(); 
    ImageView view = new ImageView(); 
    view.setImage(image); 
    StackPane imageHolder = new StackPane(view); 

    ScrollPane scroll = new ScrollPane(); 
    scroll.setContent(imageHolder); 

    GridPane grid = new GridPane(); 

    imageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() -> 
     scroll.getViewportBounds().getWidth(), scroll.viewportBoundsProperty())); 
    grid.getChildren().add(imageHolder); 

// grid.setAlignment(Pos.TOP_CENTER); 

    BorderPane border = new BorderPane(); 
    border.setCenter(scroll); 

    root.setScene(new Scene(border)); 
    root.setMaximized(true); 
    root.show(); 
    } 

    private Image createImage() { 
     return new Rectangle(400, 200, Color.CORNFLOWERBLUE).snapshot(null, null); 
    } 

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

Answer 2

雖然imageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() -> scroll.getViewportBounds().getWidth(), scroll.viewportBoundsProperty()));確實有竅門，但似乎有一些問題（例如，有時會顯示錯誤的滾動條/閃爍的內容等）。

我自從發現一個簡單的scroll.setFitToWidth(true);（和/或scroll.setFitToHeight(true);）也可以用滾動窗格保持內容大小，但沒有上述問題！

Answer 3

通過viewportBoundsProperty更好的解決方案：

import javafx.application.Application; 
import javafx.geometry.Bounds; 
import javafx.scene.Node; 
import javafx.scene.Scene; 
import javafx.scene.control.ScrollPane; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.GridPane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Rectangle; 
import javafx.stage.Stage; 

public class ImageDB extends Application { 
    final static int WIDTH = 400; 
    final static int HEIGHT = 200; 

    @Override 
    public void start(Stage root) { 
     // Image image = new Image("0.jpg"); 
     Image image = this.createImage(); 
     ImageView view = new ImageView(); 
     view.setImage(image); 
     GridPane grid = new GridPane(); 
     grid.getChildren().add(view); 

     ScrollPane scroll = new ScrollPane(); 
     scroll.setContent(grid); 

     BorderPane border = new BorderPane(); 
     border.setCenter(scroll); 

     this.center(scroll.getViewportBounds(), grid); 
     scroll.viewportBoundsProperty().addListener((observable, oldValue, newValue) -> { 
      this.center(newValue, grid); 
     }); 

     root.setScene(new Scene(border)); 
     root.setMaximized(true); 
     root.show(); 
    } 

    private Image createImage() { 
     return new Rectangle(ImageDB.WIDTH, ImageDB.HEIGHT, Color.CORNFLOWERBLUE).snapshot(null, null); 
    } 

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

    private void center(Bounds viewPortBounds, Node centeredNode) { 
     double width = viewPortBounds.getWidth(); 
     double height = viewPortBounds.getHeight(); 
     if (width > ImageDB.WIDTH) { 
      centeredNode.setTranslateX((width - ImageDB.WIDTH)/2); 
     } else { 
      centeredNode.setTranslateX(0); 
     } 
     if (height > ImageDB.HEIGHT) { 
      centeredNode.setTranslateY((height - ImageDB.HEIGHT)/2); 
     } else { 
      centeredNode.setTranslateY(0); 
     } 

    } 

}