JavaFX - 将图像添加到ColorPicker

Question

我正在使用netBeans和SceneBuilder创建一个带有几个文本编辑器选项的小窗口。我在屏幕上包含的一个按钮是一个colorPicker，我根据以下样式进行了修改;

<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“矩形”上方显示图像。最初，我试图将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。