带有 CSS 的矩形上的 JavaFX 图像

【问题标题】：JavaFX Images on Rectangles with CSS带有 CSS 的矩形上的 JavaFX 图像
【发布时间】：2018-03-29 23:05:21
【问题描述】：

我花了不知道多长时间尝试事先研究这个问题，但我没有找到适合我的问题的答案。

目前，我正在创建 22 个矩形对象，我想在其中为每个对象分配一个图像，即扑克牌的背面。但是，当我尝试这样做时，扑克牌的图像会出现一瞬间，然后图像会恢复为黑色矩形。

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

    }
}

我不确定我做错了什么，或者我是否滥用了.css 段，我的代码本身是否有问题，我是否只是愚蠢等等。

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

由于@James_D 建议使用Region 而不是Rectangle，因此更改了代码。

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

    }
}

【问题讨论】：

  • 奇怪的是你曾经看到过这张图片； Rectangle 没有 -fx-background-image 属性。请改用Region（设置其最小和最大宽度和高度以强制其具有固定大小）。
  • 我刚刚修改了代码，但是，它只是在那里留下了空白段而不是图像，屏幕上没有任何物体的迹象。另外，我确实定义了大小。
  • 可以贴出修改后的代码吗？此外，您不应该在 main() 方法中创建任何这些（当然也不要设置样式）； JavaFX 工具包甚至不会在那时启动。将所有代码移至 start() 方法。
  • 对，就像我之前说的，类路径中没有resources文件夹。当然你只需要url("/images/BACK.png")??
  • 离题：1. 阅读en.wikipedia.org/wiki/Don't_repeat_yourself 2. 不要让所有东西（或者，除了常量，任何东西）都是静态的。 3. 不要混用 AWT 和 JavaFX。

标签： java css image javafx


【解决方案1】：
  1. 使用Region 而不是Rectangle 是正确的方法。根据documentation，Rectangle 没有-fx-background-image CSS 属性。
  2. 图像的路径错误。 resources 文件夹是源代码组织的一部分，通常配置为源文件夹（即其内容部署到类路径的根目录）。在 URL 路径中使用诸如 .. 和 . 之类的相对路径通常也是一个坏主意（例如，与 jar 类加载器关联的文件系统将无法理解它）。见JAVAFX: Location is not set error。假设 resources 以通常的方式配置，您应该只需要 url("/images/BACK.png")。

【讨论】：

    猜你喜欢
    • 2014-12-12
    • 2014-10-05
    • 1970-01-01
    • 2013-07-05
    • 2020-04-10
    • 1970-01-01
    • 2014-05-09
    • 2021-08-27
    • 2017-03-20
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode