JavaFx 在 Scollpane 中拖动 Shape

Question

我目前正在制作一款益智游戏。这个想法是，在左侧你有一个 ScrollPane，其中包含一个包含所有拼图块的窗格 (javafx.shapes)。

我的代码允许我在各个部分之间拖动，但如果我想将它拖动到 ScrollPane 的底部，它会飞回其初始位置。我希望形状可以从 ScrollPane 的顶部拖动到底部。

控制器：

public class SpielModus extends Application{
    @FXML
    private ScrollPane pieceAreaScrollable;

    @FXML
    private Pane pieceArea;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        this.stage = primaryStage;
        show();
    }

    @FXML
    public void initialize() {
        Circle circle = new Circle(50, 50, 50);
        Circle circle2 = new Circle(50, 200, 50);

        Group group = new Group(circle, circle2);

        // So that the Pane is bigger then ScrollPane to become Scrollable
        pieceArea.setMinHeight(2000);
        pieceArea.getChildren().addAll(group);

        group.setOnMouseDragged(e -> {
            group.setLayoutX(e.getSceneX());
            group.setLayoutY(e.getSceneY());
        });
    }

    public void show() {
        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("SpielModus.fxml"));
            loader.setController(this);

            Parent layout = loader.load();
            stage.setScene(new Scene(layout));
            stage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

FXML:

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>

<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1080.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.171">
  <columnConstraints>
    <ColumnConstraints minWidth="10.0" prefWidth="250.0" />
    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
  </columnConstraints>
  <rowConstraints>
    <RowConstraints minHeight="10.0" prefHeight="30.0" />
    <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
  </rowConstraints>
   <children>
      <ScrollPane fx:id="pieceAreaScrollable" hbarPolicy="NEVER" prefHeight="200.0" prefWidth="200.0" vbarPolicy="ALWAYS" GridPane.rowSpan="2">
         <content>
            <Pane fx:id="pieceArea" prefHeight="200.0" prefWidth="200.0" />
         </content>
      </ScrollPane>
   </children>
</GridPane>

Answer 1

您正在将大窗格中的圆圈 pieceArea 重新定位到基于鼠标相对于场景的坐标的位置。如果 pieceArea 已经滚动，这将给出不正确的位置（因为它不考虑滚动）。您需要相对于 pieceArea（group 的父节点，即发生鼠标拖动事件的节点）的鼠标坐标。

您可以使用

    group.setOnMouseDragged(e -> {
        Point2D newLocation = group.localToParent(new Point2D(e.getX(), e.getY()));
        group.setLayoutX(newLocation.getX());
        group.setLayoutY(newLocation.getY());
    });

JavaFx 在 Scollpane 中拖动 Shape

JavaFx drag Shape in Scollpane

java

drag-and-drop

javafx