如何将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区域的中心？

回答

相关问题