Question

因此，我尝试使用画布和工具栏在JavaFX中创建一种类似paint / photoshop的应用程序应用程序。如果可能的话，我想要的是画布相当大或甚至无穷无尽。我希望用户能够在画布上平移并放大和缩小等。我的解决方案是将工具栏放在BorderPane中，画布是常规窗格（因此不是JavaFX-Canvas）然后将BorderPane堆叠在StackPane中的窗格顶部。出现的问题是当我想让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

我相信你的问题过于复杂了。首先，您的窗格顺序不正确。 BorderPane现在位于Pane的“上方”。

BorderPane已经有一个“中心”，可用于您的案件。包裹你的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>

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

虚拟画布

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

基本上你会在Group中创建一个带有drawPane的AnchorPane，以及2个ScrollBars。然后编写代码以在X / Y方向上转换drawPane。

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

该组将自动调整大小以涵盖其所有子女。它需要“非托管”，以便其父级（AnchorPane）不会自行调整大小，以便您可以将其放入GUI的其余部分，而无需将其推入，从而有效地将视口创建到画布中。在这个布局中，该组成为无限的虚拟画布，而drawPane成为某种逻辑边界（纸张，文档大小，打印尺寸......）。

JavaFX“无尽的”窗格

1 个答案:

虚拟画布