使点可拖动并存储新的坐标JavaFx

Question

我有这个：

Circle circle = null; 
List<Circle> circles = new ArrayList<>();
for(List row: list)  //list is list of coordinates i.e. [[200,100],[10,5.5],[15,100],[200,25]...]        
{
circle = new Circle((double) row.get(0), (double) row.get(1), 4f);
circle.setFill(Color.BLUE);
Tooltip toolTipx = new Tooltip("The point is : " + (double) row.get(0));
Tooltip.install(circle, toolTipx);
circles.add(circle);
}

System.out.println(circles.size());
Pane pane = new Pane();
pane.getChildren().addAll(circles);

这会在窗口上完美地绘制所述点，工具提示会显示该点的坐标。

现在，我想要的是创建可拖动的绘制点。这样我就可以将点拖动到窗口中的任何位置，并存储新位置(拖动点的坐标(以显示在工具提示或窗口末尾的固定标签中。

我遇到了这个(makeDraggable(((，但找不到我的起点。

我怎样才能做到这一点？谢谢

Answer 1

下面是如何在窗格中实现这种拖动的示例。只有两点，但你可以把它们放在一个列表中，你想放多少就放多少。还有一个helper类可以更好、更容易地处理一个点，还有一些helper方法可以让代码更容易阅读。

我喜欢分离主/fxml/控制器，但请随时为您获取相关信息。

有文件：

控制器：

public class Controller implements Initializable {
@FXML
private Pane pane;
@FXML
private Label circlePos;
@FXML
private AnchorPane aPane;
@Override
public void initialize(URL location, ResourceBundle resources) {
pane.prefWidthProperty().bind(aPane.widthProperty());
pane.prefHeightProperty().bind(aPane.heightProperty());
// Here are two circles to play around with but you can have as many as you want.
// The center and radius are set randomly but within some borders to dont get rendered out of the visible pane.
Circle circle = createCircle(new Point(randomBetween(5, 379), randomBetween(5, 200)), randomBetween(5, 10));
circle.setFill(Color.BLUE);
Circle circle1 = createCircle(new Point(randomBetween(5, 379), randomBetween(5, 200)), randomBetween(5, 10));
circle1.setFill(Color.GREEN);
pane.getChildren().addAll(circle, circle1);
}
/**
* Creates a new Circle object with a given center and radius
* It sets mouse events to be dragged on the pane and a label will be updated when the mouse hovers over
* the circle
*
* @param center given center as Point object
* @param radius given radius
* @return created circle
*/
private Circle createCircle(Point center, double radius) {
Circle circle = new Circle(radius);
circle.setCenterX(center.getX());
circle.setCenterY(center.getY());
// When the mouse hovers the circle sets the position label to this circle center's position
circle.setOnMouseEntered(event -> setPosLabelText(circle));
// When the mouse exits the circle (no more over it) resets the label to empty string.
circle.setOnMouseExited(event -> circlePos.setText(""));
// When a mouse drag is detected it sets the x and y coords of the circle's center to the mouse position
// which is obtained from the event. 
// Note: It is implemented so that the circle cannot be dragged out of the Pane, if it needed just remove
// the if-s and set the CenterX/Y to event.getX/Y 
circle.setOnMouseDragged(event -> {
if (event.getX() < radius) {
circle.setCenterX(radius);
} else {
circle.setCenterX(Math.min(event.getX(), pane.getWidth() - radius));
}
if (event.getY() < radius) {
circle.setCenterY(radius);
} else {
circle.setCenterY(Math.min(event.getY(), pane.getHeight() - radius));
}
setPosLabelText(circle);
});
return circle;
}
/**
* Sets the position label's text to the given circle's center coordinates.
*
* @param circle given circle
*/
private void setPosLabelText(Circle circle) {
circlePos.setText("x: " + (int) circle.getCenterX() + " y:" + (int) circle.getCenterY());
}
/**
* Generates a random number between two integers
*
* @param from random number from inclusive
* @param to   random number to exclusive
* @return generated random number
*/
private int randomBetween(int from, int to) {
return new Random().nextInt(to - from) + from;
}
/**
* Represents a 2D point
*/
private static class Point {
int x;
int y;
private Point(int x, int y) {
this.x = x;
this.y = y;
}
private int getX() {
return x;
}
private int getY() {
return y;
}
}
}

Main：

public class Main extends Application {
@Override
public void start(Stage primaryStage) throws IOException {
FXMLLoader loader = new FXMLLoader(getClass().getResource("View.fxml"));
AnchorPane anchorPane =  loader.load();
primaryStage.setScene(new Scene(anchorPane,384,216));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

Fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml"
fx:id="aPane"
fx:controller="drag.Controller">
<VBox AnchorPane.topAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.leftAnchor="0" AnchorPane.bottomAnchor="0">
<Pane fx:id="pane"/>
<Label fx:id="circlePos">
<padding>
<Insets left="5" right="5"/>
</padding>
</Label>
</VBox>
</AnchorPane>

希望能有所帮助。

Answer 2

使用：

circle.setOnMouseDragged( event -> {
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
});

以在任何创建的圆/点上触发mouseDragging事件。然后，简单地用event.getX()(目的地X点(和event.getY()(目的地Y点(重置中心X和中心Y。

我的完整代码：

public void start(Stage stage) throws IOException 
{    
Label b = new Label("The coordinates are : "); 
b.setLayoutX(190);
b.setLayoutY(280);

Label value = new Label(); 
value.setLayoutX(320);
value.setLayoutY(280);

List<Circle> circles = new ArrayList<>();
for(List row: list) 
{
Circle circle = new Circle((double) row.get(0), (double) row.get(1), 5f);
circle.setFill(Color.BLUE);

//this did the trick for me
circle.setOnMouseDragged( event -> {
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
});

//for printing the values in a Label
circle.setOnMouseClicked(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
System.out.println("Clicked");
value.setText(circle.getCenterX()+" , "+circle.getCenterY());
}
});

circles.add(circle);
}

System.out.println(circles.size());
Pane pane = new Pane();
pane.getChildren().addAll(circles);
pane.getChildren().add(b);
pane.getChildren().add(value);
Scene scene = new Scene(pane, 600, 300);  

//Setting title to the Stage 
stage.setTitle("Show Points"); 

//Adding scene to the stage 
stage.setScene(scene); 
scene.getStylesheets().add(Main.class.getResource("application.css").toExternalForm());
//Displaying the contents of the stage 
stage.show(); 

} //end of start

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