Question

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

Answer 1

查看示例代码和图像，了解自定义滑块在此AudioPlayer中的呈现方式。

如果你只想要反馈而不是交互式控制，JFXtras library还有很多指标。

这是使用由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();
  }
}

示例程序输出：

piggy

Answer 2

enter image description here

您可以使用css

更改滑块的滑块

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

Answer 3

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

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

我们要想象的是，我们已经对主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; }，则用于显示整个图像。

var result = document.querySelector('.result'),
   img_result = document.querySelector('.img-result'),
   img_w = document.querySelector('.img-w'),
   img_h = document.querySelector('.img-h'),
   options = document.querySelector('.options'),
   save = document.querySelector('.save'),
   cropper = '';

    upload.addEventListener('change', function (e) {
        if (e.target.files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
                if (e.target.result) {
                    var img = document.createElement('img');
                    img.id = 'image';
                    img.src = e.target.result;
                    result.innerHTML = '';
                    result.appendChild(img);
                    save.classList.remove('hide');
                    options.classList.remove('hide');
                    cropper = new Cropper(img);
                }
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });

    save.addEventListener('click', function (e) {
        e.preventDefault();
        var imgSrc = cropper.getCroppedCanvas({
            width: img_w.value,
            height: img_h.value
        }).toDataURL();
        cropped.classList.remove('hide');
        img_result.classList.remove('hide');
        switch (imageNo) {
            case 1:
                imageC1 = document.querySelector('.imageC1');
                cropped = document.querySelector('.cropped1');
                imageC1.value = imgSrc;
                $('.removeFirst').show();
                break;
            case 2:
                imageC1 = document.querySelector('.imageC2');
                cropped = document.querySelector('.cropped2');
                imageC1.value = imgSrc;
                $('.removeSecond').show();
                break;
            case 3:
                imageC1 = document.querySelector('.imageC3');
                cropped = document.querySelector('.cropped3');
                imageC1.value = imgSrc;
                $('.removeThird').show();
                break;

            default:
                imageC1 = document.querySelector('.imageC1');
                cropped = document.querySelector('.cropped1');
                imageC1.value = imgSrc;
                $('.removeFirst').show();
        }

    });

示例程序输出：

slider

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

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

4 个答案: