简体   繁体   English

如何将ImageView锚定到其BorderPane区域的中心?

[英]How can I anchor an ImageView to the center of its BorderPane area?

I've got a BorderPane layout with an ImageView, shown below, but the ImageView is always anchored to the top-left corner, and stays there when I resize the window. 我有一个带ImageView的BorderPane布局,如下所示,但是ImageView始终固定在左上角,并在调整窗口大小时停留在该位置。 I would like to the ImageView to maintain anchor at the center of the section it has been bound to (red box). 我想让ImageView保持锚定在它绑定到的部分的中心(红色框)。 Is this possible using FXML? 使用FXML是否可能?

在此处输入图片说明

FXML: 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>

Change: 更改:

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

To: 至:

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

You may need to adjust the fitWidth and fitHeight attributes. 您可能需要调整fitWidthfitHeight属性。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM