在 javaFX 中移动叠加元素

Question

我正在努力使我的 javaFX 程序正常运行。我想要一些建议。

有一张我所做的图：

屏幕是一组图像（小矩形）。

我的目标是在单击时将卡片放在顶部。

为此，我将主要竞争者设置为 StackPane。 我考虑过将卡片直接放入 StackPane，但 setLayoutX 和 setLayoutY 方法似乎并没有移动我的图像。

我提出的解决方案是放入我的 StackPane 倍数 AnchorPane（每张卡一个）。每个 AnchorPane 都有 StackPane contener 的大小， 并包含一张单卡。这样，我可以设置每张卡片的位置。

我使用此方法的问题如下：因为每个 AnchorPane 都有主要竞争者的大小，即包含最后一张卡片的 AnchorPane 放在 pther AnchorPanes 的前面。

因此，当我点击我的最后一张卡片时，我工作得很好，但我不能点击其他卡片，因为它们前面有一个不可见的节点。

如果有人能给我一些建议，那就太好了。

Answer 1

这是一个例子。

单击每张卡片以播放它们。所有牌都打完后，在牌桌上的任何地方点击一下，游戏就会重置。然后新手牌将发给玩家。

它使用占位符来表示牌桌上的空牌位置。

对于布局，它使用 VBox 作为游戏桌，使用 HBox 作为手牌。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

import java.util.*;
import java.util.stream.*;

public class CardApp extends Application {
    private static final int NUM_CARDS = 5;

    private HBox hand;
    private VBox table;
    private Scene scene;

    @Override
    public void start(Stage stage) {
        scene = new Scene(deal());

        stage.setScene(scene);
        stage.show();
    }

    private Parent deal() {
        List<Card> cards =
                IntStream.rangeClosed(1, NUM_CARDS)
                        .mapToObj(Card::new)
                        .collect(Collectors.toCollection(ArrayList::new));
        Collections.shuffle(cards);

        hand = new HBox(20,
                cards.toArray(new Card[0])
        );

        table = new VBox(30,
                new CardPlaceholder(),
                hand
        );
        table.setStyle("-fx-background-color: mintcream;");
        table.setPadding(new Insets(30));

        // click on cards to play them.
        for (Card card: cards) {
            card.setOnMouseClicked(e -> {
                playCard(card, hand, table);

                // when all cards are played, click anywhere to re-deal on a new table.
                if (hand.getChildren().stream().noneMatch(c -> c instanceof Card)) {
                    table.setOnMouseClicked(me -> scene.setRoot(deal()));
                }
            });
        }

        return table;
    }

    private void playCard(Card card, HBox hand, VBox table) {
        int index = hand.getChildren().indexOf(card);
        hand.getChildren().set(index, new CardPlaceholder());
        table.getChildren().set(0, card);
        card.setOnMouseClicked(null);
    }

    static class Card extends StackPane {
        public Card(int value) {
            Rectangle background = new Rectangle(55, 80, Color.LIGHTSTEELBLUE);
            background.setStroke(Color.LIGHTSTEELBLUE.darker());
            background.setStrokeWidth(3);
            background.setArcWidth(15);
            background.setArcHeight(15);

            Label foreground = new Label("" + value);
            foreground.setStyle("-fx-font-size: 30; -fx-text-fill: rgb(60,63,74);");

            getChildren().setAll(background, foreground);
        }
    }

    static class CardPlaceholder extends StackPane {
        public CardPlaceholder() {
            Rectangle background = new Rectangle(
                    55, 80,
                    Color.SILVER.deriveColor(
                            0,1,1, .4
                    )
            );

            background.setStroke(
                    Color.SILVER.deriveColor(
                            0,1,1, .6
                    )
            );
            background.setStrokeWidth(3);
            background.setArcWidth(15);
            background.setArcHeight(15);
            background.getStrokeDashArray().addAll(10d, 5d);

            getChildren().setAll(background);
        }
    }
}

为了简单回答这个有限的问题，一切都在一个文件中。对于更实质性的应用程序，游戏逻辑和游戏模型将与 UI 分离（使用 MVC），布局可能使用 FXML 完成，样式将通过 CSS 完成。