JavaFX - 將圖像添加到ColorPicker

我正在使用netBeans和SceneBuilder創建一個帶有幾個文本編輯器選項的小窗口。我在屏幕上包含的一個按鈕是一個colorPicker，我根據以下樣式進行了修改;JavaFX - 將圖像添加到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下拉列表旁邊。

來源

2016-12-29 dibiasem

如果您嘗試更改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。

來源

2016-12-29 17:59:06

完美的工作，謝謝！ – dibiasem

JavaFX - 將圖像添加到ColorPicker

回答

相關問題