Javafx - Can Images in a StackPane be offset and if so what am I doing Wrong?

Question

I just have a very basic question, I am wondering what would be the best way to make a stack of cards where each are offset. In the code below I tried to use a StackPane, the problem is however that it doesn't seem to register the offset coordinates.

In the image below you will see that I tried to deal 2 cards to the dealer and to player1 and yes those are two different stacks (Note: I haven't taken the time to position them correctly yet, also the border around the table is temporary). I tried manually loading the cards and I get the same result, it doesn't offset the cards so it appears as though only one card is on the table:

public class PlayerTableCardPane extends Pane {
    // Data Fields
    ImageView[] cardBack;
    private int cardXOffset;
    private int cardHeight;
    private int cardCount;

    // StackPane for cards
    StackPane cardStack;

    /** Constructor */
    public PlayerTableCardPane() {
        this(50, 5);
    }

    /** Constructor for setting custom height */
    public PlayerTableCardPane(int cardHeight, int cardXOffset) {
        this.cardStack = new StackPane();
        this.cardBack = new ImageView[5];
        this.cardXOffset = cardXOffset;
        this.cardHeight = cardHeight;
        this.cardCount = 0;

        for (int index = 0; index < 5; index++) {
            Image newImage = new Image("image/cardDownSm.png");
            ImageView setCardBack = new ImageView();
            setCardBack.setImage(newImage);
            setCardBack.setVisible(false);
            setCardBack.setFitHeight(cardHeight);
            setCardBack.setPreserveRatio(true);
            setCardBack.setSmooth(true);
            // Offset each card
            setCardBack.setX(index * cardXOffset);
            this.cardBack[index] = setCardBack;
        }

        this.cardStack.getChildren().addAll(this.cardBack);
        getChildren().add(this.cardStack);
    }

    /** Get cardXOffset */
    public int getCardXOffset() {
        return this.cardXOffset;
    }

    /** Set cardXOffset */
    public void setCardXOffset(int cardXOffset) {
        this.cardXOffset = cardXOffset;
    }

    /** Get cardCount */
    public int getCardCount() {
        return this.cardCount;
    }

    /** Set cardCount */
    public void setCardCount(int cardCount) {
        this.cardCount = cardCount;
    }

    /** Load cards into StackPane */
    public void loadCard() {
        if (cardCount == 0) {
            cardBack[0].setVisible(true);
        } else if (cardCount == 1) {
            cardBack[1].setVisible(true);
        } else if (cardCount == 2) {
            cardBack[2].setVisible(true);
        } else if (cardCount == 3) {
            cardBack[3].setVisible(true);
        } else if (cardCount == 4) {
            cardBack[4].setVisible(true);
        }
        this.cardCount++;
    }

    /** Hide last card() */
    public void hideLastCard() {
        if (cardCount == 4) {
            cardBack[4].setVisible(false);
        } else if (cardCount == 3) {
            cardBack[3].setVisible(false);
        } else if (cardCount == 2) {
            cardBack[2].setVisible(false);
        } else if (cardCount == 1) {
            cardBack[1].setVisible(false);
        } else if (cardCount == 0) {
            cardBack[0].setVisible(false);
        }
        this.cardCount--;
    }

    /** Replace card with FaceUp Image */
    public void setCardImg(ImageView card, int cardPos) {
        cardBack[cardPos].setImage(card.getImage());
    }
}

Answer 1

StackPane lays out its child Nodes according just to the alignment property of the StackPane itself: the layoutX and layoutY of the Node are basically ignored. The default value of the alignment property is CENTER. Your best solution here is just to use a Pane instead of a StackPane.

You could also potentially solve this by setting the translateX property of the images to be placed in the StackPane. However, note that such transforms are not included in layout calculations, so you introduce the possibility of pushing the cards out of the visible bounds of the StackPane.