JAVAFX 2.0 如何将滑块中的滑块图标更改为图像？答案

【问题标题】：JAVAFX 2.0 How can i change the slider icon in a slider to an image?JAVAFX 2.0 如何将滑块中的滑块图标更改为图像？
【发布时间】：2012-11-07 14:18:28
【问题描述】：

我想将图标更改为我的图像，我查看了 CSS 参考指南，但似乎找不到任何相关内容。甚至可能吗？不管它是使用 CSS 还是从主要 JavaFX 脚本声明。

【问题讨论】：

标签： icons slider javafx

【解决方案1】：

我知道这是一个老问题，但我认为我对这个解决方案有贡献。

如果我们想使用一个独特的滑块，或者我们想修改所有滑块的外观，前面的解决方案就绰绰有余了。但是，如果我们只需要修改一个滑块的外观，我们需要另一种方法。

我们要做的是假设我们已将基础样式应用于主要的scene。但是我们不想添加另一个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 teocci@yandex.com 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();
    }
}

在本例中，我们创建了一个slider，并将其 id 设置为"custom-slider"。然后我们将此滑块添加到 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;
}

示例程序输出：

【讨论】：

【解决方案2】：

如果你想删除拇指背景颜色并且只有图像（半透明的像圆形按钮）那么你也应该 -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;
}

【讨论】：

【解决方案3】：

查看此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();
  }
}

示例程序输出：

【讨论】：

【解决方案4】：

您可以使用 css 更改滑块的拇指

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

【讨论】：