How to keep a movable object inside the window with JavaFX? - javafx

Question

I have a circle and four buttons to move it; up (ylos), down (alas), left (vasemmalle) and right (oikealle). Naturally I'd like to keep my circle inside the window but as soon as I add a condition to the button event that would prevent the circle from moving outside the window it stops moving to that direction completely.
Radius of the circle is 100, it starts from the middle (?) which means coordinates (200,200).
Below is my code, I'm sure some of you will easily spot my mistake from such a simple program. I put the supposed preventive condition only to one button so you can see that the others work as they should. The line is commented.
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.control.Button;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.collections.ObservableList;
public class Ympyra extends Application {
private double uusiY, uusiX, raja = 0;
#Override
public void start(Stage aloitus) throws Exception {
Circle ympyra = new Circle(100);
ympyra.setStroke(Color.BLACK);
ympyra.setFill(Color.WHITE);
Button btnYlos = new Button("Ylos");
Button btnAlas = new Button("Alas");
Button btnOikea = new Button("Oikealle");
Button btnVasen = new Button("Vasemmalle");
btnYlos.setOnMouseClicked(e -> {
uusiY = ympyra.getCenterY() + uusiY - 10;
if (uusiY < 100) { uusiY += 10; } // for example this kind of condition stops upward movement completely
ympyra.setTranslateX(uusiX);
ympyra.setTranslateY(uusiY);
});
btnAlas.setOnMouseClicked(e -> {
uusiY = ympyra.getCenterY() + uusiY + 10;
ympyra.setTranslateX(uusiX);
ympyra.setTranslateY(uusiY);
});
btnOikea.setOnMouseClicked(e -> {
uusiX = ympyra.getCenterX() + uusiX + 10;
ympyra.setTranslateX(uusiX);
ympyra.setTranslateY(uusiY);
});
btnVasen.setOnMouseClicked(e -> {
uusiX = ympyra.getCenterX() + uusiX - 10;
ympyra.setTranslateX(uusiX);
ympyra.setTranslateY(uusiY);
});
HBox napit = new HBox();
napit.setAlignment(Pos.CENTER);
napit.setSpacing(20);
napit.setMargin(btnYlos, new Insets(5, 5, 5, 5));
napit.setMargin(btnAlas, new Insets(5, 5, 5, 5));
napit.setMargin(btnOikea, new Insets(5, 5, 5, 5));
napit.setMargin(btnVasen, new Insets(5, 5, 5, 5));
ObservableList lista = napit.getChildren();
lista.addAll(btnYlos, btnAlas, btnOikea, btnVasen);
BorderPane paneeli = new BorderPane();
paneeli.setCenter(ympyra);
paneeli.setBottom(napit);
Scene kehys = new Scene(paneeli, 400, 400);
aloitus.setTitle("Ympyra");
aloitus.setScene(kehys);
aloitus.show();
}
public static void main(String[] args) {
launch(args);
}
}

Answer 1

Problem is ympyra.getCenterX() and ympyra.getCenterY() will always return 0 in this case. You have to check the bounds in parent to know if the circle is "out" of the window or not.
This should do the work
btnYlos.setOnMouseClicked(e -> {
uusiY -= ympyra.getBoundsInParent().getMinY() - 10 < 0 ? ympyra.getBoundsInParent().getMinY() : 10;
ympyra.setTranslateY(uusiY);
});
btnAlas.setOnMouseClicked(e -> {
uusiY += ympyra.getBoundsInParent().getMaxY() + 10 > ympyra.getParent().getLayoutBounds().getMaxY()
? ympyra.getParent().getLayoutBounds().getMaxY() - ympyra.getBoundsInParent().getMaxY() : 10;
ympyra.setTranslateY(uusiY);
});
btnOikea.setOnMouseClicked(e -> {
uusiX += ympyra.getBoundsInParent().getMaxX() + 10 > ympyra.getParent().getLayoutBounds().getMaxX()
? ympyra.getParent().getLayoutBounds().getMaxX() - ympyra.getBoundsInParent().getMaxX() : 10;
ympyra.setTranslateX(uusiX);
});
btnVasen.setOnMouseClicked(e -> {
uusiX -= ympyra.getBoundsInParent().getMinX() - 10 < 0 ? ympyra.getBoundsInParent().getMinX() : 10;
ympyra.setTranslateX(uusiX);
});
For each case, it will check if a translation of 10 is possible (less than 10px between the window and the circle), if not, translation is calculated based on the circle position and the parent's bounds