JavaFX图像与CSS的矩形。

时间：2023-01-19 17:04:50

I spent who knows how long trying to research this beforehand, yet I have found no answer suited towards my problem.

我花了很长时间来研究这个问题，但我没有找到适合我的答案。

Currently, I am creating 22 Rectangle Objects, in which I want to assign an image to each of them, which is the back of a playing card. However, when I try to, the image of a playing card appears for a split second, before the image reverts to a black rectangle.

目前，我正在创建22个矩形对象，在其中我要为每个对象分配一个图像，这是playingcard的后面。然而，当我尝试的时候，一张扑克牌的图像出现在一瞬间，在图像恢复到黑色矩形之前。

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import me.potato.applications.enums.Card;

import java.awt.*;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Random;

public class Main extends Application {

    private static int width;
    private static int height;

    private static Button hitButton;
    private static Button revealCardsButton;

    private static Random r;

    private static ArrayList<Card> user;
    private static ArrayList<Card> dealer;
    private static ArrayList<Card> cards;

    private static Rectangle U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10,D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10;

    public static void main(String[] args) {

        width = ((int) Toolkit.getDefaultToolkit().getScreenSize().getWidth());
        height = ((int) Toolkit.getDefaultToolkit().getScreenSize().getHeight());

        user = new ArrayList<>();
        dealer = new ArrayList<>();

        cards = new ArrayList<>();
        cards.addAll(Arrays.asList(Card.values()));

        r = new Random();

        U0  = new Rectangle(width / 12, height / 4.5);
        U1  = new Rectangle(width / 12, height / 4.5);
        U2  = new Rectangle(width / 12, height / 4.5);
        U3  = new Rectangle(width / 12, height / 4.5);
        U4  = new Rectangle(width / 12, height / 4.5);
        U5  = new Rectangle(width / 12, height / 4.5);
        U6  = new Rectangle(width / 12, height / 4.5);
        U7  = new Rectangle(width / 12, height / 4.5);
        U8  = new Rectangle(width / 12, height / 4.5);
        U9  = new Rectangle(width / 12, height / 4.5);
        U10 = new Rectangle(width / 12, height / 4.5);

        D0  = new Rectangle(width / 12, height / 4.5);
        D1  = new Rectangle(width / 12, height / 4.5);
        D2  = new Rectangle(width / 12, height / 4.5);
        D3  = new Rectangle(width / 12, height / 4.5);
        D4  = new Rectangle(width / 12, height / 4.5);
        D5  = new Rectangle(width / 12, height / 4.5);
        D6  = new Rectangle(width / 12, height / 4.5);
        D7  = new Rectangle(width / 12, height / 4.5);
        D8  = new Rectangle(width / 12, height / 4.5);
        D9  = new Rectangle(width / 12, height / 4.5);
        D10 = new Rectangle(width / 12, height / 4.5);

        U0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        D0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {

        hitButton = new Button("HIT");
        hitButton.alignmentProperty().setValue(Pos.CENTER);

        revealCardsButton = new Button("REVEAL CARDS");
        revealCardsButton.alignmentProperty().setValue(Pos.CENTER);

        VBox root = new VBox(5);
        root.setAlignment(Pos.CENTER);
        root.setPrefSize(width, height);

        HBox cardSetDealer = new HBox(5);
        HBox hitButtonContainer = new HBox(5);
        HBox cardSetUser = new HBox(5);
        HBox revealCardsButtonContainer = new HBox(5);

        cardSetDealer.setAlignment(Pos.CENTER);
        cardSetUser.setAlignment(Pos.CENTER);
        cardSetDealer.getChildren().addAll(D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10);
        cardSetUser.getChildren().addAll(U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10);

        hitButtonContainer.getChildren().add(hitButton);
        revealCardsButtonContainer.getChildren().add(revealCardsButton);

        root.getChildren().add(cardSetDealer);
        root.getChildren().add(hitButtonContainer);
        root.getChildren().add(cardSetUser);
        root.getChildren().add(revealCardsButtonContainer);

        Scene scene = new Scene(root);

        stage = new Stage();
        stage.setScene(scene);
        stage.show();

    }
}

I am unsure what I am doing wrong, or if I am misusing the .css segment, if my code itself is faulty, if I'm just stupid, etc.

我不确定我做错了什么，或者如果我错误地使用了.css代码段，如果我的代码本身是错误的，如果我只是愚蠢的，等等。

--EDIT--------

- - -编辑- - - - - - - - -

Changed code due to @James_D 's suggestion to use Region over Rectangle.

更改代码，因为@James_D建议使用矩形区域。

import javafx.application.Application;
import javafx.css.Style;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import me.potato.applications.enums.Card;

import java.awt.*;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Random;

public class Main extends Application {

    private static int width;
    private static int height;

    private static Button hitButton;
    private static Button revealCardsButton;

    private static Random r;

    private static ArrayList<Card> user;
    private static ArrayList<Card> dealer;
    private static ArrayList<Card> cards;

    private static Region U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10,D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {

        width = ((int) Toolkit.getDefaultToolkit().getScreenSize().getWidth());
        height = ((int) Toolkit.getDefaultToolkit().getScreenSize().getHeight());

        user = new ArrayList<>();
        dealer = new ArrayList<>();

        cards = new ArrayList<>();
        cards.addAll(Arrays.asList(Card.values()));

        r = new Random();

        U0  = new Region(); U0.setPrefSize(width / 12, height / 4.5);
        U1  = new Region(); U1.setPrefSize(width / 12, height / 4.5);
        U2  = new Region(); U2.setPrefSize(width / 12, height / 4.5);
        U3  = new Region(); U3.setPrefSize(width / 12, height / 4.5);
        U4  = new Region(); U4.setPrefSize(width / 12, height / 4.5);
        U5  = new Region(); U5.setPrefSize(width / 12, height / 4.5);
        U6  = new Region(); U6.setPrefSize(width / 12, height / 4.5);
        U7  = new Region(); U7.setPrefSize(width / 12, height / 4.5);
        U8  = new Region(); U8.setPrefSize(width / 12, height / 4.5);
        U9  = new Region(); U9.setPrefSize(width / 12, height / 4.5);
        U10 = new Region(); U10.setPrefSize(width / 12, height / 4.5);

        D0  = new Region(); D0.setPrefSize(width / 12, height / 4.5);
        D1  = new Region(); D1.setPrefSize(width / 12, height / 4.5);
        D2  = new Region(); D2.setPrefSize(width / 12, height / 4.5);
        D3  = new Region(); D3.setPrefSize(width / 12, height / 4.5);
        D4  = new Region(); D4.setPrefSize(width / 12, height / 4.5);
        D5  = new Region(); D5.setPrefSize(width / 12, height / 4.5);
        D6  = new Region(); D6.setPrefSize(width / 12, height / 4.5);
        D7  = new Region(); D7.setPrefSize(width / 12, height / 4.5);
        D8  = new Region(); D8.setPrefSize(width / 12, height / 4.5);
        D9  = new Region(); D9.setPrefSize(width / 12, height / 4.5);
        D10 = new Region(); D10.setPrefSize(width / 12, height / 4.5);

        U0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        U10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        D0.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D1.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D2.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D3.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D4.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D5.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D6.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D7.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D8.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D9.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");
        D10.setStyle(" -fx-background-image: url(\"..\\..\\..\\resources\\images\\cards\\BACK.png\");");

        hitButton = new Button("HIT");
        hitButton.alignmentProperty().setValue(Pos.CENTER);

        revealCardsButton = new Button("REVEAL CARDS");
        revealCardsButton.alignmentProperty().setValue(Pos.CENTER);

        VBox root = new VBox(5);
        root.setAlignment(Pos.CENTER);
        root.setPrefSize(width, height);

        HBox cardSetDealer = new HBox(5);
        HBox hitButtonContainer = new HBox(5);
        HBox cardSetUser = new HBox(5);
        HBox revealCardsButtonContainer = new HBox(5);

        cardSetDealer.setAlignment(Pos.CENTER);
        cardSetUser.setAlignment(Pos.CENTER);
        cardSetDealer.getChildren().addAll(D0,D1,D2,D3,D4,D5,D6,D7,D8,D9,D10);
        cardSetUser.getChildren().addAll(U0,U1,U2,U3,U4,U5,U6,U7,U8,U9,U10);

        hitButtonContainer.getChildren().add(hitButton);
        revealCardsButtonContainer.getChildren().add(revealCardsButton);

        root.getChildren().add(cardSetDealer);
        root.getChildren().add(hitButtonContainer);
        root.getChildren().add(cardSetUser);
        root.getChildren().add(revealCardsButtonContainer);

        Scene scene = new Scene(root);

        stage = new Stage();
        stage.setScene(scene);
        stage.show();

    }
}

1 个解决方案

#1

2  

  1. Using a Region instead of a Rectangle is the correct approach. According to the documentation, Rectangle does not have a -fx-background-image CSS property.
  2. 使用区域而不是矩形是正确的方法。根据文档，矩形没有-fx背景图像的CSS属性。
  3. The path to your image is wrong. The resources folder is part of the organization of the source code, and is typically configured as a source folder (i.e. its contents are deployed to the root of the classpath). It is also generally a bad idea to use relative paths such as .. and . in URL paths (for example, the filesystem associated with a jar class loader will not understand it). See JAVAFX: Location is not set error. Assuming that resources is configured in the usual way, you should just need url("/images/BACK.png").
  4. 通往你形象的道路是错误的。资源文件夹是源代码组织的一部分，通常被配置为源文件夹(即它的内容被部署到类路径的根目录)。使用相对路径也通常是一个坏主意。和。在URL路径中(例如，与jar类装入器关联的文件系统将不理解它)。请参见JAVAFX:位置不是设置错误。假设资源按照通常的方式配置，您应该只需要url(“/images/BACK.png”)。

#1

2  

  1. Using a Region instead of a Rectangle is the correct approach. According to the documentation, Rectangle does not have a -fx-background-image CSS property.
  2. 使用区域而不是矩形是正确的方法。根据文档，矩形没有-fx背景图像的CSS属性。
  3. The path to your image is wrong. The resources folder is part of the organization of the source code, and is typically configured as a source folder (i.e. its contents are deployed to the root of the classpath). It is also generally a bad idea to use relative paths such as .. and . in URL paths (for example, the filesystem associated with a jar class loader will not understand it). See JAVAFX: Location is not set error. Assuming that resources is configured in the usual way, you should just need url("/images/BACK.png").
  4. 通往你形象的道路是错误的。资源文件夹是源代码组织的一部分，通常被配置为源文件夹(即它的内容被部署到类路径的根目录)。使用相对路径也通常是一个坏主意。和。在URL路径中(例如，与jar类装入器关联的文件系统将不理解它)。请参见JAVAFX:位置不是设置错误。假设资源按照通常的方式配置，您应该只需要url(“/images/BACK.png”)。
标签：

相关文章