3

我正在尝试在 JavaFX-2、FXML 和 Scene Builder中制作一个简单的图像查看应用程序。这是我的第一个 JavaFX 应用程序，我在使用窗格和布局时遇到了麻烦。

基本上，我希望它在我的应用程序的绝对中心以原始大小（不能缩放/调整大小）显示图像。此外，窗口应该可以调整大小，所以如果图像大于窗口的大小，我希望滚动条看起来能够看到整个图像。

我正在尝试创建的一个很好的例子是Adob​​e Photoshop 布局：http: //imgur.com/iLS0lum。

这是我目前的布局：http: //imgur.com/R7PJRVk。图像由黑色堆栈窗格表示。滚动条目前正在工作，但我只是找不到将堆栈窗格放在中心的方法。

我觉得我错过了一些重要的事情，请您指出正确的方向吗？

谢谢！

编辑：这是我的 fxml 代码：pastebin.com/CnxYEKF1

4

1 回答 1

2

您使用 AnchorPane 作为 ScrollPane 的容器。如果您改用 StackPane，它会将内容中心设为默认值。但是，与任何其他窗格一样，StackPane 会使用尽可能多的空间，因此它总是会占用所有空间，因此根本不会居中。要解决此问题，请将您的 ScrollPane 放入一个组中。一个 Group 总是和它的孩子一样大，你可以通过设置 Scrollpane 的 prefHeight 和 prefWidth 来控制它的宽度和高度。这是您的 FXML（为简单起见，我删除了 onClick 侦听器按钮）：

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<?import javafx.scene.Group?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="700.0" xmlns:fx="http://javafx.com/fxml" fx:controller="test.StackOverflowController">
  <children>
    <VBox prefHeight="687.0" prefWidth="710.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <children>
        <ToolBar prefWidth="600.0" style="-fx-base: firebrick">
          <items>
            <Button fx:id="btn_ImgFromFile" mnemonicParsing="false" style="-fx-base: firebrick" text="Load Image From File" />
            <Button fx:id="btn_ImgFromWindow" mnemonicParsing="false" style="-fx-base: firebrick" text="Load Image From Window" />
            <Separator orientation="VERTICAL" prefHeight="21.0" />
            <Button fx:id="btn_LoadInfo" mnemonicParsing="false" style="-fx-base: firebrick" text="Load Window Info" />
            <Button fx:id="btn_SaveInfo" mnemonicParsing="false" style="-fx-base: firebrick" text="Save Window Info" />
          </items>
        </ToolBar>
        <StackPane fx:id="pane_main" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
          <children>
            <Group>
            <ScrollPane fx:id="scroll_pane" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="-1.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="1.0">
              <content>
                <StackPane fx:id="stack_pane" prefHeight="230.0" prefWidth="333.0" style="-fx-background-color: #000000;" />
              </content>
            </ScrollPane>
            </Group>
          </children>
        </StackPane>
      </children>
    </VBox>
  </children>
</AnchorPane>

结果：

在此处输入图像描述

于 2013-07-18T13:02:46.393 回答