如何將ImageView錨定到其BorderPane區域的中心？

我已經有一個帶有ImageView的BorderPane佈局，如下所示，但ImageView始終錨定在左上角，並在調整窗口大小時停留在此處。我想讓ImageView在被綁定到的部分的中心保持錨點（紅框）。這可能使用FXML嗎？如何將ImageView錨定到其BorderPane區域的中心？

FXML：

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.control.*?> 
<?import javafx.scene.Group?> 
<?import javafx.scene.image.Image?> 
<?import javafx.scene.image.ImageView?> 
<?import javafx.scene.layout.*?> 

<VBox prefWidth="800.0" prefHeight="600.0" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1"> 

    <BorderPane xmlns:fx="http://javafx.com/fxml" VBox.vgrow="ALWAYS"> 
     <top> 
      <VBox alignment="TOP_CENTER"> 
       <ToolBar minHeight="50.0" prefHeight="50.0" prefWidth="800.0" stylesheets="@../css/style.css" 
         GridPane.rowIndex="1"> 
        <ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true"> 
         <Image url="@../images/toolbar-logo.png"/> 
        </ImageView> 
       </ToolBar> 
       <MenuBar fx:id="menuBar" prefHeight="0.0" prefWidth="0.0"/> 
      </VBox> 
     </top> 

     <left> 
      <StackPane prefWidth="230.0" prefHeight="800.0"> 
       <ListView fx:id="listView"/> 
      </StackPane> 
     </left> 

     <center> 
      <StackPane> 
       <ScrollPane> 
        <Group fx:id="selectionGroup"> 
         <ImageView fx:id="mainImageView"/> 
        </Group> 
       </ScrollPane> 
      </StackPane> 
     </center> 

     <right> 
      <TextField promptText="Text" /> 
     </right> 
    </BorderPane> 

</VBox>

來源

2017-08-10 santafebound

如果您刪除'ScrollPane'並將'ImageView'直接放到'StackPane'中，則應該修復您的問題 – Sedrick

您似乎針對佈局發佈了很多相當簡單的（對於具有您的聲譽級別的人）問題。只需閱讀基本[教程]（http://docs.oracle.com/javase/8/javafx/layout-tutorial/index.html）和[API文檔]（http://docs.oracle.com/javase/ 8/javafx/api/javafx/scene/layout/package-summary.html）應該很快爲這些提供答案。 –

@James_D謝謝我剛發現XML/FXML對於佈局一般來說很可怕。我會檢查他們。 – santafebound

變化：

 <StackPane> 
      <ScrollPane> 
       <Group fx:id="selectionGroup"> 
        <ImageView fx:id="mainImageView"/> 
       </Group> 
      </ScrollPane> 
     </StackPane>

要：

 <StackPane> 
      <children> 
       <ImageView fx:id="mainImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" />      
      </children> 
     </StackPane>

您可能需要調整fitWidth和fitHeight屬性。

來源

2017-08-10 16:03:19 Sedrick

這將圖像移動到StackPane的絕對中心，但是它破壞了與ScrollPane/Group組合相關的以前的功能。有沒有這樣做而不改變這些元素？ – santafebound

什麼功能？ – Sedrick

如何將ImageView錨定到其BorderPane區域的中心？

回答

相關問題