JavaFX中如何通过鼠标滚动切换点击Pane时插入的图片？

Got it, let's get this working exactly how you want it—no clunky dropdown menus, just smooth scroll-to-switch and click-to-place. Here's how to adjust your code step by step:

Step 1: Track Your Images and Current Selection #

First, add class-level variables to keep track of all your ring images and the currently selected one. This makes cycling through them straightforward:

// Store all your ring image paths in a list for easy access
private final List<String> ringImagePaths = Arrays.asList(
    "R_bigRing.png",
    "B_bigRing.png",
    "Y_bigRing.png"
);
// Track the index of the image currently selected via scroll
private int currentImageIndex = 0;

Step 2: Add Mouse Scroll Handling to Cycle Images #

Attach a scroll event listener to each Pane. This lets users scroll up/down to switch between images. We use modulo arithmetic to loop back to the first image when we reach the end of the list:

pane.setOnScroll(e -> {
    if (e.getDeltaY() > 0) {
        // Scroll up = switch to the next image
        currentImageIndex = (currentImageIndex + 1) % ringImagePaths.size();
    } else {
        // Scroll down = switch to the previous image (add list size first to avoid negative values)
        currentImageIndex = (currentImageIndex - 1 + ringImagePaths.size()) % ringImagePaths.size();
    }
    // Optional: Print feedback to confirm the image switch
    System.out.println("Selected image: " + ringImagePaths.get(currentImageIndex));
});

Step 3: Update Click Event to Use the Selected Image #

Modify your existing click listener to use the currently selected image instead of hardcoding a path. Plus, if you want to replace the image on repeated clicks (instead of stacking multiple images), add a check to swap out the existing ImageView:

pane.setOnMouseClicked(e -> {
    System.out.printf("You placed a ring on cell [%d, %d]%n", colIndex, rowIndex);
    
    // Grab the path of the currently selected image
    String selectedPath = ringImagePaths.get(currentImageIndex);
    Image image = new Image(Main.class.getResourceAsStream(selectedPath));
    ImageView imageView = new ImageView(image);
    
    // Replace existing image (if any) to avoid stacking
    if (!pane.getChildren().isEmpty()) {
        pane.getChildren().set(0, imageView);
    } else {
        pane.getChildren().add(imageView);
    }
});

Full Updated addPane Method #

Putting it all together, your method will look like this:

private void addPane(int colIndex, int rowIndex) {
    Pane pane = new Pane();
    
    // Handle scroll to cycle images
    pane.setOnScroll(e -> {
        if (e.getDeltaY() > 0) {
            currentImageIndex = (currentImageIndex + 1) % ringImagePaths.size();
        } else {
            currentImageIndex = (currentImageIndex - 1 + ringImagePaths.size()) % ringImagePaths.size();
        }
        System.out.println("Switched to: " + ringImagePaths.get(currentImageIndex));
    });
    
    // Handle click to place the selected image
    pane.setOnMouseClicked(e -> {
        System.out.printf("You placed a ring on cell [%d, %d]%n", colIndex, rowIndex);
        String selectedPath = ringImagePaths.get(currentImageIndex);
        Image image = new Image(Main.class.getResourceAsStream(selectedPath));
        ImageView imageView = new ImageView(image);
        
        if (!pane.getChildren().isEmpty()) {
            pane.getChildren().set(0, imageView);
        } else {
            pane.getChildren().add(imageView);
        }
    });
    
    grid.add(pane, colIndex, rowIndex);
}

This setup lets users scroll over any pane to switch between your ring images, then click to place the active one. No dropdowns required—just intuitive mouse interactions.

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