0

I've tried to modelise a simple card in javafx with two faces. My goal is that, when clicked, the card does a little animation where it turns on itself. To do so, I've tried two unsuccessfull methods. I'll first explain the methods then i'll show my code.

  • The first one consists in a Group containing two ImageView (respectivelly the front and the back of the card).
    front image
    back image
    When the Group is clicked, there is an animation asking the Group to turn around. But when the animation begins and the Group starts to turn, only the card on the top layer of the group is showing.
    preview

  • The second one consists in using the Box class. with this code, I can definitly see the box turning around itself when I click it, the problem is that it seems that there is no way to put an Imageview or any Node in a specific face of the box, so I can't put the images on the box like I'd like to ...

Here is the code for both methods

  • method 1 :
public void start(Stage stage) throws Exception {
        ImageView front = new ImageView(new Image("cardImages/front.png"));
        ImageView back = new ImageView(new Image("cardImages/back.png"));

        Group images = new Group(back, front);
        for (ImageView i : new ImageView[]{front, back}){
            i.setFitWidth(400);
            i.setPreserveRatio(true);
        }


        // Animation
        RotateTransition flip = new RotateTransition(Duration.seconds(1), images);
        flip.setFromAngle(0);
        flip.setToAngle(360);
        flip.setCycleCount(1);
        flip.setAutoReverse(true);

        // axis
        flip.setAxis(Rotate.Y_AXIS);


        images.setOnMouseClicked(event -> {
            // turn the card
            flip.play();
        });


        BorderPane root = new BorderPane();
        root.setPrefSize(800, 700);
        root.setCenter(images);
        stage.setScene(new Scene(root));
        stage.show();
}
  • method 2 :
public void start(Stage stage) throws Exception {

        //Drawing a Box
        Box box = new Box();

        //Setting the properties of the Box
        box.setWidth(1080.0);
        box.setHeight(1920.0);
        box.setDepth(20.0);

        // reducing box size
        box.setScaleX(0.2);
        box.setScaleY(0.2);

        //Setting the material of the box
        PhongMaterial material = new PhongMaterial();
        material.setDiffuseColor(Color.BURLYWOOD);

        //Setting the diffuse color material to box
        box.setMaterial(material);

        //Setting the rotation animation to the box
        RotateTransition rotateTransition = new RotateTransition();

        //Setting the duration for the transition
        rotateTransition.setDuration(Duration.seconds(1));

        //Setting the node for the transition
        rotateTransition.setNode(box);

        //Setting the axis of the rotation
        rotateTransition.setAxis(Rotate.Y_AXIS);

        //Setting the angle of the rotation
        rotateTransition.setByAngle(180);

        //Setting the cycle count for the transition
        rotateTransition.setCycleCount(0);

        //Setting auto reverse value to false
        rotateTransition.setAutoReverse(false);


        // play transion
        box.setOnMouseClicked(e->{
            rotateTransition.play();
        });

        //Creating a Group object
        Group group = new Group(box);
        BorderPane root = new BorderPane();
        root.setCenter(group);

        //Creating a scene object
        Scene scene = new Scene(root, 800, 500);

        //Setting title to the Stage
        stage.setTitle("javafx box exemple");

        //Adding scene to the stage
        stage.setScene(scene);

        //Displaying the contents of the stage
        stage.show();
}

il_tonino
  • 5
  • 1
  • Related, for [coloring 3D faces](https://stackoverflow.com/questions/69305387/how-to-color-some-triangles-in-a-trianglemesh). Theory on [UV mapping images to faces](http://www.lagers.org.uk/javafx/usemeshview.html). – jewelsea Dec 13 '22 at 08:27

0 Answers0