Drawing a rectangle in all directions with javaFX fails - javafx

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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?

Answer 4

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

Answer 5

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