JAVAFX 2.0 मैं एक स्लाइडर में स्लाइडर आइकन को छवि में कैसे बदल सकता हूं?

Question

मैं अपनी छवि में आइकन बदलना चाहता हूं, मैंने सीएसएस संदर्भ मार्गदर्शिका को देखा है लेकिन मुझे कुछ भी प्रासंगिक नहीं लगता है। क्या यह भी संभव है? कोई फर्क नहीं पड़ता कि यह सीएसएस का उपयोग कर रहा है या मुख्य जावाएफएक्स स्क्रिप्ट से घोषणात्मक रूप से।

Answer 1

इस AudioPlayer में एक कस्टम स्लाइडर प्रस्तुत करने के तरीके के नमूना कोड और छवियों पर एक नज़र डालें।

इसके अलावा JFXtras library में कई गेज हैं यदि आप केवल एक इंटरैक्टिव नियंत्रण की बजाय प्रतिक्रिया चाहते हैं।

यहां कुछ नमूना सीएसएस है जो परिवर्तक के उत्तर द्वारा इंगित चयनकर्ता का उपयोग कर रहा है। ध्यान दें कि पूरी छवि को प्रदर्शित करने के लिए मुझे आधा छवियों आयामों पर एक -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

आप सीएसएस

का उपयोग कर स्लाइडर के अंगूठे को बदल सकते हैं 0

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

Answer 3

यदि आप अंगूठे पृष्ठभूमि रंग को हटाना चाहते हैं और केवल छवि (गोल बटन जैसे अर्द्ध पारदर्शी वाले) हैं तो आपको भी -fx-background-color: पारदर्शी होना चाहिए; जब तक आपके पास पृष्ठभूमि

.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; 
}