JAVAFX 2.0如何将滑块图标更改为图像？

Question

我想将图标更换为我的图片，我已经查阅了CSS参考指南，但似乎没有找到相关内容。是否有可能？无论是使用CSS还是从主JavaFX脚本中以声明方式实现都可以。

- Yongan Wu

Answer 1

请查看这个音频播放器中如何渲染自定义滑块的示例代码和图像。

如果您只需要反馈而不需要交互控件，JFXtras库中有许多仪表可供选择。

以下是使用invariant答案指出的选择器的一些示例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();
  }
}

示例程序输出：

- jewelsea

Answer 2

使用CSS可以更改滑块的拇指

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

- invariant

Answer 3

我知道这是一个旧问题，但我认为我可以对此解决方案做出贡献。

如果我们想使用唯一的滑块或者我们想要修改所有滑块的外观，那么之前的解决方案已经足够了。 但是，如果我们只需要修改一个滑块的外观，那么我们需要另一种方法。

我们将想象已经将基于样式应用到了主场景。 但是，我们不想添加另一个CSS文件来修改滑块的行为。 因此，问题是：我们如何使用基础CSS文件修改滑块样式？

解决方案很简单，对所有控件使用“setId()”属性。 现在让我们检查一下这个类：

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

/**
 * Created by teocci.
 *
 * @author [e-mail] on 2018-Jul-06
 */
public class CustomSliderThumb extends Application
{
    public static void main(String[] args) { launch(args); }

    @Override
    public void start(Stage stage) throws Exception
    {
        Slider slider = new Slider();
        slider.setId("custom-slider");

        VBox layout = new VBox();
        layout.setId("base-layout");
        layout.getChildren().setAll(slider);

        Scene scene = new Scene(layout);
        scene.getStylesheets().add("css/style.css");

        stage.setScene(scene);
        stage.show();
    }
}

在这个例子中，我们创建了一个名为“custom-slider”的滑块并设置了它的id。然后，我们将此滑块添加到VBox布局中，最后将布局添加到具有style.css的场景中。

现在让我们检查style.css以及如何使用id选择器应用自定义样式。请记住，要指定-fx-pref-height和-fx-pref-width与图像尺寸一起使用，或者如果是正方形，则使用-fx-padding作为整个图像边缘尺寸的一半来显示整个图像。

#custom-slider .thumb {
    -fx-background-image :url("https://i.imgur.com/SwDjIg7.png");
    -fx-background-color: transparent;

    -fx-padding: 24;

    /*-fx-pref-height: 48;*/
    /*-fx-pref-width: 48;*/
}

#custom-slider .track {
    -fx-background-color: #2F2F2F;
}

#base-layout {
    -fx-background-color: lightgray;
    -fx-padding: 10px;
}

示例程序输出：

- Teocci

Answer 4

如果您想要移除拇指背景颜色，只保留图像（半透明的，如圆形按钮），那么您还应该使用-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;
}

- Kishore