因此，我尝试使用画布和工具栏在JavaFX中创建一种类似于Paint / Photoshop的应用程序。我想要的是，如果可能的话，画布要相当大，甚至是无尽的。我希望用户能够在画布上平移并放大和缩小等。我的解决方案是将工具栏放在BorderPane中，而画布是常规窗格（因此不是JavaFX-Canvas），然后将BorderPane堆叠在StackPane中的窗格顶部。出现的问题是，当我想使窗格变大时，这会将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库构造这样的应用程序的指南，而不是如何实现绘图/缩放/平移功能的指南。
最佳答案
我相信您使这个问题复杂化了很多。首先，您的窗格顺序不正确。 BorderPane现在位于“窗格”上方。
BorderPane已经有一个“ CENTER”，用于您的案例。包装您的窗格是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>
在此示例中，窗格将随其子项一起增长，这意味着在其中绘制/放置元素时，窗格将增长/收缩。
虚拟画布
如果要模拟一个无限的空白空间，即使没有绘制任何项目，用户也可以在其中滚动和移动，则必须以编程方式实现它，仅FXML太受限制了。
基本上，您将在一个Group和2个ScrollBar的内部创建一个带有drawPane的AnchorPane。然后编写代码以在X / Y方向上转换drawPane。
AnchorPane
-> Group (setManaged(false))
'-> drawPane
-> vertical ScrollBar
-> horizontal ScrollBar
该组将自动调整大小以包含其所有子级。它需要“不受管理”，以便其父级（AnchorPane）不会调整自身大小，以便您可以将其放入GUI的其余部分，而无需四处推挤，从而有效地将视口创建到画布中。
在这种布局下，Group成为无限的虚拟画布，而drawPane成为某种逻辑边界（纸张，文档大小，打印大小...）。