JavaFX - ColorPickerに画像を追加

Question

私はいくつかのテキストエディタオプションで小さなウィンドウを作成するために、netBeansとSceneBuilderを使用しています。私が画面に含まれているボタンの1つは、次のスタイルに従って変更した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を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; 
} 

あなたがイメージhereため<uri>形式を確認することができます。