JavaFX - 将图像添加到 ColorPicker

Question

我正在使用 netBeans 和 SceneBuilder 创建一个带有几个文本编辑器选项的小窗口。我在屏幕中包含的其中一个按钮是我根据以下样式修改的颜色选择器；

<ColorPicker fx:id="clrFill" layoutX="119.0" layoutY="18.0" prefHeight="30.0" prefWidth="30.0" style="-fx-color-label-visible: false; -fx-color-rect-height: 3; -fx-color-rect-width: 17;" styleClass="button" stylesheets="/css/colorPickerStyle.css" />

这是当前使用的样式表；

.color-picker .color-picker-label .picker-color
{
-fx-alignment : bottom-center;
}
colorPicker.getStyleClass().add("button");
.color-picker{
    -fx-background-image: "/gui_resources/fill.png"
    -fx-background-size: 20 20;
    -fx-background-position: top center;
}

我的目标是在显示当前颜色的修改后的颜色选择器“矩形”上方显示图像。最初，我尝试将 colorPicker 视为 Button 类，因为我已将样式更改为“按钮”，但我无法使用 setGraphic 方法放置图像。从css文件可以看出，我也试过实现一个背景图片，没有成功。

Here是我的屏幕当前外观的副本。 colorPicker 位于 ComboBox 下拉列表旁边。

Answer 1

如果您尝试更改 css 文件中的 ColorPicker 样式类，那是行不通的，您不能在此处放置代码。

实际上，要使用一张图片，你不需要改变它的样式类，你只需要使用url(image.png)即可。 (图像放置在与 FXML 相同的文件夹中)，或者使用 FXML 文件的相对路径，如 url(../image.png) ，或使用 @如果是绝对路径。

这应该有效:

.color-picker {
    -fx-background-image: url(fill.png);
    -fx-background-size: 20 20;
    -fx-background-position: top center;
    -fx-background-repeat: no-repeat;   
}
.color-picker .color-picker-label .picker-color {
    -fx-alignment : bottom-center;
} 

您可以查看 <uri>图片格式 here .