JAVAFX在矩形顶部显示图像

Question

我正在用Java和JAVAFX开发一个国际象棋游戏。我的棋盘是一个JAVAFX组，包含一个正方形数组。我的正方形继承自JAVAFX rectangle类。我想在这些方块里面画一个图像(棋子的图像)，但是我似乎找不到方法。当我使用setfill来绘制图案时，正方形的颜色消失了，这不是我想要的，我希望图像是透明的，并绘制在每个正方形的顶部。有什么想法吗？

Answer 1

要将图像放置在形状的顶部，可以将它们封装在＜code＞堆栈窗格中：

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

public class Chess extends Application {

    private final String[] COLORS = {"black","white"};
    private static int ROWS = 4, COLS = 4;

    @Override
    public void start(Stage stage) {

        Board board = new Board(COLS);

        int tileNum = 0;

        for(int row = 0; row < ROWS ; row++){
            tileNum = tileNum == 0 ? 1:0;
            for(int col = 0; col < COLS; col++){
                Tile tile = new Tile(COLORS[tileNum]);
                if(row==ROWS/2 && col == COLS/2) {//place an arbitrary piece
                    tile.setPiece(Pieces.KING.getImage());
                }
                board.addTile(tile.getTile());
                tileNum = tileNum == 0 ? 1:0;
            }
        }

        Parent root = new Group(board.getBoard());
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

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

class Board {

    private final TilePane board;

    public Board(int columns) {
        board = new TilePane(Orientation.HORIZONTAL);
        board.setPrefColumns(columns);
        board.setTileAlignment(Pos.CENTER);
        board.setStyle("-fx-border-color:red;");
    }

    Pane getBoard(){
        return board;
    }

    void addTile(Node node){
        board.getChildren().add(node);
    }
}

class Tile {

    public static final int SIZE = 100;
    private final StackPane tile;

    Tile(String colorName) {
        this(colorName, null);
    }

    Tile(String colorName, Image piece) {
        Rectangle rect = new Rectangle(SIZE, SIZE, Color.valueOf(colorName));
        tile = new StackPane(rect);
        tile.setStyle("-fx-border-color:red;");
        if(piece != null) {
            setPiece(piece);
        }
    }

    void setPiece(Image piece){
        tile.getChildren().add(new ImageView(piece));
    }

    public Node getTile() {
        return tile;
    }
}

enum Pieces {

    KING ("https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Blue.png"),
    QUEEN ("https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/64x64/Circle_Orange.png");

    private String image;
    private Pieces(String image) {
        this.image = image;
    }

    public Image getImage(){
        return new Image(image);
    }
}

将磁贴的表示更改为JavaFx控件（例如Label或Button）非常简单。您需要做的就是对Tile进行一些小更改：

class Tile {

    public static final int SIZE = 100;
    private final Label tile;//a Button if you need it clickable

    Tile(String colorName) {
        this(colorName, null);
    }

    Tile(String colorName, Image piece) {
        tile = new Label();
        tile.setPrefSize(SIZE, SIZE);
        tile.setStyle("-fx-border-color:red; -fx-background-color:"+colorName);
        tile.setAlignment(Pos.CENTER);
        if(piece != null) {
            setPiece(piece);
        }
    }

    void setPiece(Image piece){
        tile.setGraphic(new ImageView(piece));
    }

    public Node getTile() {
        return tile;
    }
}