JavaFX国际象棋开发：实现棋子悬停显示边框图片效果

嘿，我看了你这个JavaFX象棋游戏的悬停问题，折腾好几天确实闹心，我帮你梳理下问题和解决方案哈！

首先看了你当前的代码，发现几个关键问题导致功能不正常：

• 你在鼠标进入事件里调用group.getChildren().remove(64,65);完全是错误用法——GridPane的remove(int columnIndex, int rowIndex)是移除指定行列的节点，但64、65明显超出了8x8棋盘的范围，应该用棋子实际所在的坐标（比如BlackP_1的x=0、y=1）。
• 你只给第一个黑兵加了鼠标事件，其他棋子都没处理，重复写代码不仅冗余还容易出错。
• 直接替换ImageView节点不是最优方案，更好的方式是切换同一个ImageView的Image属性，不用频繁添加/移除节点，性能更好也更简洁。

下面是修正后的完整实现方案：

第一步：重构棋子类（以blackPawn为例） #

先简化棋子类，不用维护两个ImageView，只需要维护两张图片资源，用一个ImageView来切换显示：

package sample.Figures;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

public class blackPawn {
    public int x;
    public int y;
    public int start;
    public int end;
    // 维护两张图片资源，而非两个ImageView
    private Image normalImage = new Image(getClass().getResourceAsStream("/sample/Sprites/blackPawn.png"));
    private Image glowImage = new Image(getClass().getResourceAsStream("/sample/Sprites/blackPawnStroke.png"));
    public ImageView imageView = new ImageView(normalImage);

    // 补全你没写完的构造方法
    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;
    }

    // 封装图片切换方法，逻辑更清晰
    public void switchToGlow() {
        imageView.setImage(glowImage);
    }

    public void switchToNormal() {
        imageView.setImage(normalImage);
    }
}

其他棋子类（比如blackRook、whitePawn等）都按照这个结构重构，替换对应的图片路径即可。

第二步：统一处理鼠标事件（避免重复代码） #

在Main类里写一个通用的事件绑定方法，给所有棋子批量绑定悬停逻辑：

// 通用鼠标悬停事件绑定方法，复用性拉满
private void setupHoverEffect(ImageView imageView, Runnable onEnter, Runnable onExit) {
    imageView.setOnMouseEntered(event -> onEnter.run());
    imageView.setOnMouseExited(event -> onExit.run());
}

然后在添加棋子的时候，调用这个方法就行：

// 以第一个黑兵为例
final blackPawn BlackP_1 = new blackPawn(0,1,64,65);
group.add(BlackP_1.imageView, BlackP_1.x, BlackP_1.y);
setupHoverEffect(BlackP_1.imageView, BlackP_1::switchToGlow, BlackP_1::switchToNormal);

// 第二个黑兵同理
blackPawn BlackP_2 = new blackPawn(1,1);
group.add(BlackP_2.imageView, BlackP_2.x, BlackP_2.y);
setupHoverEffect(BlackP_2.imageView, BlackP_2::switchToGlow, BlackP_2::switchToNormal);

第三步：修复代码里的笔误 #

你原来的代码里黑象的变量名写错了，要修正：

// 原来的错误代码
blackBishop BlackB_1 = new blackBishop();
group.add(BlackE_1.IMG,2,0); // BlackE_1应该是BlackB_1
blackBishop BlackB_2 = new blackBishop();
group.add(BlackE_2.IMG,5,0); // BlackE_2应该是BlackB_2

// 修正后
blackBishop BlackB_1 = new blackBishop();
group.add(BlackB_1.imageView,2,0);
blackBishop BlackB_2 = new blackBishop();
group.add(BlackB_2.imageView,5,0);

为什么这个方案更好？ #

• 性能更优：只是切换ImageView的图片属性，不用频繁操作GridPane的节点列表，开销更小。
• 代码更简洁：通用方法避免了大量重复代码，后续加棋子只需要一行绑定代码。
• 逻辑更清晰：图片切换逻辑封装在棋子类内部，符合面向对象的设计思路。
• 路径更可靠：用getClass().getResourceAsStream()加载图片，打包成jar包后也不会出现路径找不到的问题。

内容的提问来源于stack exchange，提问作者xCrazy