JAVAFX 2.0如何將滑塊中的滑塊圖標更改爲圖像？

Question

我想將圖標更改爲我的圖像，我查看了CSS參考指南，但似乎無法找到任何相關內容。它甚至有可能嗎？如果它使用CSS或從主JavaFX腳本聲明式，則無關緊要。

Answer 1

看看示例代碼和一個自定義的滑塊是如何在這個AudioPlayer渲染的圖像。

另外，JFXtras library有許多計，如果你只是想反饋，而不是一個交互式的控制。

下面是一個使用選擇一些示例CSS指出了不變的回答。請注意，我需要在圖像尺寸的一半處添加-fx-padding規格，以便顯示整個圖像。

/** slider.css 
place in same directory as SliderCss.java 
ensure build system copies the css file to the build output path */ 

.slider .thumb { 
    -fx-background-image :url("http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/piggy-bank-icon.png"); 
    -fx-padding: 64; 
} 
/* Icon license: creative commons with attribution: http://www.doublejdesign.co.uk/products-page/icons/diagram */ 

示例應用程序：

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.layout.*; 
import javafx.stage.Stage; 

public class SliderCss extends Application { 
    public static void main(String[] args) { launch(args); } 
    @Override public void start(Stage stage) throws Exception { 
    VBox layout = new VBox(); 
    layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10px;"); 
    layout.getChildren().setAll(new Slider()); 
    layout.getStylesheets().add(getClass().getResource("slider.css").toExternalForm()); 
    stage.setScene(new Scene(layout)); 

    stage.show(); 
    } 
} 

示例程序輸出：

Answer 2

您可以使用CSS

改變滑塊的拇指0

.slider .thumb{ 
-fx-background-image :url("your image"); 
...// more customization  
} 

Answer 3

如果你想刪除拇指背景顏色，只有圖像（半透明的像圓形按鈕），那麼你也應該-fx-background-color：transparent;除非你有背景

.slider .thumb { 
    -fx-background-image :url("sider-round-thumb-image.png"); 
    -fx-padding: 16; /* My thumb image is 33x33 pixels,so padding is half */ 
    -fx-pref-height: 28; 
    -fx-pref-width: 28; 

    -fx-background-color:transparent; 
}