棋子 JavaFX 周围的国际象棋边框

Question

我正在创建一个国际象棋游戏，几天来我一直在做一件事情。所以我想在用户移过一个图形时创建事件，图形图像替换为另一个带边框的图像，当用户移开时，图像必须 return 正常。这是完整的代码。

Project的文件夹叫sample，images的文件夹叫Sprites。类的文件夹名为 Figures.I 将 link 黑兵的图像。

package sample;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

import sample.Figures.*;

public class Main extends Application {

@Override
public void start(Stage primaryStage){
    primaryStage.setTitle("ChessGame");
    primaryStage.getIcons().add(new Image("/sample/Chess-icon.png"));
    GridPane root = new GridPane();

    final GridPane group = new GridPane();
    group.setPadding(new Insets(15, 25, 25, 25));

    for (int i = 0 ; i < 8 ; i++) {
        for (int j = 0 ; j < 8 ; j++) {
            Rectangle rectangle = new Rectangle( 50, 50);
            if(j % 2 == 0 && (i % 2 == 0)) {
                rectangle.setFill(Color.BEIGE);
            }
            else if(!((j + 2) % 2 == 0) && !((i + 2) % 2 == 0)) {
                rectangle.setFill(Color.BEIGE);
            }
            else {
                rectangle.setFill(Color.GRAY);
            }
            group.add(rectangle,i,j);
        }
    }

    //FIGURES
    //Black
    //Pawns
    final blackPawn BlackP_1 = new blackPawn(0,1,64,65);
    group.add(BlackP_1.IMG,BlackP_1.x,BlackP_1.y);

    BlackP_1.IMG.setOnMouseEntered(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            group.getChildren().remove(64,65);
            group.add(BlackP_1.IMGglow,0,1);
        }
    });



    BlackP_1.IMGglow.setOnMouseExited(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            group.getChildren().remove(64,65);
            group.add(BlackP_1.IMG,BlackP_1.x,BlackP_1.y);
        }
    });

    blackPawn BlackP_2 = new blackPawn(1,1);
    group.add(BlackP_2.IMG,BlackP_2.x,BlackP_2.y);
    blackPawn BlackP_3 = new blackPawn(2,1);
    group.add(BlackP_3.IMG,BlackP_3.x,BlackP_3.y);
    blackPawn BlackP_4 = new blackPawn(3,1);
    group.add(BlackP_4.IMG,BlackP_4.x,BlackP_4.y);
    blackPawn BlackP_5 = new blackPawn(4,1);
    group.add(BlackP_5.IMG,BlackP_5.x,BlackP_5.y);
    blackPawn BlackP_6 = new blackPawn(5,1);
    group.add(BlackP_6.IMG,BlackP_6.x,BlackP_6.y);
    blackPawn BlackP_7 = new blackPawn(6,1);
    group.add(BlackP_7.IMG,BlackP_7.x,BlackP_7.y);
    blackPawn BlackP_8 = new blackPawn(7,1);
    group.add(BlackP_8.IMG,BlackP_8.x,BlackP_8.y);

    //Rooks
    blackRook BlackR_1 = new blackRook();
    group.add(BlackR_1.IMG,7,0);
    blackRook BlackR_2 = new blackRook();
    group.add(BlackR_2.IMG,0,0);
    //Knights
    blackKnight BlackK_1 = new blackKnight();
    group.add(BlackK_1.IMG,1,0);
    blackKnight BlackK_2 = new blackKnight();
    group.add(BlackK_2.IMG,6,0);
    //Bishop
    blackBishop BlackB_1 = new blackBishop();
    group.add(BlackE_1.IMG,2,0);
    blackBishop BlackB_2 = new blackBishop();
    group.add(BlackE_2.IMG,5,0);
    //Queen
    blackQueen blackQueen= new blackQueen();
    group.add(blackQueen.IMG,3,0);
    //King
    blackKing blackking = new blackKing();
    group.add(blackking.IMG,4,0);

    //WHITE
    //Pawns
    final whitePawn WhiteP_1 = new whitePawn();
    group.add(WhiteP_1.IMG,0,6);
    whitePawn WhiteP_2 = new whitePawn();
    group.add(WhiteP_2.IMG,1,6);
    whitePawn WhiteP_3 = new whitePawn();
    group.add(WhiteP_3.IMG,2,6);
    whitePawn WhiteP_4 = new whitePawn();
    group.add(WhiteP_4.IMG,3,6);
    whitePawn WhiteP_5 = new whitePawn();
    group.add(WhiteP_5.IMG,4,6);
    whitePawn WhiteP_6 = new whitePawn();
    group.add(WhiteP_6.IMG,5,6);
    whitePawn WhiteP_7 = new whitePawn();
    group.add(WhiteP_7.IMG,6,6);
    whitePawn WhiteP_8 = new whitePawn();
    group.add(WhiteP_8.IMG,7,6);
    //Rooks
    whiteRook WhiteR_1 = new whiteRook();
    group.add(WhiteR_1.IMG,0,7);
    whiteRook WhiteR_2 = new whiteRook();
    group.add(WhiteR_2.IMG,7,7);
    //Knights
    whiteKnight WhiteK_1 = new whiteKnight();
    group.add(WhiteK_1.IMG,1,7);
    whiteKnight WhiteK_2 = new whiteKnight();
    group.add(WhiteK_2.IMG,6,7);
    //Bishop
    whiteBishop WhiteB_1 = new whiteBishop();
    group.add(WhiteB_1.IMG,2,7);
    whiteBishop WhiteB_2 = new whiteBishop();
    group.add(WhiteB_2.IMG,5,7);
    //Queen
    whiteQueen whitequeen = new whiteQueen();
    group.add(whitequeen.IMG,3,7);
    //King
    whiteKing whiteking = new whiteKing();
    group.add(whiteking.IMG,4,7);

    root.getChildren().add(group);
    root.setStyle("-fx-background-color: #C1D1E8;");

    Scene scene = new Scene(root, 450, 440);

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


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

黑兵Class

package sample.Figures;

import javafx.scene.image.ImageView;

public class blackPawn {

    public int x;
    public int y;
    public int start;
    public int end;
    public ImageView IMG = new ImageView("sample/Sprites/blackPawn.png");
    public ImageView IMGglow = new ImageView("sample/Sprites/blackPawnStroke.png");

    public blackPawn(int x,int y)
    {
        this.x = x;
        this.y = y;
    }

    public blackPawn(int x,int y,int start,int end)
    {
        this.x = x;
        this.y = y;
        this.start = start;
        this.end = end;
    }
}

Answer 1

只需调用 setImage() 即可轻松更改 ImageView 的图像。有两种方法可以从一种状态转换到另一种状态。第一种方法是以编程方式通过 setOnMouseEntered() 和 setOnMouseExited() 这里是一个例子：

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class HoverableImage extends Application {

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

        ImageView imageView = createChestImage();

        FlowPane pane = new FlowPane();
        pane.setAlignment(Pos.CENTER);
        pane.getChildren().add(imageView);

        stage.setScene(new Scene(pane, 100, 100));
        stage.show();
    }

    private ImageView createChestImage() {
        ImageView iv = new ImageView(new Image("https://i.stack.imgur.com/rd71Q.png"));

        iv.setOnMouseEntered(e->{
            iv.setImage(new Image("https://i.stack.imgur.com/7JU7r.png"));
        });

        iv.setOnMouseExited(e->{
            iv.setImage(new Image("https://i.stack.imgur.com/rd71Q.png"));
        });

        return iv;
    }

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

}

第二种方法是使用 CSS，您可以为每个胸甲设置一个 ID（例如：iv.setID("SoldierPiece");），然后在其上应用那些 CSS 规则:

#SoldierPiece{
    -fx-image: url("https://i.stack.imgur.com/rd71Q.png");
}

#SoldierPiece:hover{
    -fx-image: url("https://i.stack.imgur.com/7JU7r.png");
}

棋子 JavaFX 周围的国际象棋边框

Chess Border around Pawns JavaFX

java

javafx

gridpane