Question

This task is a program framework that you should complete. The program should allow the user to move a circular figure with the mouse over a drawing area. The current position of the figure is displayed continuously:

Given is the main program:

import javafx.scene.Scene;

import javafx.application.Application;
import javafx.beans.value.*;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class Main extends Application {
    private DraggableCircle dc;
    private Text text;
    private void updateText() {
        text.setText("("+dc.getCenterX()+", "+dc.getCenterY()+")");
    }
    @Override
    public void start(final Stage stage) throws Exception {
        dc= new DraggableCircle(100d, 100d);
        text= new Text(10, 10, "");
        updateText(); // initialize once

        // TODO: create a ChangeListener<Number>, that is
        // called everytime the user moved the "dc" center coordinates.
        // The change listener should call the above updateText method.
        //
        // Hint: add the ChangeListener to both of dc's
        // centerXProperty and centerYProperty.
        
        // Please insert your code here ...


        Group root = new Group(dc, text);
        stage.setScene(new Scene(root, 400, 400, Color.ALICEBLUE));
        stage.setTitle("Drag Sample");
        stage.show();
    }
    public static void main(String[] args) throws Exception {
        launch(args);
    }
}

At the marked point, code should be added by you.

Furthermore, the DraggableCircle class printed below is given, which represents the object to be moved. The class inherits from the JavaFX class javafx.scene.shape.Circle, whose function you might want to look at first by consulting the API documentation.

The constructor of the DraggableCircle class creates a yellow disk at the position specified by the constructor parameters. In addition, the constructor already implements an EventHandler, which displays the following icon as a mouse pointer when the mouse button is pressed:

import javafx.scene.Cursor;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.StrokeType;

class DraggableCircle extends Circle {
DraggableCircle(double x, double y) {
super(x, y, 10);
setFill(Color.YELLOW);
setStroke(Color.GOLD);
setStrokeWidth(2);
setStrokeType(StrokeType.OUTSIDE);

setOnMousePressed( ev -> {
getScene().setCursor(Cursor.MOVE);
});
  
// TODO: implement event handlers as follows:
// - mouse button releases: show default cursor
// - mouse dragged: set the center of the circle to the current
// mouse position.
}
}

They should now complete the class. First a corresponding EventHandler has to be implemented, which returns the mouse pointer to the default when the mouse button is released. In addition, you should program the drawing of the circular disk. Please note the following solution idea:

One or more instance attributes to be implemented by you pick up the mouse pointer position when the mouse button is pressed down.
When the user starts moving the mouse, MOUSE_DRAGGED MouseEvents will be generated continuously.
Each mouseDragged event calls an event handler you want to write that queries the current mouse position.
The coordinates of the two current mouse positions are used by this EventHandler to reposition the circular disc with setCenterX or setCenterY.
To get a "nice" result, you need to think about how you can prevent the disc from "jumping" if the user does not press down the mouse button right in the center of the disc. In this case, when the mouse button is pressed down, there is an "offset" between the circle center and the mouse position. This offset should be maintained throughout the shift operation.

X Drag Sample (217.0, 120.0)

Answer 1

Here is the completed code for this problem. Comments are included, go through it, learn how things work and let me know if you have any doubts or if you need anything to change. If you are satisfied with the solution, please rate the answer. Thanks

// Main.java

import javafx.scene.Scene;

import javafx.application.Application;

import javafx.beans.value.*;

import javafx.scene.*;

import javafx.scene.paint.Color;

import javafx.scene.text.Text;

import javafx.stage.Stage;

public class Main extends Application {

    private DraggableCircle dc;

    private Text text;

    private void updateText() {

        text.setText("(" + dc.getCenterX() + ", " + dc.getCenterY() + ")");

    }

    @Override

    public void start(final Stage stage) throws Exception {

        dc = new DraggableCircle(100d, 100d);

        text = new Text(10, 20, "");

        updateText(); // initialize once

        //adding change listener for center x property of dc

        dc.centerXProperty().addListener(e -> {

            //updating text

            updateText();

        });

        //adding change listener for center y property of dc

        dc.centerYProperty().addListener(e -> {

            updateText();

        });

        Group root = new Group(dc, text);

        stage.setScene(new Scene(root, 400, 400, Color.ALICEBLUE));

        stage.setTitle("Drag Sample");

        stage.show();

    }

    public static void main(String[] args) throws Exception {

        launch(args);

    }

}

// DraggableCircle.java

import javafx.scene.Cursor;

import javafx.scene.paint.Color;

import javafx.scene.shape.Circle;

import javafx.scene.shape.StrokeType;

class DraggableCircle extends Circle {

    private double offsetX, offsetY; //offset values

    DraggableCircle(double x, double y) {

        super(x, y, 10);

        setFill(Color.YELLOW);

        setStroke(Color.GOLD);

        setStrokeWidth(2);

        setStrokeType(StrokeType.OUTSIDE);

       

        setOnMousePressed(ev -> {

            getScene().setCursor(Cursor.MOVE);

            //recording offset values (change of point of press with respect

            //to the center coordinates)

            offsetX=ev.getX()-getCenterX();

            offsetY=ev.getY()-getCenterY();

        });

       

        setOnMouseReleased(ev->{

            //using default cursor icon

            getScene().setCursor(Cursor.DEFAULT);

        });

       

        //adding mouse dragged listener

        setOnMouseDragged(ev->{

            //setting center coordinates to current position of mouse, with respect

            //to the offset values

            setCenterX(ev.getX()-offsetX);

            setCenterY(ev.getY()-offsetY);

        });

    }

}

/*OUTPUT*/

Drag Sample (213.0, 200.0)