JavaFX "endless" Pane

Question

所以我试图在 JavaFX 中创建一种带有 Canvas 和工具栏的类似绘画/Photoshop 的应用程序。如果可能的话，我想要的是 Canvas 相当大，甚至是无穷无尽的。我希望用户能够在 Canvas 上平移并放大和缩小等。我的解决方案是将工具栏放在 BorderPane 中， Canvas 是常规 Pane (因此不是 JavaFX-Canvas)，然后将 BorderPane 堆叠在 StackPane 中的 Pane 顶部。出现的问题是，当我想让 Pane 的尺寸变得非常大时，这会将 BorderPane 的内容推到屏幕外，因为它们都在同一个 StackPane 中。

这是 StackPane fxml:

<StackPane fx:controller="controller.MainController" xmlns:fx="http://javafx.com/fxml">

  <Pane fx:id="aDrawPane">

  </Pane>
  <BorderPane fx:id="aBorderPane">
      <top>
          <VBox>
              <ToolBar fx:id="aToolBar" orientation="HORIZONTAL">
                  <HBox fx:id="umlBox">
                      <Button text="Create" fx:id="createBtn"/>
                      <Button text="Package" fx:id="packageBtn"/>
                      <Button text="Edge" fx:id="edgeBtn"/>
                      <Button text="Draw" fx:id="drawBtn"/>
                  </HBox>
                  <HBox fx:id="utilBox">
                      <Button text="Select" fx:id="selectBtn"/>
                      <Button text="Move" fx:id="moveBtn"/>
                  </HBox>
                  <HBox fx:id="undoBox">
                      <Button text="Delete" fx:id="deleteBtn"/>
                      <Button text="Undo" fx:id="undoBtn"/>
                      <Button text="Redo" fx:id="redoBtn"/>
                  </HBox>
                  <HBox fx:id="recognizeBox">
                      <Button text="Recognize" fx:id="recognizeBtn"/>
                  </HBox>
              </ToolBar>
          </VBox>
      </top>
      <bottom>
          <ToolBar>
              <Pane HBox.hgrow="ALWAYS" />
              <VBox alignment="CENTER">
                  <Slider fx:id="zoomSlider" min="10"  max="200" value="100"/>
                  <Label text="Zoom"/>
              </VBox>
              <Pane HBox.hgrow="ALWAYS" />
          </ToolBar>
      </bottom>
  </BorderPane>
</StackPane>

该 fxml 实际上也放置在该 fxml 内的选项卡中:

<VBox fx:controller="controller.TabController" xmlns:fx="http://javafx.com/fxml">
<MenuBar fx:id="menuBar">
    <menus>
        <Menu text="File">
            <items>
                <MenuItem text="New" onAction="#handleMenuActionNew"/>
                <MenuItem text="Open" onAction="#handleMenuActionLoad"/>
                <MenuItem text="Save" onAction="#handleMenuActionSave"/>
                <SeparatorMenuItem/>
                <CheckMenuItem fx:id="mouseMenuItem" text="Activate Mouse" onAction="#handleMenuActionMouse" selected="false"/>
                <SeparatorMenuItem/>
                <MenuItem text="Exit" onAction="#handleMenuActionExit"/>
            </items>
        </Menu>
        <Menu text="Edit">
            <items>
                <MenuItem text="Copy"/>
                <MenuItem text="Cut"/>
                <MenuItem text="Paste"/>
            </items>
        </Menu>
        <Menu text="View">
            <items>
                <CheckMenuItem fx:id="umlMenuItem" text="UML" onAction="#handleMenuActionUML" selected="true"/>
                <CheckMenuItem fx:id="sketchesMenuItem" text="Sketches" onAction="#handleMenuActionSketches" selected="true"/>
                <CheckMenuItem fx:id="gridMenuItem" text="Grid" onAction="#handleMenuActionGrid" selected="true"/>
            </items>
        </Menu>
    </menus>
</MenuBar>
<TabPane fx:id="tabPane">

</TabPane>
<stylesheets>
    <URL value="@main.css" />
</stylesheets>
</VBox>

因此 StackPane 被放置在 TabPane 内的选项卡内。所以我想要的是“aDrawPane”非常大(甚至感觉它是无穷无尽的)，而用户一开始只关注它的一小部分，但能够平移和缩放它。我希望它位于工具栏“下方”。

我希望我已经解释清楚了。我正在寻找有关如何使用 JavaFX 库构建此类应用程序的指导，而不是如何实现绘图/缩放/平移功能的指导。

Answer 1

我认为您使问题过于复杂化了。首先，您的 Pane 顺序不正确。 BorderPane 现在位于 Pane “上方”。

BorderPane 已经有一个“CENTER”，用于您的案例。将您的 Pane 包装为 ScrollPane 并将其放在那里。

这是一个例子:

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<BorderPane fx:id="aBorderPane" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
    <top>
        <VBox>
            <ToolBar fx:id="aToolBar" orientation="HORIZONTAL">
                <HBox fx:id="umlBox">
                    <Button fx:id="createBtn" text="Create" />
                    <Button fx:id="packageBtn" text="Package" />
                    <Button fx:id="edgeBtn" text="Edge" />
                    <Button fx:id="drawBtn" text="Draw" />
                </HBox>
                <HBox fx:id="utilBox">
                    <Button fx:id="selectBtn" text="Select" />
                    <Button fx:id="moveBtn" text="Move" />
                </HBox>
                <HBox fx:id="undoBox">
                    <Button fx:id="deleteBtn" text="Delete" />
                    <Button fx:id="undoBtn" text="Undo" />
                    <Button fx:id="redoBtn" text="Redo" />
                </HBox>
                <HBox fx:id="recognizeBox">
                    <Button fx:id="recognizeBtn" text="Recognize" />
                </HBox>
            </ToolBar>
        </VBox>
    </top>
    <bottom>
         <VBox alignment="CENTER" fillWidth="false">
             <Slider fx:id="zoomSlider" max="200" min="10" value="100" />
             <Label text="Zoom" />
         <padding>
            <Insets top="8.0" />
         </padding>
         </VBox>
    </bottom>
    <center>
        <ScrollPane pannable="true" prefViewportHeight="400.0" prefViewportWidth="400.0" BorderPane.alignment="CENTER">
            <content>
                <Pane fx:id="aDrawPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="8000.0" prefWidth="8000.0">
                </Pane>
            </content>
        </ScrollPane>
    </center>
   <padding>
      <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
   </padding>
</BorderPane>

在此示例中， Pane 将随其子项一起增大，这意味着当您在其中绘制/定位元素时， Pane 将增大/缩小。

虚拟 Canvas

如果你想模拟一个无限的空白空间，即使还没有绘制 item ，用户也可以滚动和移动，你必须以编程方式实现它，单独的 FXML 太有限了。

基本上，您将创建一个 AnchorPane，其中包含一个 Group 内的 drawPane 和 2 个 ScrollBar。然后编写代码以在 X/Y 方向上平移drawPane。

AnchorPane
   -> Group (setManaged(false))
      '-> drawPane
   -> vertical ScrollBar
   -> horizontal ScrollBar

该组将自动调整大小以包含其所有子组。它需要“不受管理”，以便其父级(AnchorPane)不会调整自身大小，以便您可以将其放入 GUI 的其余部分，而无需四处移动，从而有效地在 Canvas 中创建视口(viewport)。在这种布局中，组成为无限的虚拟 Canvas ，而drawPane成为某种逻辑边界(纸张、文档大小、打印大小...)。