JavaFX中鼠标悬停ImageView时获取像素颜色出现偏移错误

鼠标悬停在ImageView的图像上时，部分像素返回错误的颜色值，存在明显的像素偏移问题。通过给ImageView添加MouseMoved事件获取光标坐标，并用该坐标对应的颜色填充Circle节点，但无论是PNG还是JPG格式的图片，都出现这个问题。

控制器代码（initialize方法） #

@FXML
public ImageView inputImage;

public void initialize() {

    inputImage.setOnMouseMoved(event -> {
        int xPosition = (int) event.getX();
        int yPosition = (int) event.getY();

        Color pixelColor = inputImage.getImage().getPixelReader().getColor(xPosition, yPosition);

        circleColor.setFill(pixelColor);
    });
}

FXML部分代码 #

<VBox HBox.hgrow="ALWAYS" alignment="CENTER">
    <HBox alignment="CENTER">
        <VBox.margin>
            <Insets bottom="50.0"/>
        </VBox.margin>

        <ImageView fx:id="inputImage" pickOnBounds="true" preserveRatio="true" fitHeight="300"
                   fitWidth="300">
            <Image url="@../Resources/Default-image.png" backgroundLoading="true"/>
        </ImageView>
    </HBox>

    <HBox alignment="CENTER">
        <Button onAction="#handleFileChooserClick" text="load image"/>
    </HBox>
</VBox>

<VBox prefWidth="200" alignment="TOP_CENTER">
    <padding>
        <Insets top="60" bottom="60"/>
    </padding>

    <VBox alignment="TOP_CENTER">
        <Circle radius="70" fill="orange" stroke="black" fx:id="circleColor"/>
        <VBox.margin>
            <Insets bottom="50.0"/>
        </VBox.margin>
    </VBox>

    <Button textAlignment="CENTER" text="Isolate Color"/>
</VBox>

问题表现 #

问题根源 #

你直接使用event.getX()和event.getY()获取的是ImageView控件自身的坐标，但你的ImageView设置了preserveRatio="true"以及固定的fitWidth、fitHeight，图像会被缩放后居中显示在控件内。此时控件坐标和原始图像的像素坐标不匹配，直接用控件坐标读取原始图像像素，自然会出现偏移和颜色错误。

修复代码 #

将鼠标在ImageView上的坐标转换为原始图像的像素坐标，修改后的initialize方法如下：

@FXML
public ImageView inputImage;
@FXML
public Circle circleColor;

public void initialize() {
    inputImage.setOnMouseMoved(event -> {
        Image image = inputImage.getImage();
        if (image == null) return;

        // 获取控件尺寸和原始图像尺寸
        double viewWidth = inputImage.getBoundsInLocal().getWidth();
        double viewHeight = inputImage.getBoundsInLocal().getHeight();
        double imageWidth = image.getWidth();
        double imageHeight = image.getHeight();

        // 计算实际缩放比例（因preserveRatio=true，宽高缩放比例一致）
        double scale = Math.min(viewWidth / imageWidth, viewHeight / imageHeight);

        // 计算图像在控件内的偏移量（居中显示的空白区域）
        double offsetX = (viewWidth - imageWidth * scale) / 2;
        double offsetY = (viewHeight - imageHeight * scale) / 2;

        // 转换为原始图像的像素坐标
        double imageX = (event.getX() - offsetX) / scale;
        double imageY = (event.getY() - offsetY) / scale;

        // 确保坐标在图像范围内，避免越界
        if (imageX >= 0 && imageX < imageWidth && imageY >= 0 && imageY < imageHeight) {
            Color pixelColor = image.getPixelReader().getColor((int) imageX, (int) imageY);
            circleColor.setFill(pixelColor);
        }
    });
}

关键说明 #

• preserveRatio="true"会让图像按比例缩放，所以实际缩放比例取宽高缩放因子的较小值，保证图像完整且不变形。
• 偏移量计算是为了排除控件中未被图像覆盖的空白区域，确保鼠标坐标是相对于图像本身的。
• 增加坐标范围判断，防止鼠标移到图像外的空白区域时触发像素读取越界错误。

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