CODEWITHSUNDEEP
javafx
MaryamB
MaryamB

Reputation: 11

Drawing a rectangle in all directions with javaFX fails

I use this code to draw a rectangle while dragging the mouse. The problem is that i only can draw from left down to the right.

Here is my code:

public class functionalTest extends Application {

    BorderPane pane;
    Rectangle rect;
    Group group;
    SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
    SimpleDoubleProperty rectinitY = new SimpleDoubleProperty();
    SimpleDoubleProperty rectX = new SimpleDoubleProperty();
    SimpleDoubleProperty rectY = new SimpleDoubleProperty();


    @Override
    public void start(Stage stage) {


        pane = new BorderPane();
        Scene scene = new Scene(pane, 800, 600);
        stage.setScene(scene);

        group = new Group();
        Circle circle = new Circle(200, 200, 25);
        circle.setFill(Color.HOTPINK);
        group.getChildren().add(circle);

        scene.setOnMouseDragged(mouseHandler);
        scene.setOnMousePressed(mouseHandler);
        scene.setOnMouseReleased(mouseHandler);

        rect = getNewRectangle();
        rect.widthProperty().bind(rectX.subtract(rectinitX));
        rect.heightProperty().bind(rectY.subtract(rectinitY));
        pane.getChildren().add(rect);
        pane.getChildren().add(group);
        stage.show();

        ArrayList<Node> containedNodesArray = new ArrayList<Node>();
        containedNodesArray = Main.dragBoxSelection(group, rect);

        if (containedNodesArray.size() > 0) {
            System.out.println("Success");
        }
    }

    EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {

        @Override
        public void handle(MouseEvent mouseEvent) {

            if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
                rect.setX(mouseEvent.getX());
                rect.setY(mouseEvent.getY());
                rectinitX.set(mouseEvent.getX());
                rectinitY.set(mouseEvent.getY());
            } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
                rectX.set(mouseEvent.getX());
                rectY.set(mouseEvent.getY());
                System.out.println("RECTX"+rectX.getValue());
                System.out.println("RECTY"+rectY.getValue());
                ArrayList<Node> containedNodesArray = new ArrayList<Node>();
                containedNodesArray = Main.dragBoxSelection(group, rect);

                if (containedNodesArray.size() > 0) {
                    System.out.println("Success");
                }
            } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_RELEASED) {
                // Clone the rectangle
                Rectangle r = getNewRectangle();
                r.setX(rect.getX());
                r.setY(rect.getY());
                r.setWidth(rect.getWidth());
                r.setHeight(rect.getHeight());
                pane.getChildren().add(r);

                // Hide the rectangle
                rectX.set(0);
                rectY.set(0);
            }
        }


    };

    private Rectangle getNewRectangle() {
        Rectangle r = new Rectangle();
        r.setFill(Color.web("blue", 0.1));
        r.setStroke(Color.BLUE);

        return r;
    }

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

Please can anyone help me draw in other direcions from right up to left, left up to the right and right down to he left.

Upvotes: 1

Views: 3862

Answers (5)

Yanick Poirier
Yanick Poirier

Reputation: 71

Don't know if it worked for anyone but no luck for me. However, this does work for me in JavaFX 8:

if( event.getEventType() == MouseDragEvent.MOUSE_DRRAGGED ) {
    double deltaX = event.getX() - initialPt.getX();
    double deltaY = event.getY() - initialPt.getY();

    if( deltaX < 0 ) {
        rect.setX( event.getX() );
        rect.setWidth( -deltaX );
    }
    else {
        rect.setX( initialPt.getX() );
        rect.setWidth( event.getX() - initialPt.getX() );
    }

    if( deltaY < 0 ) {
        rect.setY( event.getY() );
        rect.setHeight( -deltaY );
    }
    else {
        rect.setY( initialPt.getY() );
        rect.setHeight( event.getY() - initialPt.getY() );
    }
}

No need to call setTranslateX() or setTranslateY(). Don't know if that could be related to which FX version you're using.

Upvotes: 2

Andres Acosta
Andres Acosta

Reputation: 1

it should read 

 if(dy < 0)
 {
   rectY.set(mouseEvent.getY());
   rect.setTranslateY(dy);
   rect.heightProperty().bind(rectinitY.subtract(rectY));
 }

Upvotes: 0

marcelo6297
marcelo6297

Reputation: 41

This is what you need to do:

When the mouse is dragged: get the dx = mouseEvent.getX() - initial X; if dx < 0 then you need to setTranslateX(dx) and setWidth(-dx) else setTranslateX(0) and setWidth(dx)

Do the same for the Y coordinate, however this time use height not width;

This is all.

Upvotes: 1

realmean
realmean

Reputation: 7

You are missing the height parameters.

            if (event.getEventType() == MouseEvent.MOUSE_PRESSED) {
            rect.setX(event.getX());
            rect.setY(event.getY());
            rectinitX.set(event.getX());
            rectinitY.set(event.getY());
        } else if (event.getEventType() == MouseEvent.MOUSE_DRAGGED) {
            Double dx = event.getX() - rectinitX.getValue();
            Double dy = event.getY() - rectinitY.getValue();
            if (dx < 0) {
                rectX.set(event.getX());
                rect.setTranslateX(dx);
                rect.widthProperty().bind(rectinitX.subtract(rectX));
            } else {
                rectX.set(event.getX());
                rect.setTranslateX(0);
                rect.widthProperty().bind(rectX.subtract(rectinitX));
            }
            if(dy < 0) {
                rectY.set(event.getY());
                rect.setTranslateY(dy);
                rect.heightProperty().bind(rectinitX.subtract(rectX));
            } else {
                rectY.set(event.getY());
                rect.setTranslateY(0);
                rect.heightProperty().bind(rectY.subtract(rectinitY));
            }

        } else if (event.getEventType() == MouseEvent.MOUSE_RELEASED) {
            // Clone the rectangle
            Rectangle r = getNewRectangle();
            r.setX(rect.getX());
            r.setY(rect.getY());
            r.setWidth(rect.getWidth());
            r.setHeight(rect.getHeight());
            pane.getChildren().add(r);

            // Hide the rectangle
            rectX.set(0);
            rectY.set(0);
  }}}};

This is the exact code for drawing in different directions except doesn´t work unfortunately from left bottom to right top and I cannot figure it out. Works perfectly in default aka left to right but there is a code bug when drawing right to left. If someone could figure it out, I´ll be much appricated

Upvotes: 0

MaryamB
MaryamB

Reputation: 11

I replaced the code to be like this: EventHandler mouseHandler = new EventHandler() {

    @Override
    public void handle(MouseEvent mouseEvent) {

        if (mouseEvent.getEventType() == MouseEvent.MOUSE_PRESSED) {
            rectinitX.set(mouseEvent.getX());
            rectinitY.set(mouseEvent.getY());
        } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
            Double width = mouseEvent.getX() - rectinitX.getValue();
            if (width < 0) {
                rectX.set(mouseEvent.getX());
                rect.setTranslateX(width);
                rect.widthProperty().bind(rectinitX.subtract(rectX));
                System.out.println(rect.getWidth());
            } else {
                rectX.set(mouseEvent.getX());
                rect.setTranslateX(0);
                rect.widthProperty().bind(rectX.subtract(rectinitX));
            }

        } else if (mouseEvent.getEventType() == MouseEvent.MOUSE_RELEASED) {
            // Clone the rectangle
            Rectangle r = getNewRectangle();
            r.setX(rect.getX());
            r.setY(rect.getY());
            r.setWidth(rect.getWidth());
            r.setHeight(rect.getHeight());
            pane.getChildren().add(r);


        }
    }
};

I only wanted to try your solution for the width vaues at first but it doesn't seem to work. Do you have any comments on my implementation?

Upvotes: 0

Related Questions