Javafx - StackPane 中的图像可以偏移吗？如果可以，我在做什么错？答案

【问题标题】：Javafx - Can Images in a StackPane be offset and if so what am I doing Wrong?Javafx - StackPane 中的图像可以偏移吗？如果可以，我在做什么错？
【发布时间】：2014-10-05 19:32:48
【问题描述】：

我只有一个非常基本的问题，我想知道制作一叠卡片的最佳方法是什么，每个卡片都是偏移的。在下面的代码中，我尝试使用 StackPane，但问题是它似乎没有注册偏移坐标。

在下图中，您会看到我尝试向庄家和玩家 1 发 2 张牌，是的，它们是两个不同的牌堆（注意：我还没有花时间正确定位它们，还有周围的边界该表是临时的）。我尝试手动加载卡片，我得到了相同的结果，它不会偏移卡片，所以看起来好像只有一张卡片在桌子上：

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());
    }
}

【问题讨论】：

StackPanes 将其内容居中。尝试改用Pane。
好的，谢谢@James_D ...我是这么认为的，但出于某种原因，我认为您仍然可以抵消它们，我很傻。 XD
AIUI 它只是忽略 layoutX 和 layoutY 并根据StackPane 的对齐属性定位它们
啊，我明白了...我知道这是一个愚蠢的问题，我可能应该翻阅一本书...抱歉打扰你们了。
实际上，我认为这根本不是一个愚蠢的问题……这是相当违反直觉的。您实际上可以使用setTranslateX(...) 在StackPane 中抵消它们，没有时间测试它。

标签： java image javafx

【解决方案1】：

StackPane 仅根据StackPane 本身的alignment 属性布置其子Nodes：Node 的layoutX 和layoutY 基本上被忽略。 alignment 属性的默认值为CENTER。您最好的解决方案是使用Pane 而不是StackPane。

您也可以通过将图像的translateX 属性设置为放置在StackPane 中来解决此问题。但是请注意，布局计算中不包含此类转换，因此您引入了将卡片推出StackPane 的可见边界的可能性。

【讨论】：