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

Question

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

Answer 1

查看如何在此AudioPlayer中呈现自定义滑块的示例代码和图像。

如果您只想要反馈而不是交互式控件，JFXtras 库也有许多仪表。

这是使用不变量的答案指出的选择器的一些示例 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 更改滑块的拇指

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

Answer 3

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

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

我们要做的是想象我们已经将基础样式应用于 main 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();
    }
}

在此示例中，我们创建了 aslider并将其 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;
}

示例程序输出：

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