簡體   English   中英

如何在Javafx 2.0中創建可拖動節點。

[英]how to make a Draggable Node in Javafx 2.0.

如何在Javafx 2.0中創建可拖動節點。 JavaFX專門用於GUI目的,我需要一些樣品謝謝

Oracle提供了有關可拖動節點教程

這是教程中的makeDraggable方法:

private Node makeDraggable(final Node node) {
final DragContext dragContext = new DragContext();
final Group wrapGroup = new Group(node);

wrapGroup.addEventFilter(
    MouseEvent.ANY,
    new EventHandler<MouseEvent>() {
        public void handle(final MouseEvent mouseEvent) {
            if (dragModeActiveProperty.get()) {
                // disable mouse events for all children
                mouseEvent.consume();
            }
         }
    });

wrapGroup.addEventFilter(
    MouseEvent.MOUSE_PRESSED,
    new EventHandler<MouseEvent>() {
        public void handle(final MouseEvent mouseEvent) {
            if (dragModeActiveProperty.get()) {
                // remember initial mouse cursor coordinates
                // and node position
                dragContext.mouseAnchorX = mouseEvent.getX();
                dragContext.mouseAnchorY = mouseEvent.getY();
                dragContext.initialTranslateX =
                    node.getTranslateX();
                dragContext.initialTranslateY =
                    node.getTranslateY();
            }
        }
    });

wrapGroup.addEventFilter(
    MouseEvent.MOUSE_DRAGGED,
    new EventHandler<MouseEvent>() {
        public void handle(final MouseEvent mouseEvent) {
            if (dragModeActiveProperty.get()) {
                // shift node from its initial position by delta
                // calculated from mouse cursor movement
                node.setTranslateX(
                    dragContext.initialTranslateX
                        + mouseEvent.getX()
                        - dragContext.mouseAnchorX);
                node.setTranslateY(
                    dragContext.initialTranslateY
                        + mouseEvent.getY()
                        - dragContext.mouseAnchorY);
            }
        }
    });

return wrapGroup;

}

有時您不需要過濾器和拖動上下文,並且可以通過執行各種鼠標事件(例如此示例)來執行更簡單的操作:

static class Delta { double x, y; }
// make a node movable by dragging it around with the mouse.
private void enableDrag(final Circle circle) {
final Delta dragDelta = new Delta();
circle.setOnMousePressed(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    // record a delta distance for the drag and drop operation.
    dragDelta.x = circle.getCenterX() - mouseEvent.getX();
    dragDelta.y = circle.getCenterY() - mouseEvent.getY();
    circle.getScene().setCursor(Cursor.MOVE);
  }
});
circle.setOnMouseReleased(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    circle.getScene().setCursor(Cursor.HAND);
  }
});
circle.setOnMouseDragged(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    circle.setCenterX(mouseEvent.getX() + dragDelta.x);
    circle.setCenterY(mouseEvent.getY() + dragDelta.y);
  }
});
circle.setOnMouseEntered(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    if (!mouseEvent.isPrimaryButtonDown()) {
      circle.getScene().setCursor(Cursor.HAND);
    }
  }
});
circle.setOnMouseExited(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    if (!mouseEvent.isPrimaryButtonDown()) {
      circle.getScene().setCursor(Cursor.DEFAULT);
    }
  }
});
}

拖動節點的相同技術也可用於拖動各個階段

static class Delta { double x, y; }
/** makes a stage draggable using a given node */
public static void makeDraggable(final Stage stage, final Node byNode) {
final Delta dragDelta = new Delta();
byNode.setOnMousePressed(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    // record a delta distance for the drag and drop operation.
    dragDelta.x = stage.getX() - mouseEvent.getScreenX();
    dragDelta.y = stage.getY() - mouseEvent.getScreenY();
    byNode.setCursor(Cursor.MOVE);
  }
});
byNode.setOnMouseReleased(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    byNode.setCursor(Cursor.HAND);
  }
});
byNode.setOnMouseDragged(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    stage.setX(mouseEvent.getScreenX() + dragDelta.x);
    stage.setY(mouseEvent.getScreenY() + dragDelta.y);
  }
});
byNode.setOnMouseEntered(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    if (!mouseEvent.isPrimaryButtonDown()) {
      byNode.setCursor(Cursor.HAND);
    }
  }
});
byNode.setOnMouseExited(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent mouseEvent) {
    if (!mouseEvent.isPrimaryButtonDown()) {
      byNode.setCursor(Cursor.DEFAULT);
    }
  }
});
}

用於在父節點(包含多個子節點)周圍拖動的示例。 此示例比上面的基於圓的示例更通用,因為它不依賴於大多數節點沒有的centerX / Y屬性,而是在layoutX / Y上工作,這些屬性可用於放置在父組或窗格中的所有節點。

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Text;
import javafx.scene.text.TextBoundsType;
import javafx.stage.Stage;

public class TextOnCircleWithDragging extends Application {
    private static final int W = 400;
    private static final int H = 400;
    private static final int R = 15;

    @Override
    public void start(Stage stage) {
        final StackPane circleWithText = new StackPane(
                createCircle(),
                createText()
        );
        circleWithText.relocate(
                W/2 - R/2,
                H/2 - R/2
        );

        makeDraggable(circleWithText);

        stage.setScene(
                new Scene(
                        new Pane(circleWithText),
                        W, H
                )
        );
        stage.show();
    }

    private Circle createCircle() {
        final Circle circle = new Circle(R);
        circle.setFill(Color.PALEGREEN);
        circle.relocate(0, 0);

        return circle;
    }

    private Text createText() {
        final Text text = new Text("A");
        text.setBoundsType(TextBoundsType.VISUAL);

        return text;
    }

    private void makeDraggable(Node node) {
        final Delta dragDelta = new Delta();

        node.setOnMouseEntered(me -> {
            if (!me.isPrimaryButtonDown()) {
                node.getScene().setCursor(Cursor.HAND);
            }
        });
        node.setOnMouseExited(me -> {
            if (!me.isPrimaryButtonDown()) {
                node.getScene().setCursor(Cursor.DEFAULT);
            }
        });
        node.setOnMousePressed(me -> {
            if (me.isPrimaryButtonDown()) {
                node.getScene().setCursor(Cursor.DEFAULT);
            }
            dragDelta.x = me.getX();
            dragDelta.y = me.getY();
            node.getScene().setCursor(Cursor.MOVE);
        });
        node.setOnMouseReleased(me -> {
            if (!me.isPrimaryButtonDown()) {
                node.getScene().setCursor(Cursor.DEFAULT);
            }
        });
        node.setOnMouseDragged(me -> {
            node.setLayoutX(node.getLayoutX() + me.getX() - dragDelta.x);
            node.setLayoutY(node.getLayoutY() + me.getY() - dragDelta.y);
        });
    }

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

    private class Delta {
        public double x;
        public double y;
    }
}

滯后調整

如果您看到拖動的節點滯后於光標並希望解決這個問題,那么請參閱Xanatos的答案:

他建議你可能希望設置:

-Dprism.vsync=false

要解決問題, 請訪問https://bugs.openjdk.java.net/browse/JDK-8087922

派對有點晚了,但我需要在Node的許多子類中進行可拖動性,所以我創建了一個實用程序類:

/**
 * Generalised implementation of 'Draggability' of a {@link Node}. The Draggable class is used as a 'namespace' for the internal
 * class/interfaces/enum.
 * @author phill
 *
 */
public class Draggable {
public enum Event {
    None, DragStart, Drag, DragEnd
}

/**
 * Marker for an entity that has draggable nature.
 * @author phill
 */
public interface Interface {
    public abstract Draggable.Nature getDraggableNature();
}

public interface Listener {
    public void accept(Nature draggableNature, Event dragEvent);
}

/**
 * Class that encapsulates the draggable nature of a node.
 * <ul>
 * <li>EventNode: the event that receives the drag events</li>
 * <li>One or more DragNodes: that move in response to the drag events. The EventNode is usually (but not always) a
 * DragNode</li>
 * <li>Listeners: listen for the drag events</li>
 * </ul>
 * @author phill
 *
 */
public static final class Nature implements EventHandler<MouseEvent> {
    private double lastMouseX = 0, lastMouseY = 0; // scene coords

    private boolean dragging = false;

    private final boolean enabled = true;
    private final Node eventNode;
    private final List<Node> dragNodes = new ArrayList<>();
    private final List<Listener> dragListeners = new ArrayList<>();

    public Nature(final Node node) {
        this(node, node);
    }

    public Nature(final Node eventNode, final Node... dragNodes) {
        this.eventNode = eventNode;
        this.dragNodes.addAll(Arrays.asList(dragNodes));
        this.eventNode.addEventHandler(MouseEvent.ANY, this);
    }

    public final boolean addDraggedNode(final Node node) {
        if (!this.dragNodes.contains(node)) {
            return this.dragNodes.add(node);
        }
        return false;
    }

    public final boolean addListener(final Listener listener) {
        return this.dragListeners.add(listener);
    }

    public final void detatch() {
        this.eventNode.removeEventFilter(MouseEvent.ANY, this);
    }

    public final List<Node> getDragNodes() {
        return new ArrayList<>(this.dragNodes);
    }

    public final Node getEventNode() {
        return this.eventNode;
    }

    @Override
    public final void handle(final MouseEvent event) {
        if (MouseEvent.MOUSE_PRESSED == event.getEventType()) {
            if (this.enabled && this.eventNode.contains(event.getX(), event.getY())) {
                this.lastMouseX = event.getSceneX();
                this.lastMouseY = event.getSceneY();
                event.consume();
            }
        } else if (MouseEvent.MOUSE_DRAGGED == event.getEventType()) {
            if (!this.dragging) {
                this.dragging = true;
                for (final Listener listener : this.dragListeners) {
                    listener.accept(this, Draggable.Event.DragStart);
                }
            }
            if (this.dragging) {
                final double deltaX = event.getSceneX() - this.lastMouseX;
                final double deltaY = event.getSceneY() - this.lastMouseY;

                for (final Node dragNode : this.dragNodes) {
                    final double initialTranslateX = dragNode.getTranslateX();
                    final double initialTranslateY = dragNode.getTranslateY();
                    dragNode.setTranslateX(initialTranslateX + deltaX);
                    dragNode.setTranslateY(initialTranslateY + deltaY);
                }

                this.lastMouseX = event.getSceneX();
                this.lastMouseY = event.getSceneY();

                event.consume();
                for (final Listener listener : this.dragListeners) {
                    listener.accept(this, Draggable.Event.Drag);
                }
            }
        } else if (MouseEvent.MOUSE_RELEASED == event.getEventType()) {
            if (this.dragging) {
                event.consume();
                this.dragging = false;
                for (final Listener listener : this.dragListeners) {
                    listener.accept(this, Draggable.Event.DragEnd);
                }
            }
        }

    }

    public final boolean removeDraggedNode(final Node node) {
        return this.dragNodes.remove(node);
    }

    public final boolean removeListener(final Listener listener) {
        return this.dragListeners.remove(listener);
    }

    /**
     * When the initial mousePressed is missing we can supply the first coordinates programmatically.
     * @param lastMouseX
     * @param lastMouseY
     */
    public final void setLastMouse(final double lastMouseX, final double lastMouseY) {
        this.lastMouseX = lastMouseX;
        this.lastMouseY = lastMouseY;
    }
}
}

這可以應用於任何節點:

final Rectangle rectangle = new Rectangle(100, 100, 200, 50);
Draggable.Nature nature = new Draggable.Nature(rectangle);

矩形是可拖動的。 您可以向Draggable.Nature添加偵聽器,並且可以添加可以同時拖動的額外節點。

這解決了我的需求 - 希望它有所幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM